一步一步搭建客服系统 (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()
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
.
3 本机显示共享的内容
本机显示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
个人觉得本机没必要,在点击时放大共享的内容,所以把上面click事件注释掉了。
移除显示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
.
4 接收桌面共享
接收桌面共享:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
其中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();
}
}
同样地,当对方停止共享时,要移除显示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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里的服务器证书:
导入证书:
把网站绑定上证书:
一步一步搭建客服系统
.
相关文章
- Chrome 4周岁 时光机带你穿越
- Mouse Stroke——Chrome鼠标手势扩展
- [PWA] Add Push Notifications to a PWA with React in Chrome and on Android
- chrome插件开发之调试
- 如何使用Chrome command API查找SAP Spartacus的router-outlet
- 利用Chrome开发者工具分析C4C Opportunity搜索的前端性能
- JS 回车提交,兼容IE、火狐、Opera、Chrome、Safari……
- SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
- SAP ABAP关键字在Chrome浏览器里高亮显示的实现原理 - How is ABAP keyword highlight implemented in Chrome
- 利用chrome的Timeline观测系统的内存回收逻辑
- 如何用Chrome自带的截屏功能截取超过一个屏幕的网页
- Chrome开发者工具一个有用的快捷键组合:Ctrl+Shift+E
- 15个你不得不知道的Chrome dev tools的小技巧
- chrome cdp (Chrome DevTools Protocol) 入门实操
- chrome常用启动参数