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,018 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,018
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×