webrtc 音视频传输

基于mediasoup pc client和 web clien

2020-05-20  本文已影响0人  自由侠

环境搭建

      下载webrtc , 编译出libwebrtc.a库及其他依赖库;

      下载mediasoup-demo  编译完成;

      下载mediasoup-broadcast-demo 编译完成;

       其中mediasoup-demo 有基于nodejs的 server端和client端;

        mediasoup-broadcast-demo是基于c++的client端,   不修改代码的前提下需要与mediasoup-demo 的client端配合调试;

demo测试

目标:   一个web client 与一个 c++ client(设备端) 加入相同的房间进行通信

step1:

运行mediasoup-demo server:

需要简单配置下config.js 里边webrtc的监听ip地址(eg:192.168.199.250)和端口号,  后续web端访问需要;

cd mediasoup-demo/server/

npm start

server 启动成功

step2:

运行mediasoup-demo client:

cd mediasoup-demo/app/

sudo npm start

运行结果如下:

[sudo] password for yq:

> mediasoup-demo-app@3.0.0 start /home/yq/share/src/mediasoup/demo/mediasoup-demo/app

> gulp live

[19:47:59] NODE_ENV: development

[19:47:59] Using gulpfile ~/share/src/mediasoup/demo/mediasoup-demo/app/gulpfile.js

[19:47:59] Starting 'live'...

[19:47:59] Starting 'browser:base'...

[19:47:59] Starting 'clean'...

[19:47:59] Finished 'clean' after 17 ms

[19:47:59] Starting 'lint'...

[19:48:02] Finished 'lint' after 2.7 s

[19:48:02] Starting 'bundle:watch'...

[19:48:12] Finished 'bundle:watch' after 9.54 s

[19:48:12] Starting 'html'...

[19:48:12] Finished 'html' after 4.7 ms

[19:48:12] Starting 'css'...

[19:48:12] Finished 'css' after 794 ms

[19:48:12] Starting 'resources'...

[19:48:12] Finished 'resources' after 32 ms

[19:48:12] Starting 'watch'...

[19:48:12] Finished 'watch' after 17 ms

[19:48:12] Finished 'browser:base' after 13 s

[19:48:12] Starting '<anonymous>'...

[19:48:12] Finished '<anonymous>' after 19 ms

[19:48:12] Finished 'live' after 13 s

[Browsersync] Access URLs:

----------------------------------------

Local: https://localhost:3000/?info=true

----------------------------------------

    UI: http://localhost:3001

----------------------------------------

[Browsersync] Serving files from: ../server/public

[Browsersync] Watching files...

[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

这里看上去有个错误,  不用理会, 直接去浏览器里边打开 https://192.168.199.250:3000/?roomId=1

这样, 我们加入了roomid为1的房间;

我们还可以打开多个浏览器, 输入相同的地址, 加入相同的房间号进行多方音视频通信; 

step3:

启动 c++ client:

cd mediasoup-broadcaster-demo/

export SERVER_URL="https://192.168.199.250:4443"

export ROOM_ID=1

./build/broadcaster

运行broadcaster

一开始运行程序可能会直接退出, 是由于main函数结束的sigsuspend函数有问题, 修改为 while(1) {sleep(1)}  保证main函数不退出即可

这样又一个新的peer加入roomid为1的房间

实现了 c++客户端与web客户端的音视频通信;

结果截图:

黑屏是因为电脑没有摄像头(摄像头隐藏了, 没照到人),  花屏可能是因为视频传输不可靠导致(这个不叫花屏, 这原本就是方块状的模拟视频);

另外进行音频通话测试的时候,  接受到的音频不连续,  也可能是因为音频传输不可靠导致; 

这是一个demo最初的样子, 需要调优;   后续会继续调优,  达到没有花屏和音频不连续的情况;

自此,  pc client和web client通信demo测试完毕;

调试过程中碰到的问题:

问题:

      c++ client 默认代码需要进行证书校验,  导致makerequest函数返回失败

解决:

      在makerequest函数中设置curl选项, 不校验证书;

    curl_easy_setopt(curl, CURLOPT_SSL_VERIFYPEER, 0L);

    curl_easy_setopt(curl, CURLOPT_SSL_VERIFYHOST, 0L);

下边简单分析下通信过程中的一些点:

web端地址:   https://192.168.199.250:3000/?roomId=1

c++端的地址:  https://192.168.199.250:4443

两个连接的server 端口不一样,   是因为server端与来自web端的client 和来自设备端(c++) 的client 使用的协议不一样, 所使用的端口也就不一样;

web client 与 server通信使用 websocket方式 (protoo WebSocketServer)

c++ client 与 server通信使用 https 方式;

TODO:

解决视频花屏问题和声音不连续问题

后来经过反复测试, 换了一台带摄像头的笔记本测试,  声音是连续的,  视频还是"花屏";   那个看上去好像不是花屏, 是特殊处理了的,  可能是c++ 端的demo 视频采集有些问题? 

TODO: 

解决c++客户端视频采集"花屏"问题

两个web客户端同时加入同一房间时, 没有花屏问题; 

分析:  

由于c++ demo是运行于虚拟机内部,  可能是虚拟机没有摄像头的驱动, 导致视频采集有问题, 而音频采集没有问题, 所以出现音频正常, 视频"花屏"现象;

此问题暂不深究;

总结:

从以上c++ client与web client  还是 web client与web client通信来看,  音频屏的通信看上去是"可靠"的;

TODO:

弱网下web client与web client通信, 看看音视频通信的可靠性, 会不会出现花屏现象. (前提: 目前测试的正常情况下是没有花屏现象的)

上一篇 下一篇

猜你喜欢

热点阅读