搭建WebRTC视频会议服务03

本节运行一下WebRTC自带的两个Demo。

大家可以解压CS_WebRTC_Client_SDK_JavaScript.v4.1,看一下,里面有两个Demo。

第一个Demo是conference,已经集成到MCU Server里面了,当我们运行bin/start-all.sh命令时,就会启动了。
我们可以通过Chrome访问https://172.16.172.80:3004,就可以看到自己的视频。
再打开一个Chrome访问https://172.16.172.80:3004,就可以看到两路视频合并为一路视频输出了。
由于https证书为自签名,所以浏览器会给出安全提示,将证书加入可信范围,跳过就好了,全部功能只在Chrome成功过。

本节重点看下第二个Demo,是P2P。这个Demo需要两个服务的支持,一个是在第一节我们安装的Peer Server,另一个是需要安装一个turnserver。

1、下载coturn
https://github.com/coturn/coturn/releases

2、安装依赖库
2.1、安装levent
https://sourceforge.net/projects/levent/files/release-2.0.22-stable/

./configure 
make
make install

2.2、安装openssl-devel

sudo yum install openssl openssl-libs openssl-devel 

2.3、安装

yum install sqlite-devel

3、编译coturn

./configure 
make

4、编写coturn配置文件

vi path_to_coturn/bin/urnserver.conf
#新增以下内容
listening-device=enp0s3
listening-port=3478
relay-device=enp0s3
min-port=59000
max-port=65000
fingerprint
lt-cred-mech
use-auth-secret
static-auth-secret=demo
realm=demo
stale-nonce
user=demo:demo
cert=path_to_coturn/examples/etc/turn_server_cert.pem
pkey=path_to_coturn/examples/etc/turn_server_pkey.pem
no-loopback-peers
no-multicast-peers
mobility
no-cli

5、启动coturn

cd path_to_coturn/bin
sudo ./turnserver

6、启动PeerServer

cd PeerServer-Release-4.1
node peerserver.js

7、编辑本地页面peercall.html的以下部分

    var serverAddress='https://172.16.172.80:8096';
    const signaling = new SignalingChannel();
    let publicationForCamera;
    let publicationForScreen;
    var p2p = new Ics.P2P.P2PClient({
      audioEncodings: true,
      videoEncodings: [{codec:{name: 'h264'}}, {codec: {name: 'vp9'}}, {codec: {name: 'vp8'}}],
      rtcConfiguration:{
        iceServers: [{
          urls: "stun:172.16.172.80:3478"
        }, {
          urls: ["turn:172.16.172.80:3478?transport=udp",
            "turn:172.16.172.80:3478?transport=tcp"
          ],
          credential: "demo",
          username: "demo"
        }]
      },
    }, signaling);

8、测试
现在用两个Chrome页面浏览本地页面peercall.html,也能使用部分功能,但如果使用全部功能,还是要部署到HTTP服务器的。

9、为了支持Chrome分享桌面,需要安装并配置插件
9.1、修改插件中域名配置
CS_WebRTC_Client_SDK_JavaScript.v4.1\screen-sharing-chrome-extension\manifest.json

     "externally_connectable": {
      "matches": ["*://172.16.172.80/*", "*://localhost/*"]
   },

9.2、打开扩展管理
Chrome->Settings->Entensions
9.3、开启Developer mode
9.4、Load unpacked
选择CS_WebRTC_Client_SDK_JavaScript.v4.1\screen-sharing-chrome-extension
9.5、安装后,会有一个插件ID
我的插件ID为:ongdcdianlnmjiegeandlohjbogjndmc

10、编辑本地页面peercall.html的以下部分

    extensionId:'ongdcdianlnmjiegeandlohjbogjndmc'

11、部署网站
将页面部署到你熟悉的HTTP服务器,加入HTTPS证书,并要在HTTP头中允许CORS。

'Access-Control-Allow-Origin', '*'

一个偷懒的办法是,将MCU-Release-v4.1/extras/basic_example复制一份,按规则替换了静态资源。
修改下面几个文件;

package.json修改包描述
quickfix2spdybug47.js删除
samplertcservice.js删除不需要的API,然后修改端口为HTTP4001、HTTPS4004

然后启动了网站。

node samplertcservice.js

12、测试
这样访问https://172.16.172.80:4004即可。
第一个页面,Login左边填写User01,点击登录
第二个页面,Login左边填写User02,点击登录
第一个页面,SetRemoteId为User02
第二个页面,SetRemoteId为User01
第一个页面,SendData数据“123”,第二个页面可以看到。
第一个页面,Share Camera/Share Screen,第二个页面可以看到。

PS:
如果看不到,建议检查以下几件事情
A、必须HTTPS访问
B、Chrom和FF的控制台是否有报错
C、是否证书和HTTPS网站加入了可信列表
D、是否证书和HTTPS的地址是一致的

PS:
如果是Chrome插件有问题,主要确认
A、必须是HTTPS访问
B、网页的Chrome插件ID,与Chrome中插件ID是否一致
C、插件配置中的通配域名,是否与你的域名一致
D、是否证书和HTTPS网站加入了可信列表
E、是否证书和HTTPS的地址是一致的
F、是否打开了开发者模式

13、关闭页面
可以查看PeerServer的日志

Leave a Reply

Your email address will not be published. Required fields are marked *

*