pimhwang
/
mediamtx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

hls, webrtc: in the web page, show connection errors to users (#2957)

pull/2958/head
Alessandro Ros 2 years ago committed by GitHub
parent
7d0e702f14
commit
0433af66a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1039 additions and 1100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      internal/servers/hls/index.html
  2. 634
      internal/servers/webrtc/publish_index.html
  3. 376
      internal/servers/webrtc/read_index.html

145
internal/servers/hls/index.html
Unescape View File

@ -9,21 +9,58 @@ html, body { @@ -9,21 +9,58 @@ html, body {
padding: 0;
height: 100%;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
#video {
width: 100%;
height: 100%;
background: black;
background: rgb(30, 30, 30);
}
#message {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: white;
pointer-events: none;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<video id="video"></video>
<div id="message"></div>
<script src="hls.min.js"></script>
<script>
const create = (video) => {
const retryPause = 2000;
const video = document.getElementById('video');
const message = document.getElementById('message');
let defaultControls = false;
const setMessage = (str) => {
if (str !== '') {
video.controls = false;
} else {
video.controls = defaultControls;
}
message.innerText = str;
};
const loadStream = () => {
// always prefer hls.js over native HLS.
// this is because some Android versions support native HLS
// but don't support fMP4s.
@ -35,7 +72,16 @@ const create = (video) => { @@ -35,7 +72,16 @@ const create = (video) => {
hls.on(Hls.Events.ERROR, (evt, data) => {
if (data.fatal) {
hls.destroy();
setTimeout(() => create(video), 2000);
if (data.details === 'manifestIncompatibleCodecsError') {
setMessage('stream makes use of codecs which are incompatible with this browser or operative system');
} else if (data.response && data.response.code === 404) {
setMessage('stream not found, retrying in some seconds');
} else {
setMessage(data.error + ', retrying in some seconds');
}
setTimeout(() => loadStream(video), retryPause);
}
});
@ -44,6 +90,7 @@ const create = (video) => { @@ -44,6 +90,7 @@ const create = (video) => {
});
hls.on(Hls.Events.MANIFEST_PARSED, () => {
setMessage('');
video.play();
});
@ -60,93 +107,33 @@ const create = (video) => { @@ -60,93 +107,33 @@ const create = (video) => {
}
};
/**
* Parses the query string from a URL into an object representing the query parameters.
* If no URL is provided, it uses the query string from the current page's URL.
*
* @param {string} [url=window.location.search] - The URL to parse the query string from.
* @returns {Object} An object representing the query parameters with keys as parameter names and values as parameter values.
*/
const parseQueryString = (url) => {
const queryString = (url || window.location.search).split("?")[1];
if (!queryString) return {};
const paramsArray = queryString.split("&");
const result = {};
for (let i = 0; i < paramsArray.length; i++) {
const param = paramsArray[i].split("=");
const key = decodeURIComponent(param[0]);
const value = decodeURIComponent(param[1] || "");
if (key) {
if (result[key]) {
if (Array.isArray(result[key])) {
result[key].push(value);
} else {
result[key] = [result[key], value];
}
} else {
result[key] = value;
}
}
}
return result;
};
/**
* Parses a string with boolean-like values and returns a boolean.
* @param {string} str The string to parse
* @param {boolean} defaultVal The default value
* @returns {boolean}
*/
const parseBoolString = (str, defaultVal) => {
const trueValues = ["1", "yes", "true"];
const falseValues = ["0", "no", "false"];
str = (str || "").toString();
str = (str || '');
if (trueValues.includes(str.toLowerCase())) {
if (['1', 'yes', 'true'].includes(str.toLowerCase())) {
return true;
} else if (falseValues.includes(str.toLowerCase())) {
}
if (['0', 'no', 'false'].includes(str.toLowerCase())) {
return false;
} else {
return defaultVal;
}
return defaultVal;
};
/**
* Sets video attributes based on query string parameters or default values.
*
* @param {HTMLVideoElement} video - The video element on which to set the attributes.
*/
const setVideoAttributes = (video) => {
let qs = parseQueryString();
video.controls = parseBoolString(qs["controls"], true);
video.muted = parseBoolString(qs["muted"], true);
video.autoplay = parseBoolString(qs["autoplay"], true);
video.playsInline = parseBoolString(qs["playsinline"], true);
const loadAttributesFromQuery = () => {
const params = new URLSearchParams(window.location.search);
video.controls = parseBoolString(params.get('controls'), true);
video.muted = parseBoolString(params.get('muted'), true);
video.autoplay = parseBoolString(params.get('autoplay'), true);
video.playsInline = parseBoolString(params.get('playsinline'), true);
defaultControls = video.controls;
};
/**
*
* @param {(video: HTMLVideoElement) => void} callback
* @param {HTMLElement} container
* @returns
*/
const initVideoElement = (callback, container) => {
return () => {
const video = document.createElement("video");
video.id = "video";
setVideoAttributes(video);
container.append(video);
callback(video);
};
const init = () => {
loadAttributesFromQuery();
loadStream();
};
window.addEventListener('DOMContentLoaded', initVideoElement(create, document.body));
window.addEventListener('DOMContentLoaded', init);
</script>

634
internal/servers/webrtc/publish_index.html
Unescape View File

@ -8,235 +8,209 @@ html, body { @@ -8,235 +8,209 @@ html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: 'Arial', sans-serif;
}
#video {
width: 100%;
height: 100%;
background: black;
flex-grow: 1;
min-height: 0;
background: rgb(30, 30, 30);
}
#controls {
display: none;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 10px;
flex-direction: column;
height: 100%;
width: 100%;
box-sizing: border-box;
background: rgb(30, 30, 30);
color: white;
}
#device {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-auto-flow: column;
gap: 10px 20px
}
.item {
display: grid;
grid-auto-flow: column;
grid-template-columns: auto 200px;
grid-template-columns: auto 220px;
align-items: center;
gap: 20px;
}
#submit_line {
margin-top: 20px;
}
#error-message {
max-width: 500px;
margin: 10px 0;
}
select, input[type="text"] {
appearance: none;
background: inherit;
color: inherit;
border: 1px solid rgb(200, 200, 200);
border-radius: 3px;
height: 40px;
}
#message {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
}
select {
width: 200px;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: white;
pointer-events: none;
padding: 20px;
box-sizing: border-box;
}
#publish-button {
margin-top: 10px;
appearance: none;
background: rgb(200, 200, 200);
color: black;
border-radius: 3px;
height: 50px;
padding: 0 20px;
border: none;
}
</style>
</head>
<body>
<video id="video" muted controls autoplay playsinline></video>
<div id="controls">
<div id="initializing" style="display: block;">
initializing
</div>
<video id="video" muted autoplay playsinline></video>
<div id="device" style="display: none">
<div id="controls">
<div id="items">
<div class="item">
<label for="video_device">video device</label>
<select id="video_device">
<label for="video-device">video device</label>
<select id="video-device">
<option value="none">none</option>
</select>
</div>
<div class="item">
<label for="video_codec">video codec</label>
<select id="video_codec">
<label for="video-codec">video codec</label>
<select id="video-codec">
</select>
</div>
<div class="item">
<label for="video_bitrate">video bitrate (kbps)</label>
<input id="video_bitrate" type="text" value="10000" />
<label for="video-bitrate">video bitrate (kbps)</label>
<input id="video-bitrate" type="text" value="10000" />
</div>
<div class="item">
<label for="video_framerate">video framerate</label>
<input id="video_framerate" type="text" value="30" />
<label for="video-framerate">video framerate</label>
<input id="video-framerate" type="text" value="30" />
</div>
<div class="item">
<label for="video_width">video width</label>
<input id="video_width" type="text" value="1920" />
<label for="video-width">video width</label>
<input id="video-width" type="text" value="1920" />
</div>
<div class="item">
<label for="video_height">video height</label>
<input id="video_height" type="text" value="1080" />
<label for="video-height">video height</label>
<input id="video-height" type="text" value="1080" />
</div>
<div class="item">
<label for="audio_device">audio device</label>
<select id="audio_device">
<label for="audio-device">audio device</label>
<select id="audio-device">
<option value="none">none</option>
</select>
</div>
<div class="item">
<label for="audio_codec">audio codec</label>
<select id="audio_codec">
<label for="audio-codec">audio codec</label>
<select id="audio-codec">
</select>
</div>
<div class="item">
<label for="audio_bitrate">audio bitrate (kbps)</label>
<input id="audio_bitrate" type="text" value="32" />
<label for="audio-bitrate">audio bitrate (kbps)</label>
<input id="audio-bitrate" type="text" value="32" />
</div>
<div class="item">
<label for="audio_voice">optimize for voice</label>
<input id="audio_voice" type="checkbox" checked>
<label for="audio-voice">optimize for voice</label>
<div>
<input id="audio-voice" type="checkbox" checked>
</div>
<div class="item"></div>
</div>
<div id="submit_line" style="display: none">
<button id="publish_confirm">publish</button>
</div>
<div id="transmitting" style="display: none;">
publishing
</div>
<div id="error" style="display: none;">
<span id="error-message"></span>
<div id="submit-line">
<button id="publish-button">publish</button>
</div>
</div>
<div id="message"></div>
<script>
const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;
const ERROR = 3;
let state = INITIALIZING;
let errorMessage = '';
const retryPause = 2000;
const video = document.getElementById('video');
const controls = document.getElementById('controls');
const message = document.getElementById('message');
const publishButton = document.getElementById('publish-button');
const videoForm = {
device: document.getElementById("video_device"),
codec: document.getElementById("video_codec"),
bitrate: document.getElementById("video_bitrate"),
framerate: document.getElementById("video_framerate"),
width: document.getElementById("video_width"),
height: document.getElementById("video_height")
}
device: document.getElementById('video-device'),
codec: document.getElementById('video-codec'),
bitrate: document.getElementById('video-bitrate'),
framerate: document.getElementById('video-framerate'),
width: document.getElementById('video-width'),
height: document.getElementById('video-height')
};
const audioForm = {
device: document.getElementById("audio_device"),
codec: document.getElementById("audio_codec"),
bitrate: document.getElementById("audio_bitrate"),
voice: document.getElementById("audio_voice"),
}
const url = new URL(window.location.href);
const initializeInputsFromUrl = () => {
const inputs = [...Object.values(videoForm), ...Object.values(audioForm)]
for (const input of inputs) {
const value = url.searchParams.get(input.id);
if (value) {
if (input instanceof HTMLInputElement && input.type === "text") {
input.value = value;
}
device: document.getElementById('audio-device'),
codec: document.getElementById('audio-codec'),
bitrate: document.getElementById('audio-bitrate'),
voice: document.getElementById('audio-voice'),
};
if (input instanceof HTMLInputElement && input.type === "checkbox") {
input.checked = value === "true";
}
let pc = null;
let stream = null;
let restartTimeout = null;
let sessionUrl = '';
let offerData = '';
let queuedCandidates = [];
if (input instanceof HTMLSelectElement) {
input.value = value
}
}
}
}
const setMessage = (str) => {
message.innerText = str;
};
const registerInputsToUrl = () => {
const inputs = [...Object.values(videoForm), ...Object.values(audioForm)]
const onError = (err, retry) => {
if (!retry) {
setMessage(err);
} else {
if (restartTimeout === null) {
setMessage(err + ', retrying in some seconds');
for (const input of inputs) {
if (input instanceof HTMLInputElement && input.type === "text") {
input.addEventListener("input", () => {
url.searchParams.set(input.id, input.value);
window.history.replaceState(null, null, url);
})
if (pc !== null) {
pc.close();
pc = null;
}
if (input instanceof HTMLInputElement && input.type === "checkbox") {
input.addEventListener("input", () => {
url.searchParams.set(input.id, input.checked);
window.history.replaceState(null, null, url);
})
}
restartTimeout = window.setTimeout(() => {
restartTimeout = null;
startTransmit();
}, retryPause);
if (input instanceof HTMLSelectElement) {
input.addEventListener("input", () => {
url.searchParams.set(input.id, input.value);
window.history.replaceState(null, null, url);
})
}
}
if (sessionUrl) {
fetch(sessionUrl, {
method: 'DELETE',
});
}
sessionUrl = '';
const render = () => {
for (const el of ['initializing', 'device', 'submit_line', 'transmitting', 'error']) {
document.getElementById(el).style.display = 'none';
queuedCandidates = [];
}
switch (state) {
case DEVICE:
document.getElementById('device').style.display = 'grid';
document.getElementById('submit_line').style.display = 'block';
initializeInputsFromUrl();
registerInputsToUrl();
break;
case TRANSMITTING:
document.getElementById('transmitting').style.display = 'flex';
break;
case ERROR:
document.getElementById('error').style.display = 'flex';
document.getElementById('error-message').innerHTML = 'error: ' + errorMessage;
break;
}
};
const restartPause = 2000;
const unquoteCredential = (v) => (
JSON.parse(`"${v}"`)
);
@ -251,7 +225,7 @@ const linkToIceServers = (links) => ( @@ -251,7 +225,7 @@ const linkToIceServers = (links) => (
if (m[3] !== undefined) {
ret.username = unquoteCredential(m[3]);
ret.credential = unquoteCredential(m[4]);
ret.credentialType = "password";
ret.credentialType = 'password';
}
return ret;
@ -278,7 +252,7 @@ const parseOffer = (offer) => { @@ -278,7 +252,7 @@ const parseOffer = (offer) => {
return ret;
};
const generateSdpFragment = (offerData, candidates) => {
const generateSdpFragment = (od, candidates) => {
const candidatesByMedia = {};
for (const candidate of candidates) {
const mid = candidate.sdpMLineIndex;
@ -288,12 +262,12 @@ const generateSdpFragment = (offerData, candidates) => { @@ -288,12 +262,12 @@ const generateSdpFragment = (offerData, candidates) => {
candidatesByMedia[mid].push(candidate);
}
let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'
+ 'a=ice-pwd:' + offerData.icePwd + '\r\n';
let frag = 'a=ice-ufrag:' + od.iceUfrag + '\r\n'
+ 'a=ice-pwd:' + od.icePwd + '\r\n';
let mid = 0;
for (const media of offerData.medias) {
for (const media of od.medias) {
if (candidatesByMedia[mid] !== undefined) {
frag += 'm=' + media + '\r\n'
+ 'a=mid:' + mid + '\r\n';
@ -386,8 +360,8 @@ const setAudioBitrate = (section, bitrate, voice) => { @@ -386,8 +360,8 @@ const setAudioBitrate = (section, bitrate, voice) => {
return lines.join('\r\n');
};
const editAnswer = (answer, videoCodec, audioCodec, videoBitrate, audioBitrate, audioVoice) => {
const sections = answer.sdp.split('m=');
const editAnswer = (sdp, videoCodec, audioCodec, videoBitrate, audioBitrate, audioVoice) => {
const sections = sdp.split('m=');
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
@ -398,99 +372,49 @@ const editAnswer = (answer, videoCodec, audioCodec, videoBitrate, audioBitrate, @@ -398,99 +372,49 @@ const editAnswer = (answer, videoCodec, audioCodec, videoBitrate, audioBitrate,
}
}
answer.sdp = sections.join('m=');
return sections.join('m=');
};
class Transmitter {
constructor(stream) {
this.stream = stream;
this.pc = null;
this.restartTimeout = null;
this.sessionUrl = '';
this.queuedCandidates = [];
this.start();
}
start() {
console.log("requesting ICE servers");
fetch(new URL('whip', url) + url.search, {
method: 'OPTIONS',
})
.then((res) => this.onIceServers(res))
.catch((err) => {
console.log('error: ' + err);
this.scheduleRestart();
});
}
onIceServers(res) {
this.pc = new RTCPeerConnection({
iceServers: linkToIceServers(res.headers.get('Link')),
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
});
this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
this.pc.oniceconnectionstatechange = () => this.onConnectionState();
this.stream.getTracks().forEach((track) => {
this.pc.addTrack(track, this.stream);
});
this.pc.createOffer()
.then((offer) => this.onLocalOffer(offer));
}
onLocalOffer(offer) {
this.offerData = parseOffer(offer.sdp);
this.pc.setLocalDescription(offer);
console.log("sending offer");
fetch(new URL('whip', url) + url.search, {
method: 'POST',
const sendLocalCandidates = (candidates) => {
fetch(sessionUrl + window.location.search, {
method: 'PATCH',
headers: {
'Content-Type': 'application/sdp',
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
},
body: offer.sdp,
body: generateSdpFragment(offerData, candidates),
})
.then((res) => {
if (res.status !== 201) {
if (res.status !== 204) {
throw new Error('bad status code');
}
this.sessionUrl = new URL(res.headers.get('location'), url.href).toString();
return res.text();
})
.then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
type: 'answer',
sdp,
})))
.catch((err) => {
console.log('error: ' + err);
this.scheduleRestart();
onError(err.toString(), true);
});
}
};
onConnectionState() {
if (this.restartTimeout !== null) {
const onLocalCandidate = (evt) => {
if (restartTimeout !== null) {
return;
}
console.log("peer connection state:", this.pc.iceConnectionState);
switch (this.pc.iceConnectionState) {
case "disconnected":
this.scheduleRestart();
if (evt.candidate !== null) {
if (sessionUrl === '') {
queuedCandidates.push(evt.candidate);
} else {
sendLocalCandidates([evt.candidate])
}
}
};
onRemoteAnswer(answer) {
if (this.restartTimeout !== null) {
const onRemoteAnswer = (sdp) => {
if (restartTimeout !== null) {
return;
}
editAnswer(
answer,
sdp = editAnswer(
sdp,
videoForm.codec.value,
audioForm.codec.value,
videoForm.bitrate.value,
@ -498,123 +422,131 @@ class Transmitter { @@ -498,123 +422,131 @@ class Transmitter {
audioForm.voice.checked,
);
this.pc.setRemoteDescription(answer);
if (this.queuedCandidates.length !== 0) {
this.sendLocalCandidates(this.queuedCandidates);
this.queuedCandidates = [];
}
}
pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp,
}));
onLocalCandidate(evt) {
if (this.restartTimeout !== null) {
return;
}
if (evt.candidate !== null) {
if (this.sessionUrl === '') {
this.queuedCandidates.push(evt.candidate);
} else {
this.sendLocalCandidates([evt.candidate])
}
}
if (queuedCandidates.length !== 0) {
sendLocalCandidates(queuedCandidates);
queuedCandidates = [];
}
};
sendLocalCandidates(candidates) {
fetch(this.sessionUrl + window.location.search, {
method: 'PATCH',
const sendOffer = (offer) => {
fetch(new URL('whip', window.location.href) + window.location.search, {
method: 'POST',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
'Content-Type': 'application/sdp',
},
body: generateSdpFragment(this.offerData, candidates),
body: offer.sdp,
})
.then((res) => {
if (res.status !== 204) {
if (res.status !== 201) {
throw new Error('bad status code');
}
sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
return res.text();
})
.then((sdp) => onRemoteAnswer(sdp))
.catch((err) => {
console.log('error: ' + err);
this.scheduleRestart();
onError(err.toString(), true);
});
}
};
const createOffer = () => {
pc.createOffer()
.then((offer) => {
offerData = parseOffer(offer.sdp);
pc.setLocalDescription(offer);
sendOffer(offer);
});
};
scheduleRestart() {
if (this.restartTimeout !== null) {
const onConnectionState = () => {
if (restartTimeout !== null) {
return;
}
if (this.pc !== null) {
this.pc.close();
this.pc = null;
if (pc.iceConnectionState === 'disconnected') {
onError('peer connection disconnected', true);
} else if (pc.iceConnectionState === 'connected') {
setMessage('');
}
};
this.restartTimeout = window.setTimeout(() => {
this.restartTimeout = null;
this.start();
}, restartPause);
if (this.sessionUrl) {
fetch(this.sessionUrl, {
method: 'DELETE',
const requestICEServers = () => {
fetch(new URL('whip', window.location.href) + window.location.search, {
method: 'OPTIONS',
})
.then((res) => {
if (res.status !== 200) {
throw new Error('bad status code');
}
pc = new RTCPeerConnection({
iceServers: linkToIceServers(res.headers.get('Link')),
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
});
pc.onicecandidate = (evt) => onLocalCandidate(evt);
pc.oniceconnectionstatechange = () => onConnectionState();
stream.getTracks().forEach((track) => {
pc.addTrack(track, stream);
});
createOffer();
})
.catch((err) => {
console.log('delete session error: ' + err);
onError(err.toString(), true);
});
}
this.sessionUrl = '';
this.queuedCandidates = [];
}
}
};
const onTransmit = (stream) => {
document.getElementById('video').srcObject = stream;
new Transmitter(stream);
const startTransmit = () => {
requestICEServers();
};
const onPublish = () => {
state = TRANSMITTING;
render();
controls.style.display = 'none';
video.style.display = 'block';
setMessage('connecting');
const videoId = videoForm.device.value;
const audioId = audioForm.device.value;
if (videoId !== 'screen') {
let video = false;
let videoOpts = false;
if (videoId !== 'none') {
video = {
videoOpts = {
deviceId: videoId,
};
}
let audio = false;
let audioOpts = false;
if (audioId !== 'none') {
audio = {
audioOpts = {
deviceId: audioId,
};
const voice = audioForm.voice.checked;
if (!voice) {
audio.autoGainControl = false;
audio.echoCancellation = false;
audio.noiseSuppression = false;
audioOpts.autoGainControl = false;
audioOpts.echoCancellation = false;
audioOpts.noiseSuppression = false;
}
}
navigator.mediaDevices.getUserMedia({ video, audio })
.then(onTransmit)
navigator.mediaDevices.getUserMedia({
video: videoOpts,
audio: audioOpts,
})
.then((str) => {
stream = str;
video.srcObject = stream;
startTransmit();
})
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
onError(err.toString(), false);
});
} else {
navigator.mediaDevices.getDisplayMedia({
@ -622,15 +554,17 @@ const onPublish = () => { @@ -622,15 +554,17 @@ const onPublish = () => {
width: { ideal: videoForm.width.value },
height: { ideal: videoForm.height.value },
frameRate: { ideal: videoForm.framerate.value },
cursor: "always",
cursor: 'always',
},
audio: true,
})
.then(onTransmit)
.then((str) => {
stream = str;
video.srcObject = stream;
startTransmit();
})
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
onError(err.toString(), false);
});
}
};
@ -662,8 +596,8 @@ const populateDevices = () => { @@ -662,8 +596,8 @@ const populateDevices = () => {
if (navigator.mediaDevices.getDisplayMedia !== undefined) {
const opt = document.createElement('option');
opt.value = "screen";
opt.text = "screen";
opt.value = 'screen';
opt.text = 'screen';
videoForm.device.appendChild(opt);
}
@ -678,11 +612,11 @@ const populateDevices = () => { @@ -678,11 +612,11 @@ const populateDevices = () => {
};
const populateCodecs = () => {
const pc = new RTCPeerConnection({});
pc.addTransceiver("video", { direction: 'sendonly' });
pc.addTransceiver("audio", { direction: 'sendonly' });
const tempPC = new RTCPeerConnection({});
tempPC.addTransceiver('video', { direction: 'sendonly' });
tempPC.addTransceiver('audio', { direction: 'sendonly' });
return pc.createOffer()
return tempPC.createOffer()
.then((desc) => {
const sdp = desc.sdp.toLowerCase();
@ -704,43 +638,93 @@ const populateCodecs = () => { @@ -704,43 +638,93 @@ const populateCodecs = () => {
}
}
pc.close();
tempPC.close();
});
};
const initialize = () => {
if (navigator.mediaDevices === undefined) {
state = ERROR;
errorMessage = 'can\'t access webcams or microphones. Make sure that WebRTC encryption is enabled.';
render();
return;
}
const populateOptions = () => {
setMessage('loading devices');
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
.then((tempStream) => {
return Promise.all([
populateDevices(),
populateCodecs(),
])
.then(() => {
// free the webcam to prevent 'NotReadableError' on Android
stream.getTracks()
.forEach(track => track.stop());
tempStream.getTracks()
.forEach((track) => track.stop());
state = DEVICE;
render();
setMessage('');
video.style.display = 'none';
controls.style.display = 'flex';
});
})
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
onError(err.toString(), false);
});
};
document.getElementById("publish_confirm").addEventListener('click', onPublish);
const updateQueryOnControls = () => {
const url = new URL(window.location.href);
const inputs = [...Object.values(videoForm), ...Object.values(audioForm)]
for (const input of inputs) {
if (input instanceof HTMLInputElement && input.type === 'text') {
input.addEventListener('input', () => {
url.searchParams.set(input.id, input.value);
window.history.replaceState(null, null, url);
})
}
if (input instanceof HTMLInputElement && input.type === 'checkbox') {
input.addEventListener('input', () => {
url.searchParams.set(input.id, input.checked);
window.history.replaceState(null, null, url);
})
}
if (input instanceof HTMLSelectElement) {
input.addEventListener('input', () => {
url.searchParams.set(input.id, input.value);
window.history.replaceState(null, null, url);
})
}
}
};
const loadControlsFromQuery = () => {
const params = new URLSearchParams(window.location.search);
const inputs = [...Object.values(videoForm), ...Object.values(audioForm)]
for (const input of inputs) {
const value = params.get(input.id);
if (value) {
if (input instanceof HTMLInputElement && input.type === 'text') {
input.value = value;
} else if (input instanceof HTMLInputElement && input.type === 'checkbox') {
input.checked = value === 'true';
} else if (input instanceof HTMLSelectElement) {
input.value = value
}
}
}
};
const init = () => {
if (navigator.mediaDevices === undefined) {
onError(`can't access webcams or microphones. Make sure that WebRTC encryption is enabled.`, false);
return;
}
loadControlsFromQuery();
updateQueryOnControls();
publishButton.addEventListener('click', onPublish);
populateOptions();
};
initialize();
window.addEventListener('DOMContentLoaded', init);
</script>

376
internal/servers/webrtc/read_index.html
Unescape View File

@ -9,19 +9,59 @@ html, body { @@ -9,19 +9,59 @@ html, body {
padding: 0;
height: 100%;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
#video {
width: 100%;
height: 100%;
background: black;
background: rgb(30, 30, 30);
}
#message {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: white;
pointer-events: none;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<video id="video"></video>
<div id="message"></div>
<script>
const restartPause = 2000;
const retryPause = 2000;
const video = document.getElementById('video');
const message = document.getElementById('message');
let pc = null;
let restartTimeout = null;
let sessionUrl = '';
let offerData = '';
let queuedCandidates = [];
let defaultControls = false;
const setMessage = (str) => {
if (str !== '') {
video.controls = false;
} else {
video.controls = defaultControls;
}
message.innerText = str;
};
const unquoteCredential = (v) => (
JSON.parse(`"${v}"`)
@ -37,7 +77,7 @@ const linkToIceServers = (links) => ( @@ -37,7 +77,7 @@ const linkToIceServers = (links) => (
if (m[3] !== undefined) {
ret.username = unquoteCredential(m[3]);
ret.credential = unquoteCredential(m[4]);
ret.credentialType = "password";
ret.credentialType = 'password';
}
return ret;
@ -106,7 +146,7 @@ const editOffer = (offer) => { @@ -106,7 +146,7 @@ const editOffer = (offer) => {
offer.sdp = sections.join('m=');
};
const generateSdpFragment = (offerData, candidates) => {
const generateSdpFragment = (od, candidates) => {
const candidatesByMedia = {};
for (const candidate of candidates) {
const mid = candidate.sdpMLineIndex;
@ -116,12 +156,12 @@ const generateSdpFragment = (offerData, candidates) => { @@ -116,12 +156,12 @@ const generateSdpFragment = (offerData, candidates) => {
candidatesByMedia[mid].push(candidate);
}
let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'
+ 'a=ice-pwd:' + offerData.icePwd + '\r\n';
let frag = 'a=ice-ufrag:' + od.iceUfrag + '\r\n'
+ 'a=ice-pwd:' + od.icePwd + '\r\n';
let mid = 0;
for (const media of offerData.medias) {
for (const media of od.medias) {
if (candidatesByMedia[mid] !== undefined) {
frag += 'm=' + media + '\r\n'
+ 'a=mid:' + mid + '\r\n';
@ -134,267 +174,195 @@ const generateSdpFragment = (offerData, candidates) => { @@ -134,267 +174,195 @@ const generateSdpFragment = (offerData, candidates) => {
}
return frag;
}
};
class WHEPClient {
constructor(video) {
this.video = video;
this.pc = null;
this.restartTimeout = null;
this.sessionUrl = '';
this.queuedCandidates = [];
this.start();
}
const loadStream = () => {
requestICEServers();
};
start() {
console.log("requesting ICE servers");
const onError = (err) => {
if (restartTimeout === null) {
setMessage(err + ', retrying in some seconds');
fetch(new URL('whep', window.location.href) + window.location.search, {
method: 'OPTIONS',
})
.then((res) => this.onIceServers(res))
.catch((err) => {
console.log('error: ' + err);
this.scheduleRestart();
});
if (pc !== null) {
pc.close();
pc = null;
}
onIceServers(res) {
this.pc = new RTCPeerConnection({
iceServers: linkToIceServers(res.headers.get('Link')),
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
});
const direction = "sendrecv";
this.pc.addTransceiver("video", { direction });
this.pc.addTransceiver("audio", { direction });
this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
this.pc.oniceconnectionstatechange = () => this.onConnectionState();
restartTimeout = window.setTimeout(() => {
restartTimeout = null;
loadStream();
}, retryPause);
this.pc.ontrack = (evt) => {
console.log("new track:", evt.track.kind);
this.video.srcObject = evt.streams[0];
};
this.pc.createOffer()
.then((offer) => this.onLocalOffer(offer));
if (sessionUrl) {
fetch(sessionUrl, {
method: 'DELETE',
});
}
sessionUrl = '';
onLocalOffer(offer) {
editOffer(offer);
this.offerData = parseOffer(offer.sdp);
this.pc.setLocalDescription(offer);
console.log("sending offer");
queuedCandidates = [];
}
};
fetch(new URL('whep', window.location.href) + window.location.search, {
method: 'POST',
const sendLocalCandidates = (candidates) => {
fetch(sessionUrl + window.location.search, {
method: 'PATCH',
headers: {
'Content-Type': 'application/sdp',
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
},
body: offer.sdp,
body: generateSdpFragment(offerData, candidates),
})
.then((res) => {
if (res.status !== 201) {
throw new Error('bad status code');
switch (res.status) {
case 204:
break;
case 404:
throw new Error('stream not found');
default:
throw new Error(`bad status code ${res.status}`);
}
this.sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
return res.text();
})
.then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
type: 'answer',
sdp,
})))
.catch((err) => {
console.log('error: ' + err);
this.scheduleRestart();
onError(err.toString());
});
}
};
onConnectionState() {
if (this.restartTimeout !== null) {
const onLocalCandidate = (evt) => {
if (restartTimeout !== null) {
return;
}
console.log("peer connection state:", this.pc.iceConnectionState);
switch (this.pc.iceConnectionState) {
case "disconnected":
this.scheduleRestart();
if (evt.candidate !== null) {
if (sessionUrl === '') {
queuedCandidates.push(evt.candidate);
} else {
sendLocalCandidates([evt.candidate])
}
}
};
onRemoteAnswer(answer) {
if (this.restartTimeout !== null) {
const onRemoteAnswer = (sdp) => {
if (restartTimeout !== null) {
return;
}
this.pc.setRemoteDescription(answer);
if (this.queuedCandidates.length !== 0) {
this.sendLocalCandidates(this.queuedCandidates);
this.queuedCandidates = [];
}
}
onLocalCandidate(evt) {
if (this.restartTimeout !== null) {
return;
}
pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp,
}));
if (evt.candidate !== null) {
if (this.sessionUrl === '') {
this.queuedCandidates.push(evt.candidate);
} else {
this.sendLocalCandidates([evt.candidate])
}
}
if (queuedCandidates.length !== 0) {
sendLocalCandidates(queuedCandidates);
queuedCandidates = [];
}
};
sendLocalCandidates(candidates) {
fetch(this.sessionUrl + window.location.search, {
method: 'PATCH',
const sendOffer = (offer) => {
fetch(new URL('whep', window.location.href) + window.location.search, {
method: 'POST',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': '*',
'Content-Type': 'application/sdp',
},
body: generateSdpFragment(this.offerData, candidates),
body: offer.sdp,
})
.then((res) => {
if (res.status !== 204) {
throw new Error('bad status code');
switch (res.status) {
case 201:
break;
case 404:
throw new Error('stream not found');
default:
throw new Error(`bad status code ${res.status}`);
}
sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
return res.text();
})
.then((sdp) => onRemoteAnswer(sdp))
.catch((err) => {
console.log('error: ' + err);
this.scheduleRestart();
onError(err.toString());
});
}
};
const createOffer = () => {
pc.createOffer()
.then((offer) => {
editOffer(offer);
offerData = parseOffer(offer.sdp);
pc.setLocalDescription(offer);
sendOffer(offer);
});
};
scheduleRestart() {
if (this.restartTimeout !== null) {
const onConnectionState = () => {
if (restartTimeout !== null) {
return;
}
if (this.pc !== null) {
this.pc.close();
this.pc = null;
if (pc.iceConnectionState === 'disconnected') {
onError('peer connection disconnected');
}
};
this.restartTimeout = window.setTimeout(() => {
this.restartTimeout = null;
this.start();
}, restartPause);
const onTrack = (evt) => {
setMessage('');
video.srcObject = evt.streams[0];
};
if (this.sessionUrl) {
fetch(this.sessionUrl, {
method: 'DELETE',
const requestICEServers = () => {
fetch(new URL('whep', window.location.href) + window.location.search, {
method: 'OPTIONS',
})
.then((res) => {
if (res.status !== 200) {
throw new Error('bad status code');
}
})
.catch((err) => {
console.log('delete session error: ' + err);
pc = new RTCPeerConnection({
iceServers: linkToIceServers(res.headers.get('Link')),
// https://webrtc.org/getting-started/unified-plan-transition-guide
sdpSemantics: 'unified-plan',
});
}
this.sessionUrl = '';
this.queuedCandidates = [];
}
}
/**
* Parses the query string from a URL into an object representing the query parameters.
* If no URL is provided, it uses the query string from the current page's URL.
*
* @param {string} [url=window.location.search] - The URL to parse the query string from.
* @returns {Object} An object representing the query parameters with keys as parameter names and values as parameter values.
*/
const parseQueryString = (url) => {
const queryString = (url || window.location.search).split("?")[1];
if (!queryString) return {};
const direction = 'sendrecv';
pc.addTransceiver('video', { direction });
pc.addTransceiver('audio', { direction });
const paramsArray = queryString.split("&");
const result = {};
pc.onicecandidate = (evt) => onLocalCandidate(evt);
pc.oniceconnectionstatechange = () => onConnectionState();
pc.ontrack = (evt) => onTrack(evt);
for (let i = 0; i < paramsArray.length; i++) {
const param = paramsArray[i].split("=");
const key = decodeURIComponent(param[0]);
const value = decodeURIComponent(param[1] || "");
if (key) {
if (result[key]) {
if (Array.isArray(result[key])) {
result[key].push(value);
} else {
result[key] = [result[key], value];
}
} else {
result[key] = value;
}
}
}
return result;
createOffer();
})
.catch((err) => {
onError(err.toString());
});
};
/**
* Parses a string with boolean-like values and returns a boolean.
* @param {string} str The string to parse
* @param {boolean} defaultVal The default value
* @returns {boolean}
*/
const parseBoolString = (str, defaultVal) => {
const trueValues = ["1", "yes", "true"];
const falseValues = ["0", "no", "false"];
str = (str || "").toString();
str = (str || '');
if (trueValues.includes(str.toLowerCase())) {
if (['1', 'yes', 'true'].includes(str.toLowerCase())) {
return true;
} else if (falseValues.includes(str.toLowerCase())) {
}
if (['0', 'no', 'false'].includes(str.toLowerCase())) {
return false;
} else {
return defaultVal;
}
return defaultVal;
};
/**
* Sets video attributes based on query string parameters or default values.
*
* @param {HTMLVideoElement} video - The video element on which to set the attributes.
*/
const setVideoAttributes = (video) => {
let qs = parseQueryString();
video.controls = parseBoolString(qs["controls"], true);
video.muted = parseBoolString(qs["muted"], true);
video.autoplay = parseBoolString(qs["autoplay"], true);
video.playsInline = parseBoolString(qs["playsinline"], true);
const loadAttributesFromQuery = () => {
const params = new URLSearchParams(window.location.search);
video.controls = parseBoolString(params.get('controls'), true);
video.muted = parseBoolString(params.get('muted'), true);
video.autoplay = parseBoolString(params.get('autoplay'), true);
video.playsInline = parseBoolString(params.get('playsinline'), true);
defaultControls = video.controls;
};
/**
*
* @param {(video: HTMLVideoElement) => void} callback
* @param {HTMLElement} container
* @returns
*/
const initVideoElement = (callback, container) => {
return () => {
const video = document.createElement("video");
video.id = "video";
setVideoAttributes(video);
container.append(video);
callback(video);
};
const init = () => {
loadAttributesFromQuery();
loadStream();
};
window.addEventListener('DOMContentLoaded', initVideoElement((video) => new WHEPClient(video), document.body));
window.addEventListener('DOMContentLoaded', init);
</script>

Write Preview
Loading…
Cancel
Save