1 chrome擴展程序

先下載擴展程序示例：

https://github.com/otalk/getScreenMedia/tree/master/chrome-extension-sample

或 http://yunpan.cn/cHfwnrZcG2hsH 訪問密碼 1cf9

打開 manifest.json 文件，修改下面的內容：

"content_scripts": [ {
"js": [ "content.js" ],
"matches": [ "https://16.157.135.85:*/*" ]
}],
"externally_connectable": {
"matches": [
"https://16.157.135.85/*"
]
}

加載擴展程序

打開chrome，輸入 chrome://extensions/ 以打開chrome的擴展程序，按下圖的順序加載：

2 共享桌面

共享桌面方法：

webrtc.shareScreen()

停止共享桌面方法：

webrtc.stopScreenShare()

//// 桌面共享
var button = document.getElementById('screenShareButton'),
            setButton = function (bool) {
                //button.innerText = bool ? 'share screen' : 'stop sharing';
                $('#screenShareButton').attr('value', bool ? 'Share Screen' : 'Stop Sharing');
            };


setButton(true);

function screenShare() {
    if (webrtc.getLocalScreen()) {
        webrtc.stopScreenShare();
        setButton(true);
    } else {
        webrtc.shareScreen(function (err) {
            if (err) {
                setButton(true);
            } else {
                setButton(false);
            }
        });
    }
}

3 本機顯示共享的內容

本機顯示：

// local screen obtained
    webrtc.on('localScreenAdded', function (video) {
        //video.onclick = function () {
        // video.style.width = video.videoWidth + 'px';
        // video.style.height = video.videoHeight + 'px';
        //};
        video.className = 'localVideo';
        document.getElementById('localScreenContainer').appendChild(video);
        $('#localScreenContainer').show();
    });

個人覺得本機沒必要，在點擊時放大共享的內容，所以把上面click事件注釋掉了。

移除顯示：

// local screen removed
    webrtc.on('localScreenRemoved', function (video) {
        document.getElementById('localScreenContainer').removeChild(video);
        $('#localScreenContainer').hide();
    });

4 接收桌面共享

接收桌面共享：

// a peer video has been added
    webrtc.on('videoAdded', function (video, peer) {
        console.log('video added', peer);
        var remotes = document.getElementById('remotes');
        if (remotes) {
            var container = document.createElement('div');
            //container.className = 'videoContainer';
            container.id = 'container_' + webrtc.getDomId(peer);
            container.appendChild(video);

            // suppress contextmenu
            video.oncontextmenu = function () { return false; };
            video.className = 'remoteVideos';

            // resize the video on click
            video.onclick = function () {
                launchFullscreen(video); 
            };

            // show the ice connection state
            if (peer && peer.pc) {
                var connstate = document.createElement('div');
                connstate.className = 'connectionstate';
                container.appendChild(connstate);
                peer.pc.on('iceConnectionStateChange', function (event) {
                    switch (peer.pc.iceConnectionState) {
                        case 'checking':
                            //connstate.innerText = 'Connecting to peer...';
                            break;
                        case 'connected':
                        case 'completed': // on caller side
                            //$(vol).show();
                            //connstate.innerText = 'Connection established.';
                            break;
                        case 'disconnected':
                            //connstate.innerText = 'Disconnected.';
                            break;
                        case 'failed':
                            //connstate.innerText = 'Connection failed.';
                            break;
                        case 'closed':
                            //connstate.innerText = 'Connection closed.';
                            break;
                    }
                });
            }
            remotes.appendChild(container);
        }
    });

其中remotes是一個div，用於放共享桌面和對方視頻；當點擊小共享桌面圖時，最大化：

同樣地，當對方停止共享時，要移除顯示：

 // a peer was removed
    webrtc.on('videoRemoved', function (video, peer) {
        console.log('video removed ', peer);
        var remotes = document.getElementById('remotes');
        var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');
        if (remotes && el) {
            remotes.removeChild(el);
        }
    });