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