Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sandro PaganottiWebRTC: prove pratiche, esperimenti e curiositàsandro.paganotti@compartoweb.com - Comparto Web
WebRTC prove pratiche, esperimenti e curiosità    Sandro Paganotti         sandro.paganotti@compartoweb.com ~ Comparto Web...
WebRTC prove pratiche, esperimenti e curiosità          Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto We...
WebRTC prove pratiche, esperimenti e curiosità    Sandro Paganotti         sandro.paganotti@compartoweb.com ~ Comparto Web...
WebRTC prove pratiche, esperimenti e curiosità                Sandro Paganotti     sandro.paganotti@compartoweb.com ~ Comp...
WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti         sandro.paganotti@compartoweb.com ~ Comparto WebWeb...
WebRTC prove pratiche, esperimenti e curiosità      Sandro Paganotti       sandro.paganotti@compartoweb.com ~ Comparto Web...
WebRTC prove pratiche, esperimenti e curiosità               Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Compar...
WebRTC prove pratiche, esperimenti e curiosità               Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Compar...
WebRTC prove pratiche, esperimenti e curiosità              Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Compart...
WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto WebChat? Vi...
WebRTC prove pratiche, esperimenti e curiosità            Sandro Paganotti        sandro.paganotti@compartoweb.com ~ Compa...
WebRTC prove pratiche, esperimenti e curiosità            Sandro Paganotti        sandro.paganotti@compartoweb.com ~ Compa...
WebRTC prove pratiche, esperimenti e curiosità          Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto We...
WebRTC prove pratiche, esperimenti e curiosità            Sandro Paganotti        sandro.paganotti@compartoweb.com ~ Compa...
WebRTC prove pratiche, esperimenti e curiosità            Sandro Paganotti        sandro.paganotti@compartoweb.com ~ Compa...
WebRTC prove pratiche, esperimenti e curiosità            Sandro Paganotti         sandro.paganotti@compartoweb.com ~ Comp...
function inizializza_video() {               WebRTC prove pratiche, esperimenti e curiosità  navigator.getUserMedia( {audi...
WebRTC prove pratiche, esperimenti e curiosità            Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto ...
// --- invio messaggi al websocket --- curiosità             WebRTC prove pratiche, esperimenti e              Sandro Paga...
WebRTC prove pratiche, esperimenti e curiosità             Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto...
WebRTC prove pratiche, esperimenti e curiosità     Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto WebTant...
WebRTC prove pratiche, esperimenti e curiosità       Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto WebPE...
WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti         sandro.paganotti@compartoweb.com ~ Comparto WebWeb...
WebRTC prove pratiche, esperimenti e curiosità       Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto Web  ...
WebRTC prove pratiche, esperimenti e curiosità                    Sandro Paganotti     sandro.paganotti@compartoweb.com ~ ...
WebRTC prove pratiche, esperimenti e curiosità        Sandro Paganotti    sandro.paganotti@compartoweb.com ~ Comparto Web ...
Upcoming SlideShare
Loading in …5
×

WebRTC prove pratiche, esperimenti e curiosità

1,208 views

Published on

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

Published in: Technology
  • Be the first to comment

WebRTC prove pratiche, esperimenti e curiosità

  1. 1. Sandro PaganottiWebRTC: 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 Webnavigator.getUserMedia TRY
  3. 3. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Webnavigator.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 WebVideo + 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 WebWebAudio ? Sure ! TRY
  7. 7. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MP3MIC + 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 Webvar 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 Webfunction 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 WebChat? VideoChat!
  12. 12. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebMIC CAM CAM MICME YOU WS
  13. 13. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebMIC CAM CAM MICME 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 IP4127.0.0.1rns=-rnt=0 0rna=group:BUNDLE audio videorna=msid-semantic: WMSl9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tgrnm=audio 1 RTP/S [...]5gsI3Hayo7EcXnA2tgrna=ssrc:826050196label:l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tga0rnm=video 1 RTP/SAVP [...]851724667label:l9pWuRVkXi0ixDPbRw5gsI3Hayo7EcXnA2tgv0rn","type":"offer"}
  15. 15. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebMIC CAM CAM MICME YOU SD P D P S WS
  16. 16. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebMIC CAM CAM MICME YOU ICE C E I WS
  17. 17. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebMIC CAM CAM MICME 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 lSDP 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 Webfunction 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 Webfunction 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 WebTanto tempo fa, in unagalassia lontanalontana...
  23. 23. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebPEER VIDEO CANVASCAM
  24. 24. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto WebWebRTC + ccv.js TRY
  25. 25. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web CANVASPEER VIDEOCAM CANVAS
  26. 26. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Webfunction 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_webrtcme: sandro.paganotti@compartoweb.com @sandropaganotti @compartoweb

×