本文介绍了如何在chrome下用webrtc来实现桌面共。因为必要要用https来访问才行，因此也顺带介绍了如何使用SSL证书。

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

        }

    });