RepoMirrors/mediamtx
1
0
Fork 0
mirror of https://github.com/bluenviron/mediamtx synced 2025-01-07 07:20:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

webrtc: display publish-related errors in web page (#1836) (#2080)

Browse Source
This commit is contained in:
Alessandro Ros 2023-07-19 13:20:05 +02:00 committed by GitHub
parent 473c075d89
commit 048280f4e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
internal/core/webrtc_publish_index.html
View File

@ -88,6 +88,9 @@ select {
<div id="transmitting" style="display: none;">
publishing
</div>
<div id="error" style="display: none;">
<span id="error-message"></span>
</div>
</div>
<script>
@ -95,23 +98,28 @@ select {
const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;
const ERROR = 3;
let state = INITIALIZING;
let errorMessage = '';
const setState = (newState) => {
state = newState;
const render = () => {
for (const el of ['initializing', 'device', 'transmitting', 'error']) {
document.getElementById(el).style.display = 'none';
}
switch (state) {
case DEVICE:
document.getElementById("initializing").style.display = 'none';
document.getElementById("device").style.display = 'flex';
document.getElementById("transmitting").style.display = 'none';
document.getElementById('device').style.display = 'flex';
break;
case TRANSMITTING:
document.getElementById("initializing").style.display = 'none';
document.getElementById("device").style.display = 'none';
document.getElementById("transmitting").style.display = 'flex';
document.getElementById('transmitting').style.display = 'flex';
break;
case ERROR:
document.getElementById('error').style.display = 'flex';
document.getElementById('error-message').innerHTML = 'error: ' + errorMessage;
break;
}
};
@ -444,7 +452,8 @@ class Transmitter {
}
const onTransmit = (stream) => {
setState(TRANSMITTING);
state = TRANSMITTING;
render();
document.getElementById('video').srcObject = stream;
new Transmitter(stream);
};
@ -563,13 +572,26 @@ const populateCodecs = () => {
};
const initialize = () => {
if (navigator.mediaDevices === undefined) {
state = ERROR;
errorMessage = 'can\'t access webcams or microphones. Make sure that WebRTC encryption is enabled.';
render();
return;
}
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(() => Promise.all([
populateDevices(),
populateCodecs(),
]))
.then(() => {
setState(DEVICE);
state = DEVICE;
render();
})
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
});
};