hendrik
/
roberto
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

working webrtc

split-pipe
Hendrik Langer 4 years ago
parent
fd1eb1ef29
commit
c484270c24
2 changed files with 105 additions and 405 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      raspberry/roberto/views/websocket/routes.py
  2. 421
      raspberry/roberto/views/websocket/templates/camera.html

79
raspberry/roberto/views/websocket/routes.py
View File

@ -1,7 +1,7 @@
from . import websocket_blueprint from . import websocket_blueprint
from flask import current_app, render_template from flask import current_app, render_template, request
from flask_socketio import SocketIO, emit from flask_socketio import SocketIO, emit, join_room, leave_room
from roberto import socketio from roberto import socketio
@ -53,69 +53,30 @@ def applyDeadZone(value, threshold):
return new_value return new_value
connected_particpants = {} # https://pfertyk.me/2020/03/webrtc-a-working-example/
ROOM = 'default'
@websocket_blueprint.route('/camera') @websocket_blueprint.route('/camera')
def camera(): def camera():
return render_template('camera.html', room='default') return render_template('camera.html', room='default')
@socketio.on('message', namespace='/webrtc') @socketio.on('data', namespace='/webrtc')
def webrtc_message(sid, data): def webrtc_message(data):
sio.emit('message', data=data) sid = request.sid
print('Message from {}: {}'.format(sid, data))
socketio.emit('data', data=data, room=ROOM, namespace='/webrtc', skip_sid=sid)
@socketio.on('disconnect', namespace='/webrtc') @socketio.on('disconnect', namespace='/webrtc')
def disconnect(sid): def disconnect():
sid = request.sid
print("Received Disconnect message from %s" % sid) print("Received Disconnect message from %s" % sid)
for room, clients in connected_particpants.iteritems(): leave_room(ROOM)
try:
clients.remove(sid) @socketio.on('connect', namespace='/webrtc')
print("Removed %s from %s \n list of left participants is %s" %(sid, room, clients)) def connect():
except ValueError: sid = request.sid
print("Remove %s from %s \n list of left participants is %s has failed" %(sid, room, clients)) print("Received Connect message from %s" % sid)
socketio.emit('ready', room=ROOM, namespace='/webrtc', skip_sid=sid)
@socketio.on('create or join', namespace='/webrtc') join_room(ROOM)
def create_or_join(sid, data):
sio.enter_room(sid, data)
try:
connected_particpants[data].append(sid)
except KeyError:
connected_particpants[data] = [sid]
numClients = len(connected_particpants[data])
if numClients == 1:
sio.emit('created', data)
elif numClients > 2:
sio.emit('full')
elif numClients == 2:
sio.emit('joined')
sio.emit('join')
print (sid, data, len(connected_particpants[data]))
@websocket_blueprint.route('/<room>')
def room(room):
return render_template('camera.html', room=room)

421
raspberry/roberto/views/websocket/templates/camera.html
View File

