WebRTC prove pratiche, esperimenti e curiosità
Report
Comparto WebFollow
Mar. 31, 2013•0 likes•1,280 views
WebRTC prove pratiche, esperimenti e curiosità
Mar. 31, 2013•0 likes•1,280 views
Download to read offline
Report
Technology
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
Comparto WebFollow
Recommended
CSS3 TechniquesComparto Web
HTML5 LiveSandro Paganotti
How create a single page apps using html5 and javascript Stefano Marchisio
Monitoraggio della rete con cactidalegiuseppe
PanoView: una piattaforma per la realtà virtuale basata su WordPressINGEGNI MULTIMEDIALI
SkyMedia: La tecnologia al servizio dell'intrattenimentoMavigex srl
More Related Content
Similar to WebRTC prove pratiche, esperimenti e curiosità
Dominare il codice legacyTommaso Torti
Yagwtomaraexception
Alessandro Forte - ASP.NET per il client WebAlessandro Forte
Swagger per tuttiNicolò Carandini
Alessandro Forte - Realizzare controlli Ajax in ASP.NetAlessandro Forte
HTML5Raffaele Fanizzi
WebRTC prove pratiche, esperimenti e curiosità
- 1. Sandro Paganotti WebRTC: prove pratiche, esperimenti e curiosità sandro.paganotti@compartoweb.com - Comparto Web
- 2. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web navigator.getUserMedia TRY
- 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. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Video + CSS = Awesome! TRY
- 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. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web WebAudio ? Sure ! TRY
- 7. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MP3 MIC + OUT ~ JS
- 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. 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. 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. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Chat? VideoChat!
- 12. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web MIC CAM CAM MIC ME YOU WS
- 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. 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. 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. 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. 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. 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. 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. // --- 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. 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. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web Tanto tempo fa, in una galassia lontana lontana...
- 23. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web PEER VIDEO CANVAS CAM
- 24. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web WebRTC + ccv.js TRY
- 25. WebRTC prove pratiche, esperimenti e curiosità Sandro Paganotti sandro.paganotti@compartoweb.com ~ Comparto Web CANVAS PEER VIDEO CAM CANVAS
- 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. 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