Add WebRTC support using libdatachannel
The WebRTC is exposed via `/video.html` endpoint and enabled by default as long as h264 stream is available.
This commit is contained in:
Kamil Trzcinski
@ -40,7 +40,7 @@
|
||||
<br>
|
||||
<li>
|
||||
<a href="video"><b>/video</b></a><br>
|
||||
Get a live video (H264) stream.<br>
|
||||
Get a live WebRTC (H264) stream.<br>
|
||||
<br>
|
||||
<ul>
|
||||
<li><a href="video.mp4"><b>/video.mp4</b></a><br> get a live video stream in MP4 format (if FFMPEG enabled).</li>
|
||||
|
||||
1
html/jmuxer.min.js
vendored
1
html/jmuxer.min.js
vendored
File diff suppressed because one or more lines are too long
197
html/video.html
197
html/video.html
@ -1,83 +1,142 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
<style>
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
background-color:#303030;
|
||||
}
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||
<style>
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
background-color:#303030;
|
||||
}
|
||||
|
||||
#streamStage {
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
#streamStage {
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#streamStage:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
#streamStage:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
#stream {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="/jmuxer.min.js"></script>
|
||||
#stream {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="streamtage">
|
||||
<video controls autoplay muted id="stream"></video>
|
||||
</div>
|
||||
<body>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var jmuxer = new JMuxer({
|
||||
node: 'stream',
|
||||
mode: 'video',
|
||||
flushingTime: 0,
|
||||
fps: 30,
|
||||
debug: false
|
||||
});
|
||||
<div id="streamtage">
|
||||
<video controls autoplay muted id="stream"></video>
|
||||
</div>
|
||||
|
||||
fetch('/video.h264' + window.location.search).then(function(response) {
|
||||
console.log(response);
|
||||
<script>
|
||||
function startWebRTC() {
|
||||
var config = {
|
||||
sdpSemantics: 'unified-plan'
|
||||
};
|
||||
|
||||
const reader = response.body.getReader();
|
||||
if (!document.getElementById('use-stun') || document.getElementById('use-stun').checked) {
|
||||
config.iceServers = [{urls: ['stun:stun.l.google.com:19302']}];
|
||||
}
|
||||
|
||||
function go() {
|
||||
reader.read().then(function(result) {
|
||||
if (!result.done) {
|
||||
if (!document.hidden){
|
||||
jmuxer.feed({
|
||||
video: new Uint8Array(result.value)
|
||||
});
|
||||
pc = new RTCPeerConnection(config);
|
||||
pc.addTransceiver('video', {direction: 'recvonly'});
|
||||
//pc.addTransceiver('audio', {direction: 'recvonly'});
|
||||
pc.addEventListener('track', function(evt) {
|
||||
console.log("track event " + evt.track.kind);
|
||||
if (evt.track.kind == 'video') {
|
||||
if (document.getElementById('stream'))
|
||||
document.getElementById('stream').srcObject = evt.streams[0];
|
||||
} else {
|
||||
if (document.getElementById('audio'))
|
||||
document.getElementById('audio').srcObject = evt.streams[0];
|
||||
}
|
||||
go ();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
go ();
|
||||
})
|
||||
}
|
||||
</script>
|
||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
const params = Object.fromEntries(urlSearchParams.entries());
|
||||
|
||||
fetch('/video', {
|
||||
body: JSON.stringify({
|
||||
type: 'request',
|
||||
res: params.res
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
method: 'POST'
|
||||
}).then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(answer) {
|
||||
pc.remote_pc_id = answer.id;
|
||||
return pc.setRemoteDescription(answer);
|
||||
}).then(function() {
|
||||
return pc.createAnswer();
|
||||
}).then(function(answer) {
|
||||
return pc.setLocalDescription(answer);
|
||||
}).then(function() {
|
||||
// wait for ICE gathering to complete
|
||||
return new Promise(function(resolve) {
|
||||
if (pc.iceGatheringState === 'complete') {
|
||||
resolve();
|
||||
} else {
|
||||
function checkState() {
|
||||
if (pc.iceGatheringState === 'complete') {
|
||||
pc.removeEventListener('icegatheringstatechange', checkState);
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
pc.addEventListener('icegatheringstatechange', checkState);
|
||||
}
|
||||
});
|
||||
}).then(function(answer) {
|
||||
var offer = pc.localDescription;
|
||||
|
||||
return fetch('/video', {
|
||||
body: JSON.stringify({
|
||||
type: offer.type,
|
||||
id: pc.remote_pc_id,
|
||||
sdp: offer.sdp,
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
method: 'POST'
|
||||
})
|
||||
}).then(function(response) {
|
||||
return response.json();
|
||||
}).catch(function(e) {
|
||||
alert(e);
|
||||
});
|
||||
}
|
||||
|
||||
function stopWebRTC() {
|
||||
setTimeout(function() {
|
||||
pc.close();
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
startWebRTC();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user