<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebRTC demo</title>
<style>
button {
padding: 8px 16px;
}
pre {
overflow-x: hidden;
overflow-y: auto;
}
video {
width: 100%;
height: 1024px;
}
.option {
margin-bottom: 8px;
}
.camera_block {
margin: 10px
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script>
// peer connection
var pc_rgb = null;
// data channel
var dc = null, dcInterval = null;
function start_rgb() {
var config = {
sdpSemantics: 'unified-plan'
};
pc_rgb = new RTCPeerConnection(config);
pc_rgb.addEventListener('track', function(evt) {
if (evt.track.kind == 'video') {
document.getElementById('video_rgb').srcObject = evt.streams[0];
}
});
fetch('/offer_video', {
body: JSON.stringify({
url: "demo.mp4"
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}).then(function(response) {
return response.json();
}).then(function(server_offer) {
pc_rgb.setRemoteDescription(server_offer);
pc_rgb.createAnswer().then(function(answer) {
pc_rgb.setLocalDescription(answer).then(function() {
fetch('/answer_video', {
body: JSON.stringify({
sdp: pc_rgb.localDescription.sdp,
type: pc_rgb.localDescription.type
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
});
})
});
}).catch(function(e) {
alert(e);
});
}
window.onload = (event) => {
console.log("page is fully loaded");
start_rgb();
};
</script>
</head>
<body>
<div id="cameras" style="display: flex; flex-direction: row;">
<div id="camera_rgb" class="camera_block">
<video id="video_rgb" autoplay="true" playsinline="true" class="camera_block" ></video>
</div>
</div>
</body>