pimhwang
/
mediamtx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Ready-to-use SRT / WebRTC / RTSP / RTMP / LL-HLS media server and media proxy that allows to read, publish, proxy, record and playback video and audio streams.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1883 Commits
5 Branches
150 Tags
23 MiB
 
 
 
 
 
 
Tree: 107a9a4281
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '107a9a4281'
${ noResults }
mediamtx/internal/core/webrtc_publish_index.html

740 lines
20 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#video {
height: 100%;
background: black;
flex-grow: 1;
min-height: 0;
}
#controls {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 10px;
flex-direction: column;
}
#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;
gap: 20px;
}
#submit_line {
margin-top: 20px;
}
#error-message {
text-align: center;
}
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>
<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>
</div>
<div class="item">
<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" />
</div>
<div class="item">
<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" />
</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>
</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>
</div>
<script>
const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;
const ERROR = 3;
let state = INITIALIZING;
let errorMessage = '';
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;
}
};
const restartPause = 2000;
const unquoteCredential = (v) => (
JSON.parse(`"${v}"`)
);
const linkToIceServers = (links) => (
(links !== null) ? links.split(', ').map((link) => {
const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
const ret = {
urls: [m[1]],
};
if (m[3] !== undefined) {
ret.username = unquoteCredential(m[3]);
ret.credential = unquoteCredential(m[4]);
ret.credentialType = "password";
}
return ret;
}) : []
);
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;
};
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) => {
const sections = answer.sdp.split('m=');
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);
}
}
answer.sdp = 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')),
});
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',
headers: {
'Content-Type': 'application/sdp',
},
body: offer.sdp,
})
.then((res) => {
if (res.status !== 201) {
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();
});
}
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;
}
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),
})
.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 = [];
}
}
const onTransmit = (stream) => {
document.getElementById('video').srcObject = stream;
new Transmitter(stream);
};
const onPublish = () => {
state = TRANSMITTING;
render();
const videoId = videoForm.device.value;
const audioId = audioForm.device.value;
if (videoId !== 'screen') {
let video = false;
if (videoId !== 'none') {
video = {
deviceId: videoId,
};
}
let audio = false;
if (audioId !== 'none') {
audio = {
deviceId: audioId,
};
const voice = audioForm.voice.checked;
if (!voice) {
audio.autoGainControl = false;
audio.echoCancellation = false;
audio.noiseSuppression = false;
}
}
navigator.mediaDevices.getUserMedia({ video, audio })
.then(onTransmit)
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
});
} else {
navigator.mediaDevices.getDisplayMedia({
video: {
width: { ideal: videoForm.width.value },
height: { ideal: videoForm.height.value },
frameRate: { ideal: videoForm.framerate.value },
cursor: "always",
},
audio: true,
})
.then(onTransmit)
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
});
}
};
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;
videoForm.device.appendChild(opt);
}
break;
case 'audioinput':
{
const opt = document.createElement('option');
opt.value = device.deviceId;
opt.text = device.label;
audioForm.device.appendChild(opt);
}
break;
}
}
if (navigator.mediaDevices.getDisplayMedia !== undefined) {
const opt = document.createElement('option');
opt.value = "screen";
opt.text = "screen";
videoForm.device.appendChild(opt);
}
if (videoForm.device.children.length !== 0) {
videoForm.device.value = videoForm.device.children[1].value;
}
if (audioForm.device.children.length !== 0) {
audioForm.device.value = audioForm.device.children[1].value;
}
});
};
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');
opt.value = codec;
opt.text = codec.split('/')[0].toUpperCase();
videoForm.codec.appendChild(opt);
}
}
for (const codec of ['opus/48000', 'g722/8000', 'pcmu/8000', 'pcma/8000']) {
if (sdp.includes(codec)) {
const opt = document.createElement('option');
opt.value = codec;
opt.text = codec.split('/')[0].toUpperCase();
audioForm.codec.appendChild(opt);
}
}
pc.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;
}
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(() => Promise.all([
populateDevices(),
populateCodecs(),
]))
.then(() => {
state = DEVICE;
render();
})
.catch((err) => {
state = ERROR;
errorMessage = err.toString();
render();
});
};
document.getElementById("publish_confirm").addEventListener('click', onPublish);
initialize();
</script>
</body>
</html>