本文介绍了如何在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的扩展程序,按下图的顺序加载:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921104507444-53499989.png)
2 共享桌面
共享桌面方法:
webrtc.shareScreen()
停止共享桌面方法:
webrtc.stopScreenShare()
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
//// 桌面共享
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 本机显示共享的内容
本机显示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
// 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事件注释掉了。
移除显示:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
// local screen removed
webrtc.on('localScreenRemoved', function (video) {
document.getElementById('localScreenContainer').removeChild(video);
$('#localScreenContainer').hide();
});
.
4 接收桌面共享
接收桌面共享:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
// 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,用于放共享桌面和对方视频;当点击小共享桌面图时,最大化:
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)
// 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);
}
});
5 调试
选中web项目,按F4打开属性面板:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103130006-2129406104.png)
修改SSL Enabled为 True,然后它会自己为你的项目生成一个SSL URL,这时你就可以用https来测试桌面共享了:
点击共享按钮,弹出共享对话框,这可以选择共享整个屏幕还是单个程序:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103131350-454100385.png)
选中一个共享内容,本机local video 下显示了一个小图:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103133459-559585326.png)
再看对方,remote video下 也显示了一个小图:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103136178-1343043664.png)
点击这个remote的小图,即可全屏显示对方的桌面共享:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103141444-2039719318.png)
6 发布
6.1 修改 manifest.json 文件,把localhsot修改成服务器上的域名
"content_scripts": [ {
"js": [ "content.js" ],
"matches": [ https://www.gwjg.com:*/* ]
}],
6.2 添加SSL证书
因为必须使用https, 一打开就会显示下面的红叉叉:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103143240-2080682418.png)
装了证书后,就会显示正常:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103145365-1814794435.png)
申请SSL证书:
https://buy.wosign.com/free/freessl.html?lan=cn#ssl
在上面网站申请成功并下载证书。解压并把 ‘for iis’目录下的pfx文件复制到服务器上。
打开iis里的服务器证书:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103148756-1882507697.png)
导入证书:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103150287-1166141399.png)
把网站绑定上证书:
![image image](https://images2015.cnblogs.com/blog/24053/201509/24053-20150921103151444-1374705763.png)
.