forked from External/mediamtx
hls, webrtc: in the web page, show connection errors to users (#2957)
This commit is contained in:
Alessandro Ros
GitHub
parent
7d0e702f14
commit
0433af66a3
3 changed files with 976 additions and 1037 deletions
|
|
@ -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) => {
|
|||
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) => {
|
|||
});
|
||||
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
setMessage('');
|
||||
video.play();
|
||||
});
|
||||
|
||||
|
|
@ -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())) {
|
||||
return false;
|
||||
} else {
|
||||
return defaultVal;
|
||||
}
|
||||
if (['0', 'no', 'false'].includes(str.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,234 +8,208 @@ 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;
|
||||
max-width: 500px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#submit_line {
|
||||
margin-top: 20px;
|
||||
select, input[type="text"] {
|
||||
appearance: none;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
border: 1px solid rgb(200, 200, 200);
|
||||
border-radius: 3px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#error-message {
|
||||
#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;
|
||||
}
|
||||
select {
|
||||
width: 200px;
|
||||
#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>
|
||||
<video id="video" muted autoplay playsinline></video>
|
||||
|
||||
<div id="controls">
|
||||
<div id="initializing" style="display: block;">
|
||||
initializing
|
||||
</div>
|
||||
|
||||
<div id="device" style="display: none">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
const INITIALIZING = 0;
|
||||
const DEVICE = 1;
|
||||
const TRANSMITTING = 2;
|
||||
const ERROR = 3;
|
||||
<div id="message"></div>
|
||||
|
||||
let state = INITIALIZING;
|
||||
let errorMessage = '';
|
||||
<script>
|
||||
|
||||
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")
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (input instanceof HTMLInputElement && input.type === "checkbox") {
|
||||
input.checked = value === "true";
|
||||
}
|
||||
|
||||
if (input instanceof HTMLSelectElement) {
|
||||
input.value = value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const registerInputsToUrl = () => {
|
||||
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 render = () => {
|
||||
for (const el of ['initializing', 'device', 'submit_line', 'transmitting', 'error']) {
|
||||
document.getElementById(el).style.display = 'none';
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
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 restartPause = 2000;
|
||||
const audioForm = {
|
||||
device: document.getElementById('audio-device'),
|
||||
codec: document.getElementById('audio-codec'),
|
||||
bitrate: document.getElementById('audio-bitrate'),
|
||||
voice: document.getElementById('audio-voice'),
|
||||
};
|
||||
|
||||
let pc = null;
|
||||
let stream = null;
|
||||
let restartTimeout = null;
|
||||
let sessionUrl = '';
|
||||
let offerData = '';
|
||||
let queuedCandidates = [];
|
||||
|
||||
const setMessage = (str) => {
|
||||
message.innerText = str;
|
||||
};
|
||||
|
||||
const onError = (err, retry) => {
|
||||
if (!retry) {
|
||||
setMessage(err);
|
||||
} else {
|
||||
if (restartTimeout === null) {
|
||||
setMessage(err + ', retrying in some seconds');
|
||||
|
||||
if (pc !== null) {
|
||||
pc.close();
|
||||
pc = null;
|
||||
}
|
||||
|
||||
restartTimeout = window.setTimeout(() => {
|
||||
restartTimeout = null;
|
||||
startTransmit();
|
||||
}, retryPause);
|
||||
|
||||
if (sessionUrl) {
|
||||
fetch(sessionUrl, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
sessionUrl = '';
|
||||
|
||||
queuedCandidates = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const unquoteCredential = (v) => (
|
||||
JSON.parse(`"${v}"`)
|
||||
|
|
@ -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) => {
|
|||
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) => {
|
|||
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) => {
|
|||
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,57 +372,69 @@ 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',
|
||||
const sendLocalCandidates = (candidates) => {
|
||||
fetch(sessionUrl + window.location.search, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/trickle-ice-sdpfrag',
|
||||
'If-Match': '*',
|
||||
},
|
||||
body: generateSdpFragment(offerData, candidates),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status !== 204) {
|
||||
throw new Error('bad status code');
|
||||
}
|
||||
})
|
||||
.then((res) => this.onIceServers(res))
|
||||
.catch((err) => {
|
||||
console.log('error: ' + err);
|
||||
this.scheduleRestart();
|
||||
onError(err.toString(), true);
|
||||
});
|
||||
};
|
||||
|
||||
const onLocalCandidate = (evt) => {
|
||||
if (restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
onIceServers(res) {
|
||||
this.pc = new RTCPeerConnection({
|
||||
iceServers: linkToIceServers(res.headers.get('Link')),
|
||||
// https://webrtc.org/getting-started/unified-plan-transition-guide
|
||||
sdpSemantics: 'unified-plan',
|
||||
});
|
||||
if (evt.candidate !== null) {
|
||||
if (sessionUrl === '') {
|
||||
queuedCandidates.push(evt.candidate);
|
||||
} else {
|
||||
sendLocalCandidates([evt.candidate])
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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));
|
||||
const onRemoteAnswer = (sdp) => {
|
||||
if (restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
onLocalOffer(offer) {
|
||||
this.offerData = parseOffer(offer.sdp);
|
||||
this.pc.setLocalDescription(offer);
|
||||
sdp = editAnswer(
|
||||
sdp,
|
||||
videoForm.codec.value,
|
||||
audioForm.codec.value,
|
||||
videoForm.bitrate.value,
|
||||
audioForm.bitrate.value,
|
||||
audioForm.voice.checked,
|
||||
);
|
||||
|
||||
console.log("sending offer");
|
||||
pc.setRemoteDescription(new RTCSessionDescription({
|
||||
type: 'answer',
|
||||
sdp,
|
||||
}));
|
||||
|
||||
fetch(new URL('whip', url) + url.search, {
|
||||
if (queuedCandidates.length !== 0) {
|
||||
sendLocalCandidates(queuedCandidates);
|
||||
queuedCandidates = [];
|
||||
}
|
||||
};
|
||||
|
||||
const sendOffer = (offer) => {
|
||||
fetch(new URL('whip', window.location.href) + window.location.search, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/sdp',
|
||||
|
|
@ -459,162 +445,108 @@ class Transmitter {
|
|||
if (res.status !== 201) {
|
||||
throw new Error('bad status code');
|
||||
}
|
||||
this.sessionUrl = new URL(res.headers.get('location'), url.href).toString();
|
||||
sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
|
||||
return res.text();
|
||||
})
|
||||
.then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
|
||||
type: 'answer',
|
||||
sdp,
|
||||
})))
|
||||
.then((sdp) => onRemoteAnswer(sdp))
|
||||
.catch((err) => {
|
||||
console.log('error: ' + err);
|
||||
this.scheduleRestart();
|
||||
onError(err.toString(), true);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onConnectionState() {
|
||||
if (this.restartTimeout !== null) {
|
||||
const createOffer = () => {
|
||||
pc.createOffer()
|
||||
.then((offer) => {
|
||||
offerData = parseOffer(offer.sdp);
|
||||
pc.setLocalDescription(offer);
|
||||
sendOffer(offer);
|
||||
});
|
||||
};
|
||||
|
||||
const onConnectionState = () => {
|
||||
if (restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("peer connection state:", this.pc.iceConnectionState);
|
||||
if (pc.iceConnectionState === 'disconnected') {
|
||||
onError('peer connection disconnected', true);
|
||||
} else if (pc.iceConnectionState === 'connected') {
|
||||
setMessage('');
|
||||
}
|
||||
};
|
||||
|
||||
switch (this.pc.iceConnectionState) {
|
||||
case "disconnected":
|
||||
this.scheduleRestart();
|
||||
}
|
||||
}
|
||||
|
||||
onRemoteAnswer(answer) {
|
||||
if (this.restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
editAnswer(
|
||||
answer,
|
||||
videoForm.codec.value,
|
||||
audioForm.codec.value,
|
||||
videoForm.bitrate.value,
|
||||
audioForm.bitrate.value,
|
||||
audioForm.voice.checked,
|
||||
);
|
||||
|
||||
this.pc.setRemoteDescription(answer);
|
||||
|
||||
if (this.queuedCandidates.length !== 0) {
|
||||
this.sendLocalCandidates(this.queuedCandidates);
|
||||
this.queuedCandidates = [];
|
||||
}
|
||||
}
|
||||
|
||||
onLocalCandidate(evt) {
|
||||
if (this.restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (evt.candidate !== null) {
|
||||
if (this.sessionUrl === '') {
|
||||
this.queuedCandidates.push(evt.candidate);
|
||||
} else {
|
||||
this.sendLocalCandidates([evt.candidate])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sendLocalCandidates(candidates) {
|
||||
fetch(this.sessionUrl + window.location.search, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/trickle-ice-sdpfrag',
|
||||
'If-Match': '*',
|
||||
},
|
||||
body: generateSdpFragment(this.offerData, candidates),
|
||||
const requestICEServers = () => {
|
||||
fetch(new URL('whip', window.location.href) + window.location.search, {
|
||||
method: 'OPTIONS',
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status !== 204) {
|
||||
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('error: ' + err);
|
||||
this.scheduleRestart();
|
||||
onError(err.toString(), true);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
scheduleRestart() {
|
||||
if (this.restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.pc !== null) {
|
||||
this.pc.close();
|
||||
this.pc = null;
|
||||
}
|
||||
|
||||
this.restartTimeout = window.setTimeout(() => {
|
||||
this.restartTimeout = null;
|
||||
this.start();
|
||||
}, restartPause);
|
||||
|
||||
if (this.sessionUrl) {
|
||||
fetch(this.sessionUrl, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status !== 200) {
|
||||
throw new Error('bad status code');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('delete session error: ' + err);
|
||||
});
|
||||
}
|
||||
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 = () => {
|
|||
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 = () => {
|
|||
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -675,14 +609,14 @@ const populateDevices = () => {
|
|||
audioForm.device.value = audioForm.device.children[1].value;
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
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 = () => {
|
|||
}
|
||||
}
|
||||
|
||||
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)]
|
||||
|
||||
initialize();
|
||||
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();
|
||||
};
|
||||
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => (
|
|||
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) => {
|
|||
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) => {
|
|||
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,62 +174,92 @@ 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();
|
||||
};
|
||||
|
||||
const onError = (err) => {
|
||||
if (restartTimeout === null) {
|
||||
setMessage(err + ', retrying in some seconds');
|
||||
|
||||
if (pc !== null) {
|
||||
pc.close();
|
||||
pc = null;
|
||||
}
|
||||
|
||||
start() {
|
||||
console.log("requesting ICE servers");
|
||||
restartTimeout = window.setTimeout(() => {
|
||||
restartTimeout = null;
|
||||
loadStream();
|
||||
}, retryPause);
|
||||
|
||||
fetch(new URL('whep', window.location.href) + window.location.search, {
|
||||
method: 'OPTIONS',
|
||||
if (sessionUrl) {
|
||||
fetch(sessionUrl, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
sessionUrl = '';
|
||||
|
||||
queuedCandidates = [];
|
||||
}
|
||||
};
|
||||
|
||||
const sendLocalCandidates = (candidates) => {
|
||||
fetch(sessionUrl + window.location.search, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/trickle-ice-sdpfrag',
|
||||
'If-Match': '*',
|
||||
},
|
||||
body: generateSdpFragment(offerData, candidates),
|
||||
})
|
||||
.then((res) => {
|
||||
switch (res.status) {
|
||||
case 204:
|
||||
break;
|
||||
case 404:
|
||||
throw new Error('stream not found');
|
||||
default:
|
||||
throw new Error(`bad status code ${res.status}`);
|
||||
}
|
||||
})
|
||||
.then((res) => this.onIceServers(res))
|
||||
.catch((err) => {
|
||||
console.log('error: ' + err);
|
||||
this.scheduleRestart();
|
||||
onError(err.toString());
|
||||
});
|
||||
};
|
||||
|
||||
const onLocalCandidate = (evt) => {
|
||||
if (restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
onIceServers(res) {
|
||||
this.pc = new RTCPeerConnection({
|
||||
iceServers: linkToIceServers(res.headers.get('Link')),
|
||||
// https://webrtc.org/getting-started/unified-plan-transition-guide
|
||||
sdpSemantics: 'unified-plan',
|
||||
});
|
||||
if (evt.candidate !== null) {
|
||||
if (sessionUrl === '') {
|
||||
queuedCandidates.push(evt.candidate);
|
||||
} else {
|
||||
sendLocalCandidates([evt.candidate])
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
|
||||
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));
|
||||
const onRemoteAnswer = (sdp) => {
|
||||
if (restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
onLocalOffer(offer) {
|
||||
editOffer(offer);
|
||||
pc.setRemoteDescription(new RTCSessionDescription({
|
||||
type: 'answer',
|
||||
sdp,
|
||||
}));
|
||||
|
||||
this.offerData = parseOffer(offer.sdp);
|
||||
this.pc.setLocalDescription(offer);
|
||||
|
||||
console.log("sending offer");
|
||||
if (queuedCandidates.length !== 0) {
|
||||
sendLocalCandidates(queuedCandidates);
|
||||
queuedCandidates = [];
|
||||
}
|
||||
};
|
||||
|
||||
const sendOffer = (offer) => {
|
||||
fetch(new URL('whep', window.location.href) + window.location.search, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
|
|
@ -198,203 +268,101 @@ class WHEPClient {
|
|||
body: offer.sdp,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status !== 201) {
|
||||
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}`);
|
||||
}
|
||||
this.sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
|
||||
sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
|
||||
return res.text();
|
||||
})
|
||||
.then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
|
||||
type: 'answer',
|
||||
sdp,
|
||||
})))
|
||||
.then((sdp) => onRemoteAnswer(sdp))
|
||||
.catch((err) => {
|
||||
console.log('error: ' + err);
|
||||
this.scheduleRestart();
|
||||
onError(err.toString());
|
||||
});
|
||||
}
|
||||
|
||||
onConnectionState() {
|
||||
if (this.restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("peer connection state:", this.pc.iceConnectionState);
|
||||
|
||||
switch (this.pc.iceConnectionState) {
|
||||
case "disconnected":
|
||||
this.scheduleRestart();
|
||||
}
|
||||
}
|
||||
|
||||
onRemoteAnswer(answer) {
|
||||
if (this.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;
|
||||
}
|
||||
|
||||
if (evt.candidate !== null) {
|
||||
if (this.sessionUrl === '') {
|
||||
this.queuedCandidates.push(evt.candidate);
|
||||
} else {
|
||||
this.sendLocalCandidates([evt.candidate])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sendLocalCandidates(candidates) {
|
||||
fetch(this.sessionUrl + window.location.search, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/trickle-ice-sdpfrag',
|
||||
'If-Match': '*',
|
||||
},
|
||||
body: generateSdpFragment(this.offerData, candidates),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status !== 204) {
|
||||
throw new Error('bad status code');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('error: ' + err);
|
||||
this.scheduleRestart();
|
||||
});
|
||||
}
|
||||
|
||||
scheduleRestart() {
|
||||
if (this.restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.pc !== null) {
|
||||
this.pc.close();
|
||||
this.pc = null;
|
||||
}
|
||||
|
||||
this.restartTimeout = window.setTimeout(() => {
|
||||
this.restartTimeout = null;
|
||||
this.start();
|
||||
}, restartPause);
|
||||
|
||||
if (this.sessionUrl) {
|
||||
fetch(this.sessionUrl, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status !== 200) {
|
||||
throw new Error('bad status code');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('delete session error: ' + err);
|
||||
});
|
||||
}
|
||||
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 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();
|
||||
const createOffer = () => {
|
||||
pc.createOffer()
|
||||
.then((offer) => {
|
||||
editOffer(offer);
|
||||
offerData = parseOffer(offer.sdp);
|
||||
pc.setLocalDescription(offer);
|
||||
sendOffer(offer);
|
||||
});
|
||||
};
|
||||
|
||||
if (trueValues.includes(str.toLowerCase())) {
|
||||
const onConnectionState = () => {
|
||||
if (restartTimeout !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (pc.iceConnectionState === 'disconnected') {
|
||||
onError('peer connection disconnected');
|
||||
}
|
||||
};
|
||||
|
||||
const onTrack = (evt) => {
|
||||
setMessage('');
|
||||
video.srcObject = evt.streams[0];
|
||||
};
|
||||
|
||||
const requestICEServers = () => {
|
||||
fetch(new URL('whep', window.location.href) + window.location.search, {
|
||||
method: 'OPTIONS',
|
||||
})
|
||||
.then((res) => {
|
||||
pc = new RTCPeerConnection({
|
||||
iceServers: linkToIceServers(res.headers.get('Link')),
|
||||
// https://webrtc.org/getting-started/unified-plan-transition-guide
|
||||
sdpSemantics: 'unified-plan',
|
||||
});
|
||||
|
||||
const direction = 'sendrecv';
|
||||
pc.addTransceiver('video', { direction });
|
||||
pc.addTransceiver('audio', { direction });
|
||||
|
||||
pc.onicecandidate = (evt) => onLocalCandidate(evt);
|
||||
pc.oniceconnectionstatechange = () => onConnectionState();
|
||||
pc.ontrack = (evt) => onTrack(evt);
|
||||
|
||||
createOffer();
|
||||
})
|
||||
.catch((err) => {
|
||||
onError(err.toString());
|
||||
});
|
||||
};
|
||||
|
||||
const parseBoolString = (str, defaultVal) => {
|
||||
str = (str || '');
|
||||
|
||||
if (['1', 'yes', 'true'].includes(str.toLowerCase())) {
|
||||
return true;
|
||||
} else if (falseValues.includes(str.toLowerCase())) {
|
||||
return false;
|
||||
} else {
|
||||
return defaultVal;
|
||||
}
|
||||
if (['0', 'no', 'false'].includes(str.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue