Chia sẻ màn hình bằng WebRTC

Sam Dutton

Twitter GitHub Sự cố Bảng tin Trang chủ

Như chúng tôi đã báo cáo tuần trước, gần đây đã có rất nhiều sự việc xảy ra với người bạn cũ của chúng tôi là WebRTC.

Chà... sau đây là một câu hỏi đầu tiên khác: Chia sẻ màn hình WebRTC.

Sau đây là bản ghi màn hình: youtube.com/watch?v=tD0QtBUZsF4

Và đây là mã: github.com/samdutton/rtcshare

Về cơ bản, chúng tôi đã xây dựng một tiện ích thử nghiệm của Chrome sử dụng RTCPeerConnection và chrome.tabCapture để chia sẻ 'video' trực tiếp của một thẻ trình duyệt. Nếu muốn dùng thử, bạn cần có Chrome Canary và cần bật API tiện ích thử nghiệm trên trang about:flags.

Nguyên mẫu của chúng tôi chủ yếu dựa vào bản minh hoạ appr.tc mạnh mẽ và thành thật mà nói, đó là một bước đột phá! Nhưng... đó là bằng chứng về khái niệm và cách này rất hiệu quả.

Dưới đây là cách chúng tôi thực hiện:

1. Khi người dùng nhấp vào biểu tượng tiện ích ('nút ghi' bên cạnh thanh địa chỉ), tập lệnh nền của tiện ích background.js, sẽ thêm một iframe vào chính nó, src trong số đó là rtcshare.appspot.com. Trong background.js, nó chỉ được dùng để nhận các giá trị như token và room_key. Chúng tôi đã thông báo với bạn rằng đây là hành vi tấn công :^}! Đây là phiên bản apprtc.appspot.com được chia nhỏ và phân kênh. Tương tự như ví dụ về apprtc, rtcshare.appspot.com cũng được dùng cho ứng dụng từ xa.

chrome.browserAction.onClicked.addListener(function(tab) {
    var currentMode = localStorage["capturing"];
    var newMode = currentMode === "on" ? "off" : "on";

    if (newMode === "on"){ // start capture
        appendIframe();
    } else { // stop capture
        chrome.tabs.getSelected(null, function(tab){
            localStream.stop();
            onRemoteHangup();
        });
        // set icon, localStorage, etc.
    }
}

1. Khi iframe tải xong, background.js sẽ nhận được các giá trị từ đó (do ứng dụng rtcshare.appspot.com tạo) và gọi chrome.tabCapture.capture() để bắt đầu ghi lại phiên phát trực tiếp của thẻ hiện tại.

function appendIframe(){
    iframe = document.createElement("iframe");
    iframe.src="https://rtcshare.appspot.com";
    document.body.appendChild(iframe);
    iframe.onload = function(){
        iframe.contentWindow.postMessage("sendConfig", "*");
    };
}

// serialised config object messaged by iframe when it loads

window.addEventListener("message", function(event) {
    if (event.origin !== "https://rtcshare.appspot.com"){
        return;
    }
    var config = JSON.parse(event.data);
    room_link = config.room_link; // the remote peer URL
    token = config.token; // for messaging via Channel API
    // more parameter set from config
);

function startCapture(){
    chrome.tabs.getSelected(null, function(tab) {
        var selectedTabId = tab.id;
        chrome.tabCapture.capture({audio:true, video:true}, handleCapture); // bingo!
    });
}

1. Sau khi có sự kiện phát trực tiếp (nói cách khác là một "video" trực tiếp trong thẻ hiện tại), background.js sẽ bắt đầu quá trình kết nối ngang hàng và việc truyền tín hiệu được thực hiện thông qua rtcshare.appspot.com bằng XHR và API channel của Google. Nói chung, ứng dụng này hoạt động giống như bản minh hoạ apprtc, ngoại trừ việc luồng video được truyền đến ứng dụng ngang hàng từ xa là từ chrome.tabCapture chứ không phải getUserMedia().

function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}

1. Để minh hoạ, tiện ích nguyên mẫu này sẽ mở một thẻ mới có URL do rtcshare.appspot.com cung cấp, trong đó có thêm chuỗi truy vấn "số phòng". Tất nhiên, URL này có thể mở trên một máy tính khác, ở một nơi khác và đó có thể là điểm khởi đầu cho một nội dung hữu ích!

chrome.tabs.create({url: room_link});

Chúng tôi dự định rất nhiều trường hợp sử dụng thú vị cho tính năng chia sẻ màn hình. Ngay cả ở giai đoạn đầu của quá trình phát triển, chúng tôi vẫn rất ấn tượng với khả năng chụp và chia sẻ thẻ ổn định và thích ứng mà không cần trình bổ trợ.

Chúng tôi luôn hoan nghênh các nhận xét của bạn: về tiện ích này và về các API WebRTC nói chung. Nếu bạn muốn tìm hiểu thêm về WebRTC, hãy xem bài viết về HTML5 Rocks hoặc Hướng dẫn bắt đầu nhanh của chúng tôi.

Chúc mừng các bạn tại HTML5R và WebRTC, và chúc bạn có những điều tốt đẹp nhất trong năm 2013!