WebRTC prove pratiche, esperimenti e curiosità
27
-
Upload
comparto-web -
Category
Technology
-
view
752 -
download
1
description
Con le specifiche WebRTC possiamo creare una comunicazione peer-2-peer tra due browser, sulla quale far transitare stream multimediali e non. Il talk è suddiviso in una serie di esperimenti e demo live che offrono uno spunto per scoprire e approfondire queste bellissime API. Alcuni degli esperimenti: - applicare un filtro (es: grayscale) ad uno stream video - applicare un effetto audio ad uno stream audio con le Web Audio API - WebRTC over WebSocket
Transcript of WebRTC prove pratiche, esperimenti e curiosità
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
navigator.getUserMedia
TRY
Sandro Paganotti
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
navigator.getUserMedia({'audio':true, 'video':true}, function(stream) { document.querySelector('video').src = URL.createObjectURL(stream); });
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
Video + CSS = Awesome!
TRY
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
<!doctype html><html> <head> <title>Fase2</title> <style> #gray:target ~ video{ -webkit-filter: grayscale(1); } #blur:target ~ video{ -webkit-filter: blur(5px); } </style> </head> <body> <a href="#">Nessuno</a> <a href="#gray" id="gray">Bianco e Nero</a> <a href="#blur" id="blur">Blur</a><br/> <video autoplay width="640" height="480"></video>
<!-- main app --> <script src="js/step1.js"></script> </body></html>
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
WebAudio ? Sure !
TRY
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
MIC
MP3
~
+
JS
OUT
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
<!doctype html><html> <head> <title>Fase3</title> </head> <body>
<video autoplay width="640" height="480"></video><br/> <canvas height="100" width="200"></canvas>
<!-- main app --> <script src="js/step3.js"></script> </body></html>
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
var context = new webkitAudioContext(), analyser = context.createAnalyser(), video = document.querySelector('video'), canvas = document.querySelector('canvas'), ccontext = canvas.getContext('2d');
navigator.getUserMedia( {'audio':true, 'video':true}, function(stream) { video.src = URL.createObjectURL(stream); var source = context.createMediaStreamSource(stream); source.connect(analyser); analyser.connect(context.destination); analyze(); });
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
function analyze(){ window.webkitRequestAnimationFrame(analyze);
var freqByteData = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(freqByteData);
ccontext.clearRect(0,0,200,100);
for(var x=0; x < 10; x++){ ccontext.fillRect(x *20, 100, 20, -freqByteData[x * 100]); }}
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
Chat? VideoChat!
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
ME
CAMMIC CAM MIC
YOU
WS
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
ME
CAMMIC CAM MIC
YOU
WS
SDPSD
P
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
{"sdp":"v=0\r\no=- 1433553217 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video\r\na=msid-semantic: WMS l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tg\r\nm=audio 1 RTP/S [...] 5gsI3Hayo7EcXnA2tg\r\na=ssrc:826050196 label:l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tga0\r\nm=video 1 RTP/SAVP [...] 851724667 label:l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tgv0\r\n","type":"offer"}
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
ME
CAMMIC CAM MIC
YOU
WS
SDPSD
P
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
ME
CAMMIC CAM MIC
YOU
WS
ICEICE
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
ME
CAMMIC CAM MIC
YOU
TRY
CAM e MIC
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiositàfunction inizializza_video() { navigator.getUserMedia( {'audio':true, 'video':true}, function(stream) {
video_locale.src = URL.createObjectURL(stream); peer = new RTCPeerConnection(peer_config); peer.onicecandidate = onIceCandidate; peer.onaddstream = function(event){ video_remoto.src =
URL.createObjectURL(event.stream); };
peer.addStream(stream); if (chiamante) peer.createOffer(sdpcreato,
null, mediaConstraints); } );}
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
// --- invio l'SDP al peer ---
function sdpcreato(sdp) { peer.setLocalDescription(sdp); messaggio_da_inviare(sdp);}
// --- invio il candidato ICE al peer ---
function onIceCandidate(event) { if (event.candidate) { messaggio_da_inviare(event.candidate); } }
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità// --- invio messaggi al websocket ---
function messaggio_da_inviare(msg) { var msgjson = JSON.stringify(msg); ws.send("m:"+ stanza + ":" + chiamante + ":" + msgjson);}
// --- ricezione messaggi dal websocket ---
ws.addEventListener('message', function(evt){ var msg = evt.data; if(parseInt(msg.substr(0,1),10) !== chiamante){ processa(msg.substr(2)); }});
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
function processa(messaggio) { var msg = JSON.parse(messaggio); if (msg.type === 'offer') { peer.setRemoteDescription(
new RTCSessionDescription(msg)); peer.createAnswer(sdpcreato,
null, mediaConstraints); } else if (msg.type === 'answer') { peer.setRemoteDescription(
new RTCSessionDescription(msg)); } else { var candidate = new RTCIceCandidate(msg); peer.addIceCandidate(candidate); }}
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
Tanto tempo fa, in una galassia lontana lontana...
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
VIDEO
CAM
PEER
CANVAS
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
WebRTC + ccv.js
TRY
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
VIDEO
CAM
PEER
CANVAS
CANVAS
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
function face(user){
user.context.drawImage(user.video, 0, 0, user.canvas.width, user.canvas.height); user.back_context.drawImage(user.video, 0, 0, user.back_canvas.width, user.back_canvas.height);
var objects = ccv.detect_objects({ canvas: user.back_canvas, cascade: cascade, interval: 4, min_neighbors: 1 }); if(user.image_coord = objects.pop() || user.image_coord){ user.image.style.opacity = "1"; user.image.style.left = "" + ( user.image_coord.x * 8 ) + "px"; user.image.style.top = "" + ( user.image_coord.y * 8 ) + "px"; user.image.style.width = "" + ( user.image_coord.width * 8 ) + "px"; }}
[email protected] ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
Thanks!(questions?)
codice: http://bit.ly/codice_webrtcslide: http://bit.ly/slide_webrtc
me: [email protected]@sandropaganotti
@compartoweb
