WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti

sandro.paganotti@compartoweb.com - Comparto Web
Sandro Paganotti
WebRTC: prove pratiche, esperimenti e curiosità

sandro.paganotti@compartoweb.com ~ Comparto WebSandro Paganotti
WebRTC prove pratiche, esperimenti e curiosità
navigator.getUserMedia
TRY

navigator.getUserMedia({'audio':true,
'video':true},
function(stream) {
document.querySelector('video').src =
URL.createObjectURL(stream);
}
);

Video + CSS = Awesome!
TRY

<!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>

<script src="js/step1.js"></script>
</body>
</html>

WebAudio ? Sure !
TRY

MIC
MP3
~
+
JS
OUT

<!doctype html>
<html>
<head>
<title>Fase3</title>
</head>
<body>
<video autoplay width="640" height="480"></video><br/>
<canvas height="100" width="200"></canvas>

<script src="js/step3.js"></script>
</body>
</html>

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();
}
);

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]);
}
}

Chat? VideoChat!

ME
CAMMIC CAM MIC
YOU
WS

ME
CAMMIC CAM MIC
YOU
WS
SDP
SDP

{"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"}

ME
CAMMIC CAM MIC
YOU
WS
ICE
ICE

ME
CAMMIC CAM MIC
YOU
TRY
CAM e MIC

// --- 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);
}
}

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));
}
});

Tanto tempo fa, in una
galassia lontana
lontana...

VIDEO
CAM
PEER
CANVAS

WebRTC + ccv.js
TRY

VIDEO
CAM
PEER
CANVAS
CANVAS

Thanks!
(questions?)
codice: http://bit.ly/codice_webrtc
slide: http://bit.ly/slide_webrtc
me: sandro.paganotti@compartoweb.com
@sandropaganotti
@compartoweb

WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Codemotion

Mehr von Codemotion (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

WebRTC prove pratiche, esperimenti e curiosità by Sandro Paganotti