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.
123 lines
4.1 KiB
123 lines
4.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WebRTC working example</title>
|
|
<!-- Bootstrap -->
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<!-- jQuery and Bootstrap -->
|
|
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
|
|
<!--<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>-->
|
|
</head>
|
|
|
|
<body>
|
|
<div id="video">
|
|
<video id="stream" autoplay playsinline muted>Your browser does not support video</video>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
'use strict';
|
|
var html5VideoElement;
|
|
var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/webrtc";
|
|
var socket = io.connect(wsUrl, { autoConnect: false, transports: [ 'websocket' ] });
|
|
var webrtcPeerConnection;
|
|
var webrtcConfiguration;
|
|
var reportError;
|
|
|
|
|
|
function onLocalDescription(desc) {
|
|
console.log("Local description: " + JSON.stringify(desc));
|
|
webrtcPeerConnection.setLocalDescription(desc).then(function() {
|
|
socket.emit('message', { type: "sdp", "data": webrtcPeerConnection.localDescription });
|
|
}).catch(reportError);
|
|
}
|
|
|
|
|
|
function onIncomingSDP(sdp) {
|
|
console.log("Incoming SDP: " + JSON.stringify(sdp));
|
|
webrtcPeerConnection.setRemoteDescription(sdp).catch(reportError);
|
|
webrtcPeerConnection.createAnswer().then(onLocalDescription).catch(reportError);
|
|
}
|
|
|
|
|
|
function onIncomingICE(ice) {
|
|
var candidate = new RTCIceCandidate(ice);
|
|
console.log("Incoming ICE: " + JSON.stringify(ice));
|
|
webrtcPeerConnection.addIceCandidate(candidate).catch(reportError);
|
|
}
|
|
|
|
|
|
function onAddRemoteStream(event) {
|
|
html5VideoElement.srcObject = event.streams[0];
|
|
}
|
|
|
|
|
|
function onIceCandidate(event) {
|
|
if (event.candidate == null)
|
|
return;
|
|
|
|
console.log("Sending ICE candidate out: " + JSON.stringify(event.candidate));
|
|
socket.emit('message', { "type": "ice", "data": event.candidate });
|
|
}
|
|
|
|
socket.on('connect', function(){
|
|
console.log("Connected...!", socket.connected)
|
|
});
|
|
|
|
socket.on('message', (data) => {
|
|
console.log("got message: ",data);
|
|
var msg;
|
|
|
|
try {
|
|
msg = JSON.parse(data);
|
|
} catch (e) {
|
|
console.log("ERROR parsing message");
|
|
return;
|
|
}
|
|
|
|
if (!webrtcPeerConnection) {
|
|
webrtcPeerConnection = new RTCPeerConnection(webrtcConfiguration);
|
|
webrtcPeerConnection.ontrack = onAddRemoteStream;
|
|
webrtcPeerConnection.onicecandidate = onIceCandidate;
|
|
}
|
|
|
|
switch (msg.type) {
|
|
case "sdp": onIncomingSDP(msg.data); break;
|
|
case "ice": onIncomingICE(msg.data); break;
|
|
default: break;
|
|
}
|
|
});
|
|
|
|
socket.on('data', (data) => {
|
|
console.log('Data received: ',data);
|
|
});
|
|
|
|
function playStream(videoElement, hostname, port, path, configuration, reportErrorCB) {
|
|
var l = window.location;
|
|
var wsHost = (hostname != undefined) ? hostname : l.hostname;
|
|
var wsPort = (port != undefined) ? port : l.port;
|
|
var wsPath = (path != undefined) ? path : "webrtc";
|
|
if (wsPort)
|
|
wsPort = ":" + wsPort;
|
|
var wsUrl = "wss://" + wsHost + wsPort + "/" + wsPath;
|
|
|
|
html5VideoElement = videoElement;
|
|
webrtcConfiguration = configuration;
|
|
reportError = (reportErrorCB != undefined) ? reportErrorCB : function(text) {};
|
|
|
|
socket.connect();
|
|
}
|
|
|
|
window.onload = function() {
|
|
var vidstream = document.getElementById("stream");
|
|
var config = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
|
|
playStream(vidstream, null, null, null, config, function (errmsg) { console.error(errmsg); });
|
|
};
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|