本节运行一下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的日志