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

Sam Dutton

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

Vâng... đây là một tính năng mới nữa: 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 đã tạo một tiện ích Chrome thử nghiệm 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à 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 hùng mạnh và thành thật mà nói, đó là một bản minh hoạ mang tính đột phá! Nhưng... đây là bằng chứng về khái niệm và nó hoạt động.

Sau đâ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ó, trong đó src là rtcshare.appspot.com. Trong background.js, iframe này chỉ được dùng để lấy các giá trị như token và room_key. Chúng tôi đã nói với bạn rằng đây là một bản hack :^}! Đây là phiên bản cắt và chuyển kênh của apprtc.appspot.com. Giống 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, background.js sẽ nhận các giá trị từ đó (do ứng dụng rtcshare.appspot.com tạo ra) và gọi chrome.tabCapture.capture() để bắt đầu chụp sự kiệ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. Khi có luồng phát trực tiếp (tức là "video" trực tiếp của thẻ hiện tại), background.js sẽ bắt đầu quy trình kết nối ngang hàng và tín hiệu được thực hiện thông qua rtcshare.appspot.com bằng XHR và Channel API của Google. Nhìn chung, ứng dụng này hoạt động giống như bản minh hoạ apprtc, ngoại trừ luồng video được thông báo cho máy tính 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, bạn có thể mở URL này trên một máy tính khác, ở một nơi khác và ĐÓ có thể là khởi đầu của một điều gì đó hữu ích!

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

Chúng tôi dự kiến sẽ có 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 phát triển này, chúng tôi đã rất ấn tượng với khả năng chụp và chia sẻ thẻ nhanh chóng, ổn định mà không cần trình bổ trợ.

Như mọi khi, chúng tôi luôn hoan nghênh ý kiến phản hồi 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 bạn gặt hái nhiều thành công và mọi điều tốt đẹp nhất trong năm 2013! Trân trọng! Nhóm HTML5R và WebRTC!