WebRTC działa w Firefoksie, Androidzie i iOS

W ostatnich tygodniach w WebRTC miało miejsce wiele zmian. Czas na aktualizację

Szczególnie cieszy nas, że WebRTC jest dostępny w różnych przeglądarkach i na różnych platformach.

getUserMedia jest teraz dostępna w Chrome bez flag, a także w Opera i Firefox Nightly/Aurora (w tym ostatnim przypadku musisz ustawić ustawienia). Obejrzyj demonstrację getUserMedia w różnych przeglądarkach na stronie simpl.info/gum. Zapoznaj się też z niesamowitymi przykładami Chrisa Wilsona dotyczącymi używania getUserMedia jako danych wejściowych do dźwięku w internetowej.

webkitRTCPeerConnection jest teraz dostępna w stabilnej wersji Chrome i nie wymaga flagi. Obsługa serwera TURN jest dostępna w Chrome 24 i nowszych wersjach. Na stronie simpl.info/pc znajdziesz bardzo proste demo implementacji RTCPeerConnection w Chrome, a na stronie apprtc.appspot.com – świetną aplikację do czatu wideo. (Kilka słów wyjaśnienia na temat nazwy: po kilku iteracjach jest ona obecnie znana jako webkitRTCPeerConnection. Inne nazwy i wdrożenia zostały wycofane. Gdy proces tworzenia standardów zostanie ustabilizowany, prefiks webkit zostanie usunięty.

WebRTC został też zaimplementowany na komputerach w Firefox Nightly i Aurora oraz na iOS i Androidzie za pomocą przeglądarki Bowser firmy Ericsson.

DataChannel

DataChannel to interfejs WebRTC API zapewniający wysoką wydajność, niskie opóźnienia i komunikację peer-to-peer dowolnych danych. Interfejs API jest prosty i podobny do WebSocket, ale komunikacja odbywa się bezpośrednio między przeglądarkami, więc DataChannel może być znacznie szybszy niż WebSocket, nawet jeśli wymagany jest serwer pośredniczący (TURN) (gdy „przebijanie się” przez zapory i NAT nie działa).

Interfejs DataChannel jest planowany do wersji 25 Chrome, ale może nie zostać dodany do tej wersji. Będzie to wersja eksperymentalna, która może nie działać w pełni, a komunikacja nie będzie możliwa w ramach implementacji w Firefoksie. DataChannel w późniejszych wersjach powinien być bardziej stabilny i zostanie zaimplementowany w taki sposób, aby umożliwić interakcję z DataChannel w Firefoksie.

Firefox Nightly/Aurora obsługuje mozGetUserMedia, mozRTCPeerConnectionDataChannel (ale nie zapomnij ustawić ustawień about:config).

Oto zrzut ekranu pokazujący działanie DataChannel w Firefoksie:

Zrzut ekranu z Firefox DataChannel

Ta wersja demonstracyjna jest dostępna pod adresem http://mozilla.github.com/webrtc-landing/data_test.html. Oto fragment kodu:

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

Więcej informacji i demo dotyczące wdrożenia w Firefoksie znajdziesz na blogu hacks.mozilla.org. Podstawowe wsparcie WebRTC zostanie udostępnione w Firefox 18 na początku 2013 r., a dodatkowe funkcje, w tym ograniczenia getUserMedia i createOffer/Answer, a także TURN (aby umożliwić komunikację między przeglądarkami za zaporami ogniowymi), są planowane.

Więcej informacji o WebRTC znajdziesz w artykule Pierwsze kroki z WebRTC. Jest nawet książka o WebRTC, dostępna w wersji drukowanej i w kilku formatach e-booków.

Ograniczenia dotyczące rozdzielczości

Ograniczenia zostały zaimplementowane w Chrome 24 i nowszych wersjach. Można ich używać do ustawiania wartości rozdzielczości wideo w przypadku wywołań getUserMedia() i RTCPeerConnection addStream().

Przykład znajdziesz na stronie simpl.info/getusermedia/constraints. Wypróbuj różne ograniczenia, ustawiając punkt przełamania i zmieniając wartości.

Kilka wskazówek... Ograniczenia getUserMedia ustawione w jednej karcie przeglądarki wpływają na ograniczenia wszystkich kart otwartych później. Ustawienie niedozwolonej wartości ograniczeń powoduje wyświetlenie dość tajemniczego komunikatu o błędzie:

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

Podobnie jest w przypadku próby użycia getUserMedia z lokalnego systemu plików, a nie z serwera.

Przechwytywanie strumieniowego obrazu

Funkcja Przechwytywanie karty jest teraz dostępna w wersji deweloperskiej Chrome. Umożliwia to przechwycenie widocznego obszaru karty jako strumienia, który można następnie wykorzystać lokalnie lub za pomocą addStream() RTCPeerConnection. Jest bardzo przydatna do nagrywania ekranu i udostępniania stron internetowych. Więcej informacji znajdziesz w propozycji dotyczącej rejestrowania treści na kartach w WebRTC.

Bądź na bieżąco, komentując tę aktualizację: chętnie dowiemy się, jak wykorzystujesz te interfejsy API.

...i nie zapomnij zgłosić znalezionych błędów na stronie chromiumbugs.appspot.com.