WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti
•
0 gostou•681 visualizações
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
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de Codemotion
Mais de Codemotion (20)
WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti
- 1. sandro.paganotti@compartoweb.com - Comparto Web Sandro Paganotti WebRTC: prove pratiche, esperimenti e curiosità
- 2. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità navigator.getUserMedia TRY
- 3. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità navigator.getUserMedia({'audio':true, 'video':true}, function(stream) { document.querySelector('video').src = URL.createObjectURL(stream); } );
- 4. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità Video + CSS = Awesome! TRY
- 5. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità WebAudio ? Sure ! TRY
- 7. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità MIC MP3 ~ + JS OUT
- 8. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità Chat? VideoChat!
- 12. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità ME CAMMIC CAM MIC YOU WS
- 13. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità ME CAMMIC CAM MIC YOU WS SDP SDP
- 14. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità {"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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità ME CAMMIC CAM MIC YOU WS SDP SDP
- 16. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità ME CAMMIC CAM MIC YOU WS ICE ICE
- 17. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità ME CAMMIC CAM MIC YOU TRY CAM e MIC
- 18. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità // --- 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità Tanto tempo fa, in una galassia lontana lontana...
- 23. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità VIDEO CAM PEER CANVAS
- 24. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità WebRTC + ccv.js TRY
- 25. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità VIDEO CAM PEER CANVAS CANVAS
- 26. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC 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. sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti WebRTC prove pratiche, esperimenti e curiosità Thanks! (questions?) codice: http://bit.ly/codice_webrtc slide: http://bit.ly/slide_webrtc me: sandro.paganotti@compartoweb.com @sandropaganotti @compartoweb