WebRTC truy cập vào Firefox, Android và iOS

Đã có rất nhiều sự cố với WebRTC trong vài tuần qua. Đã đến lúc cập nhật!

Đặc biệt, chúng tôi thực sự rất vui khi thấy WebRTC xuất hiện trên nhiều trình duyệt và nền tảng.

getUserMedia hiện có trong Chrome mà không cần cờ, cũng như Opera và Firefox Nightly/Aurora (tuy nhiên, đối với Firefox, bạn sẽ cần đặt lựa chọn ưu tiên). Xem bản minh hoạ trên nhiều trình duyệt của getUserMedia tại simpl.info/gum – và xem các ví dụ tuyệt vời của Chris Wilson về việc sử dụng getUserMedia làm dữ liệu đầu vào cho Âm thanh web.

webkitRTCPeerConnection hiện đã có trong Chrome phiên bản ổn định và không có cờ. Dịch vụ hỗ trợ máy chủ TURN có trong Chrome 24 trở lên. Có một bản minh hoạ cực kỳ đơn giản về việc triển khai RTCPeerConnection của Chrome tại simpl.info/pc và một ứng dụng trò chuyện video tuyệt vời tại apprtc.appspot.com. (Lời giải thích về tên này: sau nhiều lần lặp lại, tên này hiện được gọi là webkitRTCPeerConnection. Các tên và cách triển khai khác không được dùng nữa. Khi quy trình tiêu chuẩn đã ổn định, tiền tố webkit sẽ bị xoá.)

Hiện tại, chúng tôi cũng đã triển khai WebRTC cho máy tính trên Firefox Nightly và Aurora, cũng như cho iOS và Android qua trình duyệt Bowser của7.

DataChannel

DataChannel là một API WebRTC cho hiệu suất cao, độ trễ thấp và giao tiếp ngang hàng về dữ liệu tuỳ ý. API đơn giản-tương tự như WebSocket - nhưng giao tiếp diễn ra trực tiếp giữa các trình duyệt, vì vậy DataChannel có thể nhanh hơn nhiều so với WebSocket ngay cả khi cần có máy chủ chuyển tiếp (TURN) (khi " lỗ hổng" để đối phó với tường lửa và NAT không thành công).

DataChannel được lên kế hoạch cho phiên bản 25 của Chrome, có cờ - mặc dù nó có thể bỏ lỡ phiên bản này. Việc này chỉ dành cho mục đích thử nghiệm, có thể không hoạt động đầy đủ và bạn sẽ không thể giao tiếp khi triển khai Firefox. DataChannel trong các phiên bản sau này phải ổn định hơn và sẽ được triển khai để cho phép tương tác với DataChannel trong Firefox.

Firefox Nightly/Aurora hỗ trợ mozGetUserMedia, mozRTCPeerConnectionDataChannel (nhưng đừng quên đặt các tuỳ chọn about:config!)

Dưới đây là ảnh chụp màn hình DataChannel chạy trong Firefox:

Ảnh chụp màn hình Firefox DataChannel

Bản minh hoạ này được lưu trữ tại http://mozilla.github.com/webrtc-landing/data_test.html. Dưới đây là đoạn mã:

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

Bạn có thể xem thêm thông tin và bản minh hoạ về việc triển khai Firefox trên blog The tặng.0t.org. Dịch vụ hỗ trợ WebRTC cơ bản dự kiến sẽ ra mắt trên Firefox 18 vào đầu năm 2013. Chúng tôi dự định hỗ trợ thêm các tính năng bổ sung bao gồm getUserMedia và các quy tắc ràng buộc createOffer/Answer cũng như TURN (để cho phép giao tiếp giữa các trình duyệt sau tường lửa).

Để biết thêm thông tin về WebRTC, hãy xem phần Bắt đầu sử dụng WebRTC. Thậm chí còn có sách WebRTC, có thể in và một số định dạng sách điện tử.

Giới hạn giải quyết

Chúng tôi đã triển khai quy tắc ràng buộc trong Chrome 24 trở lên. Bạn có thể dùng các lớp này để đặt giá trị về độ phân giải video cho các lệnh gọi getUserMedia() và RTCPeerConnection addStream().

Bạn có thể tham khảo một ví dụ tại simpl.info/getusermedia/limitts. Hãy thử nghiệm nhiều quy tắc ràng buộc bằng cách đặt một điểm ngắt và tinh chỉnh các giá trị.

Một vài vấn đề cần lưu ý... Các điều kiện ràng buộc của getUserMedia được thiết lập trong một thẻ trình duyệt sẽ ảnh hưởng đến các điều kiện ràng buộc cho tất cả các thẻ được mở sau đó. Việc đặt giá trị không được phép cho các điều kiện ràng buộc sẽ đưa ra một thông báo lỗi khá khó hiểu:

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

Tương tự, lỗi nếu bạn cố sử dụng getUserMedia từ hệ thống tệp cục bộ chứ không phải trên máy chủ!

Chụp ảnh màn hình khi phát trực tuyến

Tính năng Chụp thẻ hiện đã có trong kênh Chrome Dev. Điều này giúp bạn có thể thu thập vùng hiển thị của thẻ dưới dạng luồng mà sau đó có thể được sử dụng cục bộ hoặc với addStream() của RTCPeerConnection. Rất hữu ích cho việc dò tìm và chia sẻ trang web. Để biết thêm thông tin, hãy xem đề xuất Ghi lại nội dung thẻ WebP.

Hãy cập nhật thông tin cho chúng tôi bằng cách nhận xét về bản cập nhật này: chúng tôi rất mong được biết những gì bạn sẽ làm với các API này.

...và đừng quên gửi bất kỳ lỗi nào bạn gặp phải tại chromiumbugs.appspot.com!