Successfully reported this slideshow.
Your SlideShare is downloading. ×

WebRTC prove pratiche, esperimenti e curiosità

WebRTC prove pratiche, esperimenti e curiosità

Download to read offline

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

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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

WebRTC prove pratiche, esperimenti e curiosità

  1. 1. Sandro Paganotti WebRTC: prove pratiche, esperimenti e curiosità sandro.paganotti@compartoweb.com - Comparto Web
  2. 2. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web navigator.getUserMedia TRY
  3. 3. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web navigator.getUserMedia({'audio':true, 'video':true}, function(stream) { document.querySelector('video').src = URL.createObjectURL(stream); } );
  4. 4. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Video + CSS = Awesome! TRY
  5. 5. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web <!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>
  6. 6. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web WebAudio ? Sure ! TRY
  7. 7. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MP3 MIC + OUT ~ JS
  8. 8. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web <!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>
  9. 9. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web 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(); } );
  10. 10. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web 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]); } }
  11. 11. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Chat? VideoChat!
  12. 12. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MIC CAM CAM MIC ME YOU WS
  13. 13. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MIC CAM CAM MIC ME YOU SD P D P S WS
  14. 14. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web {"sdp":"v=0rno=- 1433553217 2 IN IP4 127.0.0.1rns=-rnt=0 0r na=group:BUNDLE audio videorna=msid- semantic: WMS l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tgr nm=audio 1 RTP/S [...] 5gsI3Hayo7EcXnA2tgrna=ssrc:826050196 label:l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2 tga0rnm=video 1 RTP/SAVP [...] 851724667 label:l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2 tgv0rn","type":"offer"}
  15. 15. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MIC CAM CAM MIC ME YOU SD P D P S WS
  16. 16. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MIC CAM CAM MIC ME YOU ICE C E I WS
  17. 17. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MIC CAM CAM MIC ME CAM e MIC YOU TRY
  18. 18. function inizializza_video() { WebRTC prove pratiche, esperimenti e curiosità navigator.getUserMedia( {'audio':true, 'video':true}, Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web 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); } ); }
  19. 19. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web // --- 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); } }
  20. 20. // --- invio messaggi al websocket --- curiosità WebRTC prove pratiche, esperimenti e Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web 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)); } });
  21. 21. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web 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); } }
  22. 22. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Tanto tempo fa, in una galassia lontana lontana...
  23. 23. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web PEER VIDEO CANVAS CAM
  24. 24. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web WebRTC + ccv.js TRY
  25. 25. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web CANVAS PEER VIDEO CAM CANVAS
  26. 26. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web 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"; } }
  27. 27. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Thanks! (questions?) codice: http://bit.ly/codice_webrtc slide: http://bit.ly/slide_webrtc me: sandro.paganotti@compartoweb.com @sandropaganotti @compartoweb

×