一步一步搭建客服系统 (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://localhost:*/*"]
}],
- 加载扩展程序
打开chrome，输入chrome://extensions/ 以打开chrome的扩展程序，按下图的顺序加载：
2 共享桌面
共享桌面方法：
webrtc.shareScreen()
停止共享桌面方法：
webrtc.stopScreenShare()
.
3 本机显示共享的内容
本机显示：
个人觉得本机没必要，在点击时放大共享的内容，所以把上面click事件注释掉了。
移除显示：
.
4 接收桌面共享
接收桌面共享：
其中remotes是一个div，用于放共享桌面和对方视频；当点击小共享桌面图时，最大化：
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
同样地，当对方停止共享时，要移除显示：
5 调试
选中web项目，按F4打开属性面板：
修改SSL Enabled为 True，然后它会自己为你的项目生成一个SSL URL，这时你就可以用https来测试桌面共享了：
点击共享按钮，弹出共享对话框，这可以选择共享整个屏幕还是单个程序：
选中一个共享内容，本机local video 下显示了一个小图：
再看对方，remote video下 也显示了一个小图：
点击这个remote的小图，即可全屏显示对方的桌面共享：
6 发布
6.1 修改 manifest.json 文件，把localhsot修改成服务器上的域名
"content_scripts": [ {
"js": [ "content.js" ],
"matches": [
https://www.gwjg.com:*/*]
}],
6.2 添加SSL证书
因为必须使用https, 一打开就会显示下面的红叉叉：
装了证书后，就会显示正常：
申请SSL证书：
https://buy.wosign.com/free/freessl.html?lan=cn#ssl
在上面网站申请成功并下载证书。解压并把 ‘for iis’目录下的pfx文件复制到服务器上。
打开iis里的服务器证书：
导入证书：
把网站绑定上证书：
一步一步搭建客服系统
.
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
