WebRTC raggiunge Firefox, Android e iOS

Nelle ultime settimane sono successe molte cose con WebRTC. È ora di aggiornare l'app.

In particolare, siamo davvero entusiasti di vedere WebRTC su più browser e piattaforme.

getUserMedia è ora disponibile in Chrome senza flag, nonché in Opera e Firefox Nightly/Aurora (anche se per Firefox dovrai impostare le preferenze). Dai un'occhiata alla demo cross-browser di getUserMedia all'indirizzo simpl.info/gum e guarda gli esempi straordinari di Chris Wilson sull'utilizzo di getUserMedia come input per Web Audio.

webkitRTCPeerConnection è ora disponibile in Chrome Stable e non richiede flag. Il supporto del server TURN è disponibile in Chrome 24 e versioni successive. Puoi trovare una demo ultra-semplice dell'implementazione di RTCPeerConnection di Chrome all'indirizzo simpl.info/pc e un'ottima applicazione di video chat all'indirizzo apprtc.appspot.com. (Una spiegazione sul nome: dopo diverse iterazioni, attualmente è noto come webkitRTCPeerConnection. Altri nomi e implementazioni sono stati ritirati. Quando la procedura di definizione degli standard sarà stabilizzata, il prefisso webkit verrà rimosso.

WebRTC è stato ora implementato anche per i computer in Firefox Nightly e Aurora e per iOS e Android tramite il browser Bowser di Ericsson.

DataChannel

DataChannel è un'API WebRTC per la comunicazione peer-to-peer di dati arbitrari ad alte prestazioni e bassa latenza. L'API è semplice, simile a WebSocket, ma la comunicazione avviene direttamente tra i browser, quindi DataChannel può essere molto più veloce di WebSocket anche se è necessario un server di inoltro (TURN) (quando la "perforazione di un foro" per gestire i firewall e i NAT non va a buon fine).

DataChannel è previsto per la versione 25 di Chrome, dietro un flag, anche se potrebbe non essere presente in questa versione. Sarà solo per la sperimentazione, potrebbe non essere completamente funzionale e la comunicazione non sarà possibile con l'implementazione di Firefox. DataChannel nelle versioni successive dovrebbe essere più stabile e verrà implementato in modo da consentire l'interazione con DataChannel in Firefox.

Firefox Nightly/Aurora supporta mozGetUserMedia, mozRTCPeerConnection e DataChannel (ma non dimenticare di impostare le preferenze di about:config)

Ecco uno screenshot di DataChannel in esecuzione in Firefox:

Screenshot di DataChannel di Firefox

Questa demo è disponibile all'indirizzo http://mozilla.github.com/webrtc-landing/data_test.html. Ecco uno snippet di codice:

pc1.onconnection = function() {
    log("pc1 onConnection ");
    dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
    dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
    log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
    channel = dc1;
    channel.binaryType = "blob";
    log("pc1 new binarytype = " + dc1.binaryType);

    // Since we create the datachannel, don't wait for onDataChannel!
    channel.onmessage = function(evt) {
    if (evt.data instanceof Blob) {
        fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
    } else {
        fancy_log('pc2 said: ' + evt.data, "blue");
    }
    }
    channel.onopen = function() {
    log("pc1 onopen fired for " + channel);
    channel.send("pc1 says Hello...");
    log("pc1 state: " + channel.state);
    }
    channel.onclose = function() {
    log("pc1 onclose fired");
    };
    log("pc1 state:" + channel.readyState);
        }

Ulteriori informazioni e demo per l'implementazione di Firefox sono disponibili sul blog hacks.mozilla.org. Il supporto di base di WebRTC dovrebbe essere rilasciato in Firefox 18 all'inizio del 2013 e è previsto il supporto di funzionalità aggiuntive, tra cui getUserMedia e i vincoli createOffer/Answer, nonché TURN (per consentire la comunicazione tra browser dietro firewall).

Per saperne di più su WebRTC, consulta la Guida introduttiva a WebRTC. Esiste persino un libro su WebRTC, disponibile in formato cartaceo e in diversi formati ebook.

Vincoli di risoluzione

Le limitazioni sono state implementate in Chrome 24 e versioni successive. Questi possono essere utilizzati per impostare i valori per la risoluzione video per le chiamate getUserMedia() e RTCPeerConnection addStream().

Puoi trovare un esempio all'indirizzo simpl.info/getusermedia/constraints. Prova vincoli diversi impostando un punto di interruzione e modificando i valori.

Un paio di aspetti da tenere presente… I vincoli getUserMedia impostati in una scheda del browser influiscono sui vincoli di tutte le schede aperte successivamente. L'impostazione di un valore non consentito per i vincoli genera un messaggio di errore piuttosto criptico:

navigator.getUserMedia error:  NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

Lo stesso errore si verifica se provi a utilizzare getUserMedia dal file system locale, non su un server.

Acquisizione schermo in streaming

La funzionalità di acquisizione di schede è ora disponibile nel canale Chrome Dev. In questo modo è possibile acquisire l'area visibile della scheda come stream, che può essere utilizzato localmente o con addStream() di RTCPeerConnection. Molto utile per lo screencasting e la condivisione di pagine web. Per ulteriori informazioni, consulta la proposta di acquisizione dei contenuti della scheda WebRTC.

Continua a seguirci commentando questo aggiornamento: ci farebbe piacere sapere cosa stai facendo con queste API.

...e non dimenticare di segnalare eventuali bug all'indirizzo chromiumbugs.appspot.com.