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.
1547 Commits
5 Branches
150 Tags
23 MiB
 
 
 
 
 
 
Tree: 39c072edd6
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '39c072edd6'
${ noResults }
mediamtx/internal/core/webrtc_publish_index.html

462 lines
13 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%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
#video {
height: 100%;
background: black;
flex-grow: 1;
min-height: 0;
}
#controls {
height: 200px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
#device {
flex-direction: column;
}
#device > div {
margin: 10px 0;
display: flex;
gap: 20px;
justify-content: 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 id="device_line">
video device:
<select id="video_device">
<option value="none">none</option>
</select>
audio device:
<select id="audio_device">
<option value="none">none</option>
</select>
</div>
<div id="codec_line">
video codec:
<select id="video_codec">
</select>
audio codec:
<select id="audio_codec">
</select>
</div>
<div id="bitrate_line">
video bitrate (kbps):
<input id="video_bitrate" type="text" value="10000" />
</div>
<div id="submit_line">
<button id="publish_confirm">publish</button>
</div>
</div>
<div id="transmitting" style="display: none;">
publishing
</div>
</div>
<script>
const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;
let state = INITIALIZING;
const setState = (newState) => {
state = newState;
switch (state) {
case DEVICE:
document.getElementById("initializing").style.display = 'none';
document.getElementById("device").style.display = 'flex';
document.getElementById("transmitting").style.display = 'none';
break;
case TRANSMITTING:
document.getElementById("initializing").style.display = 'none';
document.getElementById("device").style.display = 'none';
document.getElementById("transmitting").style.display = 'flex';
break;
}
};
const restartPause = 2000;
const linkToIceServers = (links) => (
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 = m[3];
ret.credential = 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;
}
class Transmitter {
constructor(stream) {
this.stream = stream;
this.pc = null;
this.restartTimeout = null;
this.eTag = '';
this.queuedCandidates = [];
this.start();
}
start() {
console.log("requesting ICE servers");
fetch('whip', {
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((desc) => {
this.offerData = parseOffer(desc.sdp);
this.pc.setLocalDescription(desc);
console.log("sending offer");
const videoCodec = document.getElementById('video_codec').value;
const audioCodec = document.getElementById('audio_codec').value;
const videoBitrate = document.getElementById('video_bitrate').value;
let params = '?video_codec=' + videoCodec +
'&audio_codec=' + audioCodec +
'&video_bitrate=' + videoBitrate;
fetch('whip' + params, {
method: 'POST',
headers: {
'Content-Type': 'application/sdp',
},
body: JSON.stringify(desc),
})
.then((res) => {
if (res.status !== 201) {
throw new Error('bad status code');
}
this.eTag = res.headers.get('E-Tag');
return res.json();
})
.then((answer) => this.onRemoteDescription(answer))
.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();
}
}
onRemoteDescription(answer) {
if (this.restartTimeout !== null) {
return;
}
this.pc.setRemoteDescription(new RTCSessionDescription(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.eTag === '') {
this.queuedCandidates.push(evt.candidate);
} else {
this.sendLocalCandidates([evt.candidate])
}
}
}
sendLocalCandidates(candidates) {
fetch('whip', {
method: 'PATCH',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
'If-Match': this.eTag,
},
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);
this.eTag = '';
this.queuedCandidates = [];
}
}
const onTransmit = (stream) => {
setState(TRANSMITTING);
document.getElementById('video').srcObject = stream;
new Transmitter(stream);
};
const onPublish = () => {
const videoId = document.getElementById('video_device').value;
const audioId = document.getElementById('audio_device').value;
if (videoId !== 'screen') {
let video = false;
if (videoId !== 'none') {
video = {
deviceId: videoId,
};
}
let audio = false;
if (audioId !== 'none') {
audio = {
deviceId: audioId,
};
}
navigator.mediaDevices.getUserMedia({ video, audio })
.then(onTransmit);
} else {
navigator.mediaDevices.getDisplayMedia({
video: {
width: { ideal: 1920 },
height: { ideal: 1080 },
frameRate: { ideal: 30 },
cursor: "always",
},
audio: false,
})
.then(onTransmit);
}
};
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;
document.getElementById('video_device').appendChild(opt);
}
break;
case 'audioinput':
{
const opt = document.createElement('option');
opt.value = device.deviceId;
opt.text = device.label;
document.getElementById('audio_device').appendChild(opt);
}
break;
}
}
// add screen
const opt = document.createElement('option');
opt.value = "screen";
opt.text = "screen";
document.getElementById('video_device').appendChild(opt);
// set default
document.getElementById('video_device').value = document.getElementById('video_device').children[1].value;
if (document.getElementById('audio_device').children.length > 1) {
document.getElementById('audio_device').value = document.getElementById('audio_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.split('/')[0];
opt.text = codec.split('/')[0].toUpperCase();
document.getElementById('video_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.split('/')[0];
opt.text = codec.split('/')[0].toUpperCase();
document.getElementById('audio_codec').appendChild(opt);
}
}
pc.close();
});
};
const initialize = () => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(() => Promise.all([
populateDevices(),
populateCodecs(),
]))
.then(() => {
setState(DEVICE);
});
};
document.getElementById("publish_confirm").addEventListener('click', onPublish);
initialize();
</script>
</body>
</html>