WebRTC prove pratiche, esperimenti e curiosità

Sandro Paganotti
WebRTC: 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

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


MP3

MIC + OUT

~ JS

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


MIC CAM CAM MIC

ME YOU

WS


MIC CAM CAM MIC

ME YOU

SD
P D P
S
WS


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


MIC CAM CAM MIC

ME YOU

ICE
C E
I
WS


MIC CAM CAM MIC

ME
CAM e MIC YOU

TRY


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

// --- invio messaggi al websocket --- curiosità
WebRTC prove pratiche, esperimenti e

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


PEER

VIDEO CANVAS

CAM


WebRTC + ccv.js

TRY


CANVAS
PEER

VIDEO

CAM 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à

More Related Content

Featured

WebRTC prove pratiche, esperimenti e curiosità