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 điều xảy ra với người bạn cũ của chúng tôi là WebRTC.

Và đây là một điểm mới nữa: tính năng chia sẻ màn hình WebRTC.

Đây là video ghi lại chuyển động trên 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à 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 phụ thuộc nhiều vào bản minh hoạ appr.tc mạnh mẽ và nói thẳng ra thì đây là một giải pháp tạm thời! 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 background.js của tiện ích sẽ thêm một iframe vào chính nó, src của iframe này 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 chỉnh sửa của apprtc.appspot.com. Tương tự như ví dụ apprtc, rtcshare.appspot.com cũng được dùng cho ứng dụng khách 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ẽ lấy các giá trị từ iframe đó (do ứng dụng rtcshare.appspot.com tạo) và gọi chrome.tabCapture.capture() để bắt đầu ghi lại một luồng 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 luồng phát trực tiếp có sẵn (nói cách khác, một "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à việc báo hiệu được thực hiện thông qua rtcshare.appspot.com bằng cách sử dụng XHR và API Kênh 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ừ việc luồng video được truyền đến thiết bị 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ể được mở 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ự đoá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 và ngay cả ở giai đoạn phát triển ban đầu này, chúng tôi cũng rất ấn tượng về mức độ phản hồi và tính ổn định của tính năng chia sẻ và ghi lại thẻ mà không cần trình bổ trợ.

Như thường lệ, chúng tôi hoan nghênh ý kiến 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 trên HTML5 Rocks hoặc Hướng dẫn bắt đầu nhanh của chúng tôi.

Chúc bạn có những trải nghiệm thú vị và xin gửi lời chúc tốt đẹp nhất cho năm 2013 từ tất cả mọi người tại HTML5R và WebRTC!