2023-05-14 12:18:03 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
2023-10-24 14:30:44 +00:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
height: 100%;
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
#video {
|
2023-10-24 14:30:44 +00:00
|
|
|
height: 100%;
|
|
|
|
|
background: black;
|
2023-05-14 12:18:03 +00:00
|
|
|
flex-grow: 1;
|
|
|
|
|
min-height: 0;
|
|
|
|
|
}
|
|
|
|
|
#controls {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2023-10-06 21:31:36 +00:00
|
|
|
min-height: 200px;
|
|
|
|
|
padding: 10px;
|
2023-11-02 11:24:28 +00:00
|
|
|
flex-direction: column;
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
2023-11-02 11:24:28 +00:00
|
|
|
|
2023-05-14 12:18:03 +00:00
|
|
|
#device {
|
2023-11-02 11:24:28 +00:00
|
|
|
display: grid;
|
|
|
|
|
grid-template-rows: repeat(6, 1fr);
|
|
|
|
|
grid-auto-flow: column;
|
|
|
|
|
gap: 10px 20px
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-auto-flow: column;
|
|
|
|
|
grid-template-columns: auto 200px;
|
2023-05-14 12:18:03 +00:00
|
|
|
gap: 20px;
|
2023-10-06 21:31:36 +00:00
|
|
|
}
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
#submit_line {
|
|
|
|
|
margin-top: 20px;
|
2023-10-06 21:31:36 +00:00
|
|
|
}
|
2023-11-02 11:24:28 +00:00
|
|
|
|
2023-10-06 21:31:36 +00:00
|
|
|
#error-message {
|
|
|
|
|
text-align: center;
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
select {
|
|
|
|
|
width: 200px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<video id="video" muted controls autoplay playsinline></video>
|
|
|
|
|
<div id="controls">
|
|
|
|
|
<div id="initializing" style="display: block;">
|
|
|
|
|
initializing
|
|
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
<div id="device" style="display: none">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<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">
|
|
|
|
|
</select>
|
2023-05-14 12:18:03 +00:00
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
|
<label for="video_bitrate">video bitrate (kbps)</label>
|
|
|
|
|
<input id="video_bitrate" type="text" value="10000" />
|
2023-05-14 12:18:03 +00:00
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
|
<label for="video_framerate">video framerate</label>
|
|
|
|
|
<input id="video_framerate" type="text" value="30" />
|
2023-05-14 12:18:03 +00:00
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
|
<label for="video_width">video width</label>
|
|
|
|
|
<input id="video_width" type="text" value="1920" />
|
2023-05-14 12:18:03 +00:00
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
|
<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">
|
|
|
|
|
<option value="none">none</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
|
<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" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
|
<label for="audio_voice">optimize for voice</label>
|
|
|
|
|
<input id="audio_voice" type="checkbox" checked>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="item"></div>
|
2023-05-14 12:18:03 +00:00
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
|
|
|
|
<div id="submit_line" style="display: none">
|
|
|
|
|
<button id="publish_confirm">publish</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-05-14 12:18:03 +00:00
|
|
|
<div id="transmitting" style="display: none;">
|
|
|
|
|
publishing
|
|
|
|
|
</div>
|
2023-11-02 11:24:28 +00:00
|
|
|
|
2023-07-19 11:20:05 +00:00
|
|
|
<div id="error" style="display: none;">
|
|
|
|
|
<span id="error-message"></span>
|
|
|
|
|
</div>
|
2023-05-14 12:18:03 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const INITIALIZING = 0;
|
|
|
|
|
const DEVICE = 1;
|
|
|
|
|
const TRANSMITTING = 2;
|
2023-07-19 11:20:05 +00:00
|
|
|
const ERROR = 3;
|
2023-05-14 12:18:03 +00:00
|
|
|
|
|
|
|
|
let state = INITIALIZING;
|
2023-07-19 11:20:05 +00:00
|
|
|
let errorMessage = '';
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
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);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-19 11:20:05 +00:00
|
|
|
const render = () => {
|
2023-11-02 11:24:28 +00:00
|
|
|
for (const el of ['initializing', 'device', 'submit_line', 'transmitting', 'error']) {
|
2023-07-19 11:20:05 +00:00
|
|
|
document.getElementById(el).style.display = 'none';
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
|
|
|
|
switch (state) {
|
|
|
|
|
case DEVICE:
|
2023-11-02 11:24:28 +00:00
|
|
|
document.getElementById('device').style.display = 'grid';
|
|
|
|
|
document.getElementById('submit_line').style.display = 'block';
|
|
|
|
|
initializeInputsFromUrl();
|
|
|
|
|
registerInputsToUrl();
|
2023-05-14 12:18:03 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case TRANSMITTING:
|
2023-07-19 11:20:05 +00:00
|
|
|
document.getElementById('transmitting').style.display = 'flex';
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case ERROR:
|
|
|
|
|
document.getElementById('error').style.display = 'flex';
|
|
|
|
|
document.getElementById('error-message').innerHTML = 'error: ' + errorMessage;
|
2023-05-14 12:18:03 +00:00
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const restartPause = 2000;
|
|
|
|
|
|
2023-06-30 14:47:10 +00:00
|
|
|
const unquoteCredential = (v) => (
|
|
|
|
|
JSON.parse(`"${v}"`)
|
|
|
|
|
);
|
|
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
const linkToIceServers = (links) => (
|
2023-05-18 12:58:19 +00:00
|
|
|
(links !== null) ? links.split(', ').map((link) => {
|
2023-05-16 13:59:37 +00:00
|
|
|
const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
|
|
|
|
|
const ret = {
|
|
|
|
|
urls: [m[1]],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (m[3] !== undefined) {
|
2023-06-30 14:47:10 +00:00
|
|
|
ret.username = unquoteCredential(m[3]);
|
|
|
|
|
ret.credential = unquoteCredential(m[4]);
|
2023-05-16 13:59:37 +00:00
|
|
|
ret.credentialType = "password";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return ret;
|
2023-05-18 12:58:19 +00:00
|
|
|
}) : []
|
2023-05-16 13:59:37 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const parseOffer = (offer) => {
|
|
|
|
|
const ret = {
|
|
|
|
|
iceUfrag: '',
|
|
|
|
|
icePwd: '',
|
|
|
|
|
medias: [],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
for (const line of offer.split('\r\n')) {
|
|
|
|
|
if (line.startsWith('m=')) {
|
|
|
|
|
ret.medias.push(line.slice('m='.length));
|
|
|
|
|
} else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {
|
|
|
|
|
ret.iceUfrag = line.slice('a=ice-ufrag:'.length);
|
|
|
|
|
} else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {
|
|
|
|
|
ret.icePwd = line.slice('a=ice-pwd:'.length);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return ret;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const generateSdpFragment = (offerData, candidates) => {
|
|
|
|
|
const candidatesByMedia = {};
|
|
|
|
|
for (const candidate of candidates) {
|
|
|
|
|
const mid = candidate.sdpMLineIndex;
|
|
|
|
|
if (candidatesByMedia[mid] === undefined) {
|
|
|
|
|
candidatesByMedia[mid] = [];
|
|
|
|
|
}
|
|
|
|
|
candidatesByMedia[mid].push(candidate);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'
|
|
|
|
|
+ 'a=ice-pwd:' + offerData.icePwd + '\r\n';
|
|
|
|
|
|
|
|
|
|
let mid = 0;
|
|
|
|
|
|
|
|
|
|
for (const media of offerData.medias) {
|
|
|
|
|
if (candidatesByMedia[mid] !== undefined) {
|
|
|
|
|
frag += 'm=' + media + '\r\n'
|
|
|
|
|
+ 'a=mid:' + mid + '\r\n';
|
|
|
|
|
|
|
|
|
|
for (const candidate of candidatesByMedia[mid]) {
|
|
|
|
|
frag += 'a=' + candidate.candidate + '\r\n';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
mid++;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return frag;
|
2023-06-27 20:37:06 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const setCodec = (section, codec) => {
|
|
|
|
|
const lines = section.split('\r\n');
|
|
|
|
|
const lines2 = [];
|
|
|
|
|
const payloadFormats = [];
|
|
|
|
|
|
|
|
|
|
for (const line of lines) {
|
|
|
|
|
if (!line.startsWith('a=rtpmap:')) {
|
|
|
|
|
lines2.push(line);
|
|
|
|
|
} else {
|
|
|
|
|
if (line.toLowerCase().includes(codec)) {
|
|
|
|
|
payloadFormats.push(line.slice('a=rtpmap:'.length).split(' ')[0]);
|
|
|
|
|
lines2.push(line);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const lines3 = [];
|
|
|
|
|
|
|
|
|
|
for (const line of lines2) {
|
|
|
|
|
if (line.startsWith('a=fmtp:')) {
|
|
|
|
|
if (payloadFormats.includes(line.slice('a=fmtp:'.length).split(' ')[0])) {
|
|
|
|
|
lines3.push(line);
|
|
|
|
|
}
|
|
|
|
|
} else if (line.startsWith('a=rtcp-fb:')) {
|
|
|
|
|
if (payloadFormats.includes(line.slice('a=rtcp-fb:'.length).split(' ')[0])) {
|
|
|
|
|
lines3.push(line);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
lines3.push(line);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return lines3.join('\r\n');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const setVideoBitrate = (section, bitrate) => {
|
|
|
|
|
let lines = section.split('\r\n');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
|
|
|
if (lines[i].startsWith('c=')) {
|
|
|
|
|
lines = [...lines.slice(0, i+1), 'b=TIAS:' + (parseInt(bitrate) * 1024).toString(), ...lines.slice(i+1)];
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return lines.join('\r\n');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const setAudioBitrate = (section, bitrate, voice) => {
|
|
|
|
|
let opusPayloadFormat = '';
|
|
|
|
|
let lines = section.split('\r\n');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
|
|
|
if (lines[i].startsWith('a=rtpmap:') && lines[i].toLowerCase().includes('opus/')) {
|
|
|
|
|
opusPayloadFormat = lines[i].slice('a=rtpmap:'.length).split(' ')[0];
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (opusPayloadFormat === '') {
|
|
|
|
|
return section;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
|
|
|
if (lines[i].startsWith('a=fmtp:' + opusPayloadFormat + ' ')) {
|
|
|
|
|
if (voice) {
|
|
|
|
|
lines[i] = 'a=fmtp:' + opusPayloadFormat + ' minptime=10;useinbandfec=1;maxaveragebitrate='
|
|
|
|
|
+ (parseInt(bitrate) * 1024).toString();
|
|
|
|
|
} else {
|
|
|
|
|
lines[i] = 'a=fmtp:' + opusPayloadFormat + ' maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate'
|
|
|
|
|
+ (parseInt(bitrate) * 1024).toString();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return lines.join('\r\n');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const editAnswer = (answer, videoCodec, audioCodec, videoBitrate, audioBitrate, audioVoice) => {
|
2023-10-06 20:09:08 +00:00
|
|
|
const sections = answer.sdp.split('m=');
|
2023-06-27 20:37:06 +00:00
|
|
|
|
|
|
|
|
for (let i = 0; i < sections.length; i++) {
|
|
|
|
|
const section = sections[i];
|
|
|
|
|
if (section.startsWith('video')) {
|
|
|
|
|
sections[i] = setVideoBitrate(setCodec(section, videoCodec), videoBitrate);
|
|
|
|
|
} else if (section.startsWith('audio')) {
|
|
|
|
|
sections[i] = setAudioBitrate(setCodec(section, audioCodec), audioBitrate, audioVoice);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-06 20:09:08 +00:00
|
|
|
answer.sdp = sections.join('m=');
|
2023-06-27 20:37:06 +00:00
|
|
|
};
|
2023-05-16 13:59:37 +00:00
|
|
|
|
2023-05-14 12:18:03 +00:00
|
|
|
class Transmitter {
|
|
|
|
|
constructor(stream) {
|
|
|
|
|
this.stream = stream;
|
2023-10-24 14:30:44 +00:00
|
|
|
this.pc = null;
|
|
|
|
|
this.restartTimeout = null;
|
|
|
|
|
this.sessionUrl = '';
|
2023-05-16 13:59:37 +00:00
|
|
|
this.queuedCandidates = [];
|
2023-10-24 14:30:44 +00:00
|
|
|
this.start();
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
start() {
|
|
|
|
|
console.log("requesting ICE servers");
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
fetch(new URL('whip', url) + url.search, {
|
2023-05-16 13:59:37 +00:00
|
|
|
method: 'OPTIONS',
|
|
|
|
|
})
|
|
|
|
|
.then((res) => this.onIceServers(res))
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log('error: ' + err);
|
|
|
|
|
this.scheduleRestart();
|
|
|
|
|
});
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
onIceServers(res) {
|
|
|
|
|
this.pc = new RTCPeerConnection({
|
|
|
|
|
iceServers: linkToIceServers(res.headers.get('Link')),
|
|
|
|
|
});
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
|
|
|
|
|
this.pc.oniceconnectionstatechange = () => this.onConnectionState();
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
this.stream.getTracks().forEach((track) => {
|
|
|
|
|
this.pc.addTrack(track, this.stream);
|
|
|
|
|
});
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
this.pc.createOffer()
|
2023-06-27 20:37:06 +00:00
|
|
|
.then((offer) => this.onLocalOffer(offer));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onLocalOffer(offer) {
|
|
|
|
|
this.offerData = parseOffer(offer.sdp);
|
|
|
|
|
this.pc.setLocalDescription(offer);
|
|
|
|
|
|
|
|
|
|
console.log("sending offer");
|
|
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
fetch(new URL('whip', url) + url.search, {
|
2023-06-27 20:37:06 +00:00
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/sdp',
|
|
|
|
|
},
|
|
|
|
|
body: offer.sdp,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.status !== 201) {
|
|
|
|
|
throw new Error('bad status code');
|
|
|
|
|
}
|
2023-11-02 11:24:28 +00:00
|
|
|
this.sessionUrl = new URL(res.headers.get('location'), url.href).toString();
|
2023-06-27 20:37:06 +00:00
|
|
|
return res.text();
|
|
|
|
|
})
|
|
|
|
|
.then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
|
|
|
|
|
type: 'answer',
|
|
|
|
|
sdp,
|
|
|
|
|
})))
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log('error: ' + err);
|
|
|
|
|
this.scheduleRestart();
|
2023-05-16 13:59:37 +00:00
|
|
|
});
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
onConnectionState() {
|
|
|
|
|
if (this.restartTimeout !== null) {
|
2023-05-14 12:18:03 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
console.log("peer connection state:", this.pc.iceConnectionState);
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
switch (this.pc.iceConnectionState) {
|
|
|
|
|
case "disconnected":
|
|
|
|
|
this.scheduleRestart();
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
2023-05-16 13:59:37 +00:00
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-06-27 20:37:06 +00:00
|
|
|
onRemoteAnswer(answer) {
|
2023-10-24 14:30:44 +00:00
|
|
|
if (this.restartTimeout !== null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-10-06 20:09:08 +00:00
|
|
|
editAnswer(
|
|
|
|
|
answer,
|
2023-11-02 11:24:28 +00:00
|
|
|
videoForm.codec.value,
|
|
|
|
|
audioForm.codec.value,
|
|
|
|
|
videoForm.bitrate.value,
|
|
|
|
|
audioForm.bitrate.value,
|
|
|
|
|
audioForm.voice.checked,
|
2023-10-06 20:09:08 +00:00
|
|
|
);
|
2023-06-27 20:37:06 +00:00
|
|
|
|
2023-10-06 20:09:08 +00:00
|
|
|
this.pc.setRemoteDescription(answer);
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
if (this.queuedCandidates.length !== 0) {
|
|
|
|
|
this.sendLocalCandidates(this.queuedCandidates);
|
|
|
|
|
this.queuedCandidates = [];
|
|
|
|
|
}
|
2023-10-24 14:30:44 +00:00
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
onLocalCandidate(evt) {
|
|
|
|
|
if (this.restartTimeout !== null) {
|
2023-05-14 12:18:03 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
if (evt.candidate !== null) {
|
2023-10-24 14:30:44 +00:00
|
|
|
if (this.sessionUrl === '') {
|
2023-05-16 13:59:37 +00:00
|
|
|
this.queuedCandidates.push(evt.candidate);
|
|
|
|
|
} else {
|
|
|
|
|
this.sendLocalCandidates([evt.candidate])
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
2023-05-16 13:59:37 +00:00
|
|
|
}
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
sendLocalCandidates(candidates) {
|
2023-10-24 14:30:44 +00:00
|
|
|
fetch(this.sessionUrl + window.location.search, {
|
2023-05-16 13:59:37 +00:00
|
|
|
method: 'PATCH',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/trickle-ice-sdpfrag',
|
2023-10-24 14:30:44 +00:00
|
|
|
'If-Match': '*',
|
2023-05-16 13:59:37 +00:00
|
|
|
},
|
|
|
|
|
body: generateSdpFragment(this.offerData, candidates),
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.status !== 204) {
|
|
|
|
|
throw new Error('bad status code');
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
2023-05-16 13:59:37 +00:00
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log('error: ' + err);
|
2023-05-14 12:18:03 +00:00
|
|
|
this.scheduleRestart();
|
2023-05-16 13:59:37 +00:00
|
|
|
});
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
scheduleRestart() {
|
|
|
|
|
if (this.restartTimeout !== null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
if (this.pc !== null) {
|
|
|
|
|
this.pc.close();
|
|
|
|
|
this.pc = null;
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
this.restartTimeout = window.setTimeout(() => {
|
|
|
|
|
this.restartTimeout = null;
|
|
|
|
|
this.start();
|
|
|
|
|
}, restartPause);
|
|
|
|
|
|
2023-10-24 14:30:44 +00:00
|
|
|
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 = '';
|
|
|
|
|
|
2023-05-16 13:59:37 +00:00
|
|
|
this.queuedCandidates = [];
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onTransmit = (stream) => {
|
|
|
|
|
document.getElementById('video').srcObject = stream;
|
|
|
|
|
new Transmitter(stream);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onPublish = () => {
|
2023-10-06 21:31:36 +00:00
|
|
|
state = TRANSMITTING;
|
|
|
|
|
render();
|
|
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
const videoId = videoForm.device.value;
|
|
|
|
|
const audioId = audioForm.device.value;
|
2023-05-14 12:18:03 +00:00
|
|
|
|
|
|
|
|
if (videoId !== 'screen') {
|
|
|
|
|
let video = false;
|
|
|
|
|
if (videoId !== 'none') {
|
|
|
|
|
video = {
|
|
|
|
|
deviceId: videoId,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let audio = false;
|
|
|
|
|
|
|
|
|
|
if (audioId !== 'none') {
|
|
|
|
|
audio = {
|
|
|
|
|
deviceId: audioId,
|
|
|
|
|
};
|
2023-06-27 20:36:29 +00:00
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
const voice = audioForm.voice.checked;
|
2023-06-27 20:36:29 +00:00
|
|
|
if (!voice) {
|
|
|
|
|
audio.autoGainControl = false;
|
|
|
|
|
audio.echoCancellation = false;
|
|
|
|
|
audio.noiseSuppression = false;
|
|
|
|
|
}
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navigator.mediaDevices.getUserMedia({ video, audio })
|
2023-10-06 21:31:36 +00:00
|
|
|
.then(onTransmit)
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
state = ERROR;
|
|
|
|
|
errorMessage = err.toString();
|
|
|
|
|
render();
|
|
|
|
|
});
|
2023-05-14 12:18:03 +00:00
|
|
|
} else {
|
|
|
|
|
navigator.mediaDevices.getDisplayMedia({
|
|
|
|
|
video: {
|
2023-11-02 11:24:28 +00:00
|
|
|
width: { ideal: videoForm.width.value },
|
|
|
|
|
height: { ideal: videoForm.height.value },
|
|
|
|
|
frameRate: { ideal: videoForm.framerate.value },
|
2023-05-14 12:18:03 +00:00
|
|
|
cursor: "always",
|
|
|
|
|
},
|
2023-11-02 11:24:28 +00:00
|
|
|
audio: true,
|
2023-05-14 12:18:03 +00:00
|
|
|
})
|
2023-10-06 21:31:36 +00:00
|
|
|
.then(onTransmit)
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
state = ERROR;
|
|
|
|
|
errorMessage = err.toString();
|
|
|
|
|
render();
|
|
|
|
|
});
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const populateDevices = () => {
|
|
|
|
|
return navigator.mediaDevices.enumerateDevices()
|
|
|
|
|
.then((devices) => {
|
|
|
|
|
for (const device of devices) {
|
|
|
|
|
switch (device.kind) {
|
|
|
|
|
case 'videoinput':
|
|
|
|
|
{
|
|
|
|
|
const opt = document.createElement('option');
|
|
|
|
|
opt.value = device.deviceId;
|
|
|
|
|
opt.text = device.label;
|
2023-11-02 11:24:28 +00:00
|
|
|
videoForm.device.appendChild(opt);
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'audioinput':
|
|
|
|
|
{
|
|
|
|
|
const opt = document.createElement('option');
|
|
|
|
|
opt.value = device.deviceId;
|
|
|
|
|
opt.text = device.label;
|
2023-11-02 11:24:28 +00:00
|
|
|
audioForm.device.appendChild(opt);
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-06 21:00:15 +00:00
|
|
|
if (navigator.mediaDevices.getDisplayMedia !== undefined) {
|
|
|
|
|
const opt = document.createElement('option');
|
|
|
|
|
opt.value = "screen";
|
|
|
|
|
opt.text = "screen";
|
2023-11-02 11:24:28 +00:00
|
|
|
videoForm.device.appendChild(opt);
|
2023-10-06 21:00:15 +00:00
|
|
|
}
|
|
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
if (videoForm.device.children.length !== 0) {
|
|
|
|
|
videoForm.device.value = videoForm.device.children[1].value;
|
2023-10-06 21:00:15 +00:00
|
|
|
}
|
|
|
|
|
|
2023-11-02 11:24:28 +00:00
|
|
|
if (audioForm.device.children.length !== 0) {
|
|
|
|
|
audioForm.device.value = audioForm.device.children[1].value;
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
});
|
2023-11-02 11:24:28 +00:00
|
|
|
};
|
2023-05-14 12:18:03 +00:00
|
|
|
|
|
|
|
|
const populateCodecs = () => {
|
|
|
|
|
const pc = new RTCPeerConnection({});
|
|
|
|
|
pc.addTransceiver("video", { direction: 'sendonly' });
|
|
|
|
|
pc.addTransceiver("audio", { direction: 'sendonly' });
|
|
|
|
|
|
|
|
|
|
return pc.createOffer()
|
|
|
|
|
.then((desc) => {
|
|
|
|
|
const sdp = desc.sdp.toLowerCase();
|
|
|
|
|
|
|
|
|
|
for (const codec of ['av1/90000', 'vp9/90000', 'vp8/90000', 'h264/90000']) {
|
|
|
|
|
if (sdp.includes(codec)) {
|
|
|
|
|
const opt = document.createElement('option');
|
2023-06-27 20:37:06 +00:00
|
|
|
opt.value = codec;
|
2023-05-14 12:18:03 +00:00
|
|
|
opt.text = codec.split('/')[0].toUpperCase();
|
2023-11-02 11:24:28 +00:00
|
|
|
videoForm.codec.appendChild(opt);
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const codec of ['opus/48000', 'g722/8000', 'pcmu/8000', 'pcma/8000']) {
|
|
|
|
|
if (sdp.includes(codec)) {
|
|
|
|
|
const opt = document.createElement('option');
|
2023-06-27 20:37:06 +00:00
|
|
|
opt.value = codec;
|
2023-05-14 12:18:03 +00:00
|
|
|
opt.text = codec.split('/')[0].toUpperCase();
|
2023-11-02 11:24:28 +00:00
|
|
|
audioForm.codec.appendChild(opt);
|
2023-05-14 12:18:03 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pc.close();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const initialize = () => {
|
2023-07-19 11:20:05 +00:00
|
|
|
if (navigator.mediaDevices === undefined) {
|
|
|
|
|
state = ERROR;
|
|
|
|
|
errorMessage = 'can\'t access webcams or microphones. Make sure that WebRTC encryption is enabled.';
|
|
|
|
|
render();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-14 12:18:03 +00:00
|
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
|
|
|
|
.then(() => Promise.all([
|
|
|
|
|
populateDevices(),
|
|
|
|
|
populateCodecs(),
|
|
|
|
|
]))
|
|
|
|
|
.then(() => {
|
2023-07-19 11:20:05 +00:00
|
|
|
state = DEVICE;
|
|
|
|
|
render();
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
state = ERROR;
|
|
|
|
|
errorMessage = err.toString();
|
|
|
|
|
render();
|
2023-05-14 12:18:03 +00:00
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.getElementById("publish_confirm").addEventListener('click', onPublish);
|
|
|
|
|
|
|
|
|
|
initialize();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
