|
|
|
|
<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">
|
|
|
|
|
<button id="start_rgb" onclick="start_rgb()" class="camera_block">Play</button>
|
|
|
|
|
<video id="video_rgb" autoplay="false" playsinline="true" class="camera_block" ></video>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
