基于浏览器 webrtc的PC屏幕共享

         https://www.html5rocks.com/en/tutorials/webrtc/basics/

         从官方介绍可知,webrtc不仅可提供以摄像头为源的视频通讯功能,也能进行主机的screensharing,但目前支持webrtc的浏览器,无法直接截取主机屏幕,故无法使用此功能,需要插件支持才能实现屏幕截取共享功能,这里就介绍如何使用chrome浏览器进行屏幕共享。

1,  首先支持webrtc的chrome浏览器需要扩展插件,chrome官方提供的插件由于里面配置信息问题,无法使用,可下载经修改后的插件安装包http://download.csdn.net/download/yunjinwang/10167051。可参考https://github.com/webrtc/samples/tree/gh-pages/src/content/extensions/desktopcapture;

2,  下载后,在chrome浏览器中加载此插件,“设置”->更多工具->扩展程序,在页面选中“开发者模式”,点击“加载已解压的扩展程序”,浏览到前面下载的插件解压后的目录最后一层desktopCapture_chrome_plugin,确定加载后就在“扩展程序”下面看到已加载screenCapturing插件,至此,插件安装完成;

基于浏览器 webrtc的PC屏幕共享_第1张图片

3,  需要有服务端的支持,假如系统环境是ubuntu 14.04,其它环境依赖请参考前面http://blog.csdn.net/yunjinwang/article/details/78330315的环境配置,起码的安装npm和node相关的工具。环境安装配置OK后,将压缩包里的screen_test_server拷贝到服务器上,在screen_test_server目录下执行node server.js能正常运行即可;

4,  在chrome浏览器地址栏输入:https://XXX.XXX.XXX.XXX:8081,其中的XXX为前面搭建的服务器IP地址。正常的话就会打开一个页面,如下图,并弹出一个选择对方框,“您的整个屏幕”是指整个显示屏,我这里由于是双显示器,所以显示两个屏幕;“应用窗口”是指当前打开的应用程序的窗口,可以选择某一应用程序的窗口作为分享源,点击要分享的对象后,“分享”,即可在浏览器页面显示分享图像,页面上显示的”当前用户ID”是由服务端随机分配的唯一ID,如图显示为100;

5,  在另外一个浏览器或者TAB页面输入同样的地址,也会分配一个唯一ID,在这个页面下方点击“start”,在“请输入对方ID”中输入前面页面的ID:100,然后点击call,这样就会在两个页面显示对方截屏传送过来的桌面,如下图。

 基于浏览器 webrtc的PC屏幕共享_第2张图片基于浏览器 webrtc的PC屏幕共享_第3张图片

你可能感兴趣的:(多媒体)