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

re-route

main
Hendrik Langer 4 years ago
parent
304347a43b
commit
09a12d3b0b
5 changed files with 151 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      raspberry/roberto/__init__.py
  2. 16
      raspberry/roberto/camera/camera_gstreamer_webrtc.py
  3. 34
      raspberry/roberto/views/frontend/routes.py
  4. 8
      raspberry/roberto/views/frontend/templates/gamepad.js
  5. 117
      raspberry/roberto/views/frontend/templates/index.html

4
raspberry/roberto/__init__.py
View File

@ -16,8 +16,8 @@ from flask_socketio import SocketIO
login = LoginManager()
login.login_view = "users.login"
socketio = SocketIO()
from roberto.camera.camera_opencv import Camera
camera = Camera()
#from roberto.camera.camera_opencv import Camera
#camera = Camera()
from roberto.camera.camera_gstreamer_webrtc import WebRTCCamera
webrtccamera = WebRTCCamera()
from roberto.Serial import Serial

16
raspberry/roberto/camera/camera_gstreamer_webrtc.py
View File

@ -18,6 +18,13 @@ from gi.repository import GstSdp
import json
platform = None
try:
import RPi.GPIO as gpio
platform = 'raspberry'
except (ImportError, RuntimeError):
platform = 'generic'
#PIPELINE_DESC = '''
#webrtcbin name=sendrecv bundle-policy=max-bundle stun-server=stun://stun.l.google.com:19302
# videotestsrc is-live=true pattern=ball ! videoconvert ! queue ! vp8enc deadline=1 ! rtpvp8pay !
@ -49,6 +56,15 @@ webrtcbin name=sendrecv bundle-policy=max-bundle stun-server=stun://stun.l.googl
# rpicamsrc name=src preview=0 fullscreen=0 ! h264parse ! omxh264dec ! glimagesink sync=0
if platform == 'raspberry':
PIPELINE_DESC = '''
webrtcbin name=sendrecv bundle-policy=max-bundle stun-server=stun://stun.l.google.com:19302
v4l2src device=/dev/video0 ! videoconvert ! queue ! vp8enc deadline=1 ! rtpvp8pay !
queue ! application/x-rtp,media=video,encoding-name=VP8,payload=97 ! sendrecv.
audiotestsrc is-live=true wave=red-noise ! audioconvert ! audioresample ! queue ! opusenc !rtpopuspay !
queue ! application/x-rtp,media=audio,encoding-name=OPUS,payload=96 ! sendrecv.
'''
class WebRTCCamera(Thread):
def __init__(self):
self.sid = None

34
raspberry/roberto/views/frontend/routes.py
View File

@ -11,23 +11,23 @@ from flask import Response
def index():
return render_template('index.html')
def gen(camera):
"""Video streaming generator function."""
while True:
frame = camera.get_frame()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
@frontend_blueprint.route('/video_feed')
def video_feed():
"""Video streaming route. Put this in the src attribute of an img tag."""
from roberto import camera
camera.__init__()
response = Response(gen(camera),
mimetype='multipart/x-mixed-replace; boundary=frame')
response.headers.add('X-Accel-Buffering', 'no')
return response
#def gen(camera):
# """Video streaming generator function."""
# while True:
# frame = camera.get_frame()
# yield (b'--frame\r\n'
# b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
#
#
#@frontend_blueprint.route('/video_feed')
#def video_feed():
# """Video streaming route. Put this in the src attribute of an img tag."""
# from roberto import camera
# camera.__init__()
# response = Response(gen(camera),
# mimetype='multipart/x-mixed-replace; boundary=frame')
# response.headers.add('X-Accel-Buffering', 'no')
# return response
@frontend_blueprint.route('/gamepad.js')

8
raspberry/roberto/views/frontend/templates/gamepad.js
View File

@ -8,10 +8,10 @@
*/
namespace = '/gamepad';
var socket = io(namespace);
var gp_socket = io(namespace, { transports: [ 'websocket' ] });
socket.on('connect', function() {
socket.emit('my_event', {data: 'I\'m connected!'});
gp_socket.on('connect', function() {
gp_socket.emit('my_event', {data: 'I\'m connected!'});
});
var haveEvents = 'GamepadEvent' in window;
@ -110,7 +110,7 @@ function updateStatus() {
}
}
if (axesChanged) {
socket.emit('axes', {0: controller.axes[0], 1: controller.axes[1], 3: controller.axes[3], 4: controller.axes[4]});
gp_socket.emit('axes', {0: controller.axes[0], 1: controller.axes[1], 3: controller.axes[3], 4: controller.axes[4]});
}
}
rAF(updateStatus);

117
raspberry/roberto/views/frontend/templates/index.html
View File

@ -9,7 +9,11 @@
</head>
<body>
<h1>Video Streaming Demonstration</h1>
<img src="{{ url_for('frontend.video_feed') }}">
{# <!--<img src="{{ url_for('frontend.video_feed') }}">--> #}
<div id="video">
<video id="stream" autoplay playsinline muted>Your browser does not support video</video>
</div>
<h2>Send:</h2>
<form id="emit" method="POST" action='#'>
@ -30,18 +34,121 @@
<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>-->
<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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
socket.on('my response', function(msg) {
var test_socket = io.connect('wss://' + document.domain + ':' + location.port + '/test', { transports: [ 'websocket' ] });
test_socket.on('my response', function(msg) {
$('#log').append('<p>Received: ' + msg.data + '</p>');
});
$('form#emit').submit(function(event) {
socket.emit('my event', {data: $('#emit_data').val()});
test_socket.emit('my event', {data: $('#emit_data').val()});
return false;
});
$('form#broadcast').submit(function(event) {
socket.emit('my broadcast event', {data: $('#broadcast_data').val()});
test_socket.emit('my broadcast event', {data: $('#broadcast_data').val()});
return false;
});
});

Write Preview
Loading…
Cancel
Save