sandro.paganotti@compartoweb.com - Comparto WebSandro PaganottiWebRTC: prove pratiche, esperimenti e curiosità
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositànavigator.get...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositànavigator.get...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàVideo + CSS =...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità<!doctype htm...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàWebAudio ? Su...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMICMP3~+JSOUT
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità<!doctype htm...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàvar context =...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàfunction anal...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàChat? VideoCh...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità{"sdp":"v=0rn...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàfunction iniz...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità// --- invio ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità// --- invio ...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàfunction proc...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàTanto tempo f...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàVIDEOCAMPEERC...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàWebRTC + ccv....
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàVIDEOCAMPEERC...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàfunction face...
sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàThanks!(quest...
Upcoming SlideShare
Loading in …5
×

WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti

558 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, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
558
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti

  1. 1. sandro.paganotti@compartoweb.com - Comparto WebSandro PaganottiWebRTC: prove pratiche, esperimenti e curiosità
  2. 2. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositànavigator.getUserMediaTRY
  3. 3. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositànavigator.getUserMedia({audio:true,video:true},function(stream) {document.querySelector(video).src =URL.createObjectURL(stream);});
  4. 4. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàVideo + CSS = Awesome!TRY
  5. 5. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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>
  6. 6. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàWebAudio ? Sure !TRY
  7. 7. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMICMP3~+JSOUT
  8. 8. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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>
  9. 9. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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();});
  10. 10. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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]);}}
  11. 11. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàChat? VideoChat!
  12. 12. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM MICYOUWS
  13. 13. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM MICYOUWSSDPSDP
  14. 14. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità{"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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM MICYOUWSSDPSDP
  16. 16. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM MICYOUWSICEICE
  17. 17. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàMECAMMIC CAM MICYOUTRYCAM e MIC
  18. 18. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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);});}
  19. 19. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiosità// --- 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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));}});
  21. 21. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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);}}
  22. 22. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàTanto tempo fa, in unagalassia lontanalontana...
  23. 23. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàVIDEOCAMPEERCANVAS
  24. 24. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàWebRTC + ccv.jsTRY
  25. 25. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàVIDEOCAMPEERCANVASCANVAS
  26. 26. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC 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";}}
  27. 27. sandro.paganotti@compartoweb.com ~ Comparto WebSandro PaganottiWebRTC prove pratiche, esperimenti e curiositàThanks!(questions?)codice: http://bit.ly/codice_webrtcslide: http://bit.ly/slide_webrtcme: sandro.paganotti@compartoweb.com@sandropaganotti@compartoweb

×