一步一步搭建客服系统 (6) chrome桌面共享

本文介绍了如何在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);
        }
    });