@ -1,9 +1,9 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video Streaming Demonstration</title> <title>WebRTC working example</title>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<!-- jQuery and Bootstrap --> <!-- jQuery and Bootstrap -->
@ -22,379 +22,118 @@
<script type="text/javascript"> <script type="text/javascript">
'use strict'; 'use strict';
const SIGNALING_SERVER_URL = 'wss://' + document.domain + ':' + location.port + '/webrtc';
const PC_CONFIG = {};
var room = '{{room}}'; var room = '{{room}}';
var isChannelReady = false; var socket = io.connect(SIGNALING_SERVER_URL, { autoConnect: false });
var isInitiator = false;
var isStarted = false;
var localStream;
var pc;
var remoteStream;
var turnReady;
var receiveChannel;
var sendChannel;
var sendText = document.querySelector("#text");
var chatlog = document.querySelector('#chatlog');
var pcConfig = { socket.on('connect', function(){
'iceServers': [{ console.log("Connected...!", socket.connected)
'urls': 'stun:stun.l.google.com:19302'
}]
};
// Set up audio and video regardless of what devices are present.
var sdpConstraints = {
offerToReceiveAudio: true,
offerToReceiveVideo: true
};
/////////////////////////////////////////////
//room = 'foo';
// Could prompt for room name:
// var room = prompt('Enter room name:');
var socket = io.connect('wss://' + document.domain + ':' + location.port + '/test');
if (room !== '') {
socket.emit('create or join', room);
console.log('Attempted to create or join room', room);
}
socket.on('created', function(room) {
console.log('Created room ' + room);
isInitiator = true;
});
socket.on('full', function(room) {
console.log('Room ' + room + ' is full');
}); });
socket.on('join', function (room){ const video = document.querySelector("#stream");
console.log('Another peer made a request to join room ' + room);
console.log('This peer is the initiator of room ' + room + '!');
isChannelReady = true;
});
socket.on('joined', function(room) {
console.log('joined: ' + room);
isChannelReady = true;
});
socket.on('log', function(array) { socket.on('data', (data) => {
console.log.apply(console, array); console.log('Data received: ',data);
handleSignalingData(data);
}); });
//////////////////////////////////////////////// socket.on('ready', () => {
console.log('Ready');
function sendMessage(message) { createPeerConnection();
console.log('Client sending message: ', message); sendOffer();
socket.emit('message', message);
}
// This client receives a message
socket.on('message', function(message) {
console.log('Client received message:', message);
if (message === 'got user media') {
maybeStart();
} else if (message.type === 'offer') {
if (!isInitiator && !isStarted) {
maybeStart();
}
pc.setRemoteDescription(new RTCSessionDescription(message));
doAnswer();
} else if (message.type === 'answer' && isStarted) {
pc.setRemoteDescription(new RTCSessionDescription(message));
} else if (message.type === 'candidate' && isStarted) {
var candidate = new RTCIceCandidate({
sdpMLineIndex: message.label,
candidate: message.candidate
});
pc.addIceCandidate(candidate);
} else if (message === 'bye' && isStarted) {
handleRemoteHangup();
}
}); });
//////////////////////////////////////////////////// let sendData = (data) => {
socket.emit('data', data);
};
var localVideo = document.querySelector('#localVideo'); // WebRTC methods
var remoteVideo = document.querySelector('#remoteVideo'); let pc;
let localStream;
let remoteStreamElement = document.querySelector('#stream');
navigator.mediaDevices.getUserMedia({ let getLocalStream = () => {
audio: false, navigator.mediaDevices.getUserMedia({ audio: true, video: true })
video: true .then((stream) => {
console.log('Stream found');
localStream = stream;
// Connect after making sure that local stream is availble
socket.connect();
}) })
.then(gotStream) .catch(error => {
.catch(function(e) { console.error('Stream not found: ', error);
alert('getUserMedia() error: ' + e.name);
}); });
function gotStream(stream) {
console.log('Adding local stream.');
localVideo.src = window.URL.createObjectURL(stream);
localStream = stream;
sendMessage('got user media');
if (isInitiator) {
maybeStart();
}
}
var constraints = {
video: true
};
console.log('Getting user media with constraints', constraints);
if (false) {
requestTurn(
'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913'
);
} }
function maybeStart() { let createPeerConnection = () => {
console.log('>>>>>>> maybeStart() ', isStarted, localStream, isChannelReady); try {
if (!isStarted && typeof localStream !== 'undefined' && isChannelReady) { pc = new RTCPeerConnection(PC_CONFIG);
console.log('>>>>>> creating peer connection'); pc.onicecandidate = onIceCandidate;
createPeerConnection(); pc.onaddstream = onAddStream;
pc.addStream(localStream); pc.addStream(localStream);
isStarted = true; console.log('PeerConnection created');
console.log('isInitiator', isInitiator); } catch (error) {
if (isInitiator) { console.error('PeerConnection failed: ', error);
doCall();
}
} }
}
window.onbeforeunload = function() {
socket.emit('disconnect', room)
console.log("sending disconnect")
}; };
///////////////////////////////////////////////////////// let sendOffer = () => {
console.log('Send offer');
function createPeerConnection() { pc.createOffer().then(
try { setAndSendLocalDescription,
pc = new RTCPeerConnection(pcConfig); (error) => { console.error('Send offer failed: ', error); }
sendChannel = pc.createDataChannel('chat', null); );
pc.onicecandidate = handleIceCandidate; };
pc.onaddstream = handleRemoteStreamAdded;
pc.onremovestream = handleRemoteStreamRemoved;
pc.ondatachannel = handleChannelCallback;
console.log('Created RTCPeerConnnection');
} catch (e) {
console.log('Failed to create PeerConnection, exception: ' + e.message);
alert('Cannot create RTCPeerConnection object.');
return;
}
}
function handleChannelCallback(event) {
receiveChannel = event.channel;
receiveChannel.onmessage = onReceiveMessageCallback;
}
function onReceiveMessageCallback(event) {
var text = document.createElement("P");
text.appendChild(document.createTextNode(event.data))
chatlog.appendChild(text);
}
function handleIceCandidate(event) {
console.log('icecandidate event: ', event);
if (event.candidate) {
sendMessage({
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate
});
} else {
console.log('End of candidates.');
}
}
function sendData() {
var text = document.createElement("P");
text.appendChild(document.createTextNode(sendText.value));
chatlog.appendChild(text);
sendChannel.send(sendText.value);
sendText.value = '';
}
function handleRemoteStreamAdded(event) {
console.log('Remote stream added.');
remoteVideo.src = window.URL.createObjectURL(event.stream);
remoteStream = event.stream;
}
function handleCreateOfferError(event) {
console.log('createOffer() error: ', event);
}
function doCall() {
console.log('Sending offer to peer');
pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
}
function doAnswer() { let sendAnswer = () => {
console.log('Sending answer to peer.'); console.log('Send answer');
pc.createAnswer().then( pc.createAnswer().then(
setLocalAndSendMessage, setAndSendLocalDescription,
onCreateSessionDescriptionError (error) => { console.error('Send answer failed: ', error); }
); );
} };
function setLocalAndSendMessage(sessionDescription) { let setAndSendLocalDescription = (sessionDescription) => {
// Set Opus as the preferred codec in SDP if Opus is present.
// sessionDescription.sdp = preferOpus(sessionDescription.sdp);
pc.setLocalDescription(sessionDescription); pc.setLocalDescription(sessionDescription);
console.log('setLocalAndSendMessage sending message', sessionDescription); console.log('Local description set');
sendMessage(sessionDescription); sendData(sessionDescription);
} };
function onCreateSessionDescriptionError(error) {
//trace('Failed to create session description: ' + error.toString());
}
function requestTurn(turnURL) { let onIceCandidate = (event) => {
var turnExists = false; if (event.candidate) {
for (var i in pcConfig.iceServers) { console.log('ICE candidate');
if (pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') { sendData({
turnExists = true; type: 'candidate',
turnReady = true; candidate: event.candidate
break;
}
}
if (!turnExists) {
console.log('Getting TURN server from ', turnURL);
// No TURN server. Get one from computeengineondemand.appspot.com:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var turnServer = JSON.parse(xhr.responseText);
console.log('Got TURN server: ', turnServer);
pcConfig.iceServers.push({
'url': 'turn:' + turnServer.username + '@' + turnServer.turn,
'credential': turnServer.password
}); });
turnReady = true;
} }
}; };
xhr.open('GET', turnURL, true);
xhr.send();
}
}
function handleRemoteStreamAdded(event) {
console.log('Remote stream added.');
remoteVideo.src = window.URL.createObjectURL(event.stream);
remoteStream = event.stream;
}
function handleRemoteStreamRemoved(event) {
console.log('Remote stream removed. Event: ', event);
}
function hangup() {
console.log('Hanging up.');
stop();
sendMessage('bye');
}
function handleRemoteHangup() {
console.log('Session terminated.');
stop();
isInitiator = false;
}
function stop() { let onAddStream = (event) => {
isStarted = false; console.log('Add stream');
// isAudioMuted = false; remoteStreamElement.srcObject = event.stream;
// isVideoMuted = false; };
pc.close();
pc = null;
}
///////////////////////////////////////////
// Set Opus as the default audio codec if it's present. let handleSignalingData = (data) => {
function preferOpus(sdp) { switch (data.type) {
var sdpLines = sdp.split('\r\n'); case 'offer':
var mLineIndex; createPeerConnection();
// Search for m line. pc.setRemoteDescription(new RTCSessionDescription(data));
for (var i = 0; i < sdpLines.length; i++) { sendAnswer();
if (sdpLines[i].search('m=audio') !== -1) {
mLineIndex = i;
break; break;
} case 'answer':
} pc.setRemoteDescription(new RTCSessionDescription(data));
if (mLineIndex === null) { break;
return sdp; case 'candidate':
} pc.addIceCandidate(new RTCIceCandidate(data.candidate));
// If Opus is available, set it as the default in m line.
for (i = 0; i < sdpLines.length; i++) {
if (sdpLines[i].search('opus/48000') !== -1) {
var opusPayload = extractSdp(sdpLines[i], /:(\d+) opus\/48000/i);
if (opusPayload) {
sdpLines[mLineIndex] = setDefaultCodec(sdpLines[mLineIndex],
opusPayload);
}
break; break;
} }
} };
// Remove CN in m line and sdp.
sdpLines = removeCN(sdpLines, mLineIndex);
sdp = sdpLines.join('\r\n');
return sdp;
}
function extractSdp(sdpLine, pattern) {
var result = sdpLine.match(pattern);
return result && result.length === 2 ? result[1] : null;
}
// Set the selected codec to the first in m line.
function setDefaultCodec(mLine, payload) {
var elements = mLine.split(' ');
var newLine = [];
var index = 0;
for (var i = 0; i < elements.length; i++) {
if (index === 3) { // Format of media starts from the fourth.
newLine[index++] = payload; // Put target payload to the first.
}
if (elements[i] !== payload) {
newLine[index++] = elements[i];
}
}
return newLine.join(' ');
}
// Strip CN from sdp before CN constraints is ready.
function removeCN(sdpLines, mLineIndex) {
var mLineElements = sdpLines[mLineIndex].split(' ');
// Scan from end for the convenience of removing an item.
for (var i = sdpLines.length - 1; i >= 0; i--) {
var payload = extractSdp(sdpLines[i], /a=rtpmap:(\d+) CN\/\d+/i);
if (payload) {
var cnPos = mLineElements.indexOf(payload);
if (cnPos !== -1) {
// Remove CN payload from m line.
mLineElements.splice(cnPos, 1);
}
// Remove CN line in sdp
sdpLines.splice(i, 1);
}
}
sdpLines[mLineIndex] = mLineElements.join(' '); // Start connection
return sdpLines; getLocalStream();
}
</script> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save