0
0

~~~基于开源音视频服务组件SRS5实现一对一、一对多和视频会议功能~~~

~~~基于开源音视频服务组件SRS5实现一对一、一对多和视频会议功能~~~

一、前言

在工作生活中经常使用

音视频通话

功能，例如：微信视频聊天、钉钉在线视频会议、视频直播等，尤其现在短视频、直播带货比较火热，在线视频相关的需求也会多了起来，项目组也经常会遇到在线视频通话相关的需求，例如，医疗相关的在线问诊、安防相关的视频在线应急事件处理等；

二、WebRTC协议

WebRTC（Web Real-Time Communication）

作为一项开放的实时通信标准，为开发者提供了快速构建实时音视频通话系统的能力；
WebRTC 是一整套 API，为浏览器、移动应用提供实时通信（RealTime Communications）能力。它包含了流媒体协议的功能，但是不是以协议的方式暴露给开发者的

WebRTC

支持 Chrome 23+、Firefox 22+、Chrome for Android，提供 Java / Objective-C 绑定

WebRTC

主要有三个职责：

  • 捕获客户端音视频，对应接口 MediaStream（也就是 getUserMedia）
  • 音视频传输，对应接口 RTCPeerConnection
  • 任意数据传输，对应接口 RTCDataChannel
WebRTC

由 Google 开发，并在 2011 年首次发布。WebRTC 已经被广泛使用，并被许多知名网站和应用程序所采用，例如 Google Meet、Zoom、Skype 等。

WebRTC

使用了一系列技术来实现实时通信，包括：

  • SDP（Session Description Protocol）：SDP 用于描述通信会话的属性，例如参与者、协议、传输方式等。因此，参与通信双方要了解彼此支持的媒体格式，必须要交换SDP信息，而交换SDP的过程，通常称之为媒体协商
  • ICE（Interactive Connectivity Establishment）：ICE 用于建立通信会话的连接。
  • STUN（Session Traversal Utilities for NAT）：STUN 用于发现和绕过 NAT（网络地址转换）设备。
  • TURN（Traversal Using Relay NAT）：TURN 用于在 NAT 设备后面建立通信会话。

WebRTC 内置了点对点的支持，也就是说流不一定需要经过服务器中转。

三、常见的音视频服务

为了快速开发和减少维护成本常使用第三方的即时通讯服务实现在线音视频服务，例如阿里的百川云旺、腾讯云的即时通讯服务（IM）和网易云信等，当前市面上有很多，之前在开发一个在线视频指挥调度项目使用就是使用的网易云信的

即时通讯

功能实现在线

音视频通话

功能；
在这里插入图片描述
这里功能实现方便不用维护音视频服务器资源，但是三方音视频服务的缺点也很明显就是收费，二期长时期的费用还很高；
在这里插入图片描述
本着白嫖的精神首先会想到有没有免费开源的音视频服务器，肯定是有的，在网上找到两个使用人群比较的音视频服务器组件：SRS、ZLMediaKit

**

注：

在使用网易云信使用音视频通话功能有一个比较坑的地方就是web端调用sdk接口只支持原生js，

不支持

reactjs、vue等框架；**

1、SRS音视频服务

SRS是一个开源的（MIT协议）

简单高效的实时视频服务器，支持RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等协议。 SRS媒体服务器和

FFmpeg、OBS、VLC、 WebRTC

等客户端配合使用，提供流的接收和分发的能力，是一个典型的发布 （推流）和订阅（播放）服务器模型。 SRS支持互联网广泛应用的音视频协议转换，比如可以将RTMP或SRT， 转成HLS或HTTP-FLV或WebRTC等协议。
在这里插入图片描述

SRS官网介绍

2、ZLMediaKit音视频服务

ZLMediaKit是一个基于C++开发的开源流媒体服务器。它提供了高性能的音视频处理能力，支持常见的流媒体协议，如RTSP、RTMP、HLS和HTTP-FLV，并且具有低延迟和高并发处理能力；支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/WebRTC),支持协议互转。
在这里插入图片描述
ZLMediaKit官网介绍

SRS和ZLMediaKit各有优势，本文主要介绍基于SRS实现一对一、一对多音视频通话功能，关于ZLMediaKit的功能不在做过多介绍，有需求的自行了解。

四、SRS服务搭建

通过docker镜像搭建环境，搭建步骤在官网有详细介绍，位置如下：
在这里插入图片描述

本机启动SRS：

export CANDIDATE="192.168.1.10"
docker run --rm --env CANDIDATE=$CANDIDATE \
  -p 1935:1935-p 8080:8080-p 1985:1985-p 8000:8000/udp \
  registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5 \
  objs/srs -c conf/rtc.conf

Note: 请将CANDIDATE设置为服务器的外网地址

本机启动信令：

docker run --rm -p 1989:1989 registry.cn-hangzhou.aliyuncs.com/ossrs/signaling:1

启动httpx-static，转换HTTPS和WSS协议：

export CANDIDATE="192.168.1.10"
docker run --rm -p 80:80-p 443:443 registry.cn-hangzhou.aliyuncs.com/ossrs/httpx:1 \
    ./bin/httpx-static-http 80-https 443-ssk ./etc/server.key -ssc ./etc/server.crt \
          -proxy http://$CANDIDATE:1989/sig -proxy http://$CANDIDATE:1985/rtc \
          -proxy http://$CANDIDATE:8080/

Note: 请将CANDIDATE设置为服务器的外网地址

**注：如果服务部署在阿里云或者腾讯云等云服务上，一定要映射相关端口，并注意是

tcp协议

还是

udp协议

，比如，

8000端口

就是

UDP协议

，本人在使用时把UDP协议设置为了

TCP协议

，导致获取远端视频失败，视频传输是

UDP协议

。**

五、一对一、一对多代码实现

一对一视频通话示例：
web端：
在这里插入图片描述

手机端：
在这里插入图片描述

基于SRS实现web端一对一、一对多的音视频通话的样例在SRS源码中已经给出了，也是通过原生js实现的，位置如下图：
在这里插入图片描述
源码：

<!DOCTYPEhtml><html><head><title>SRS</title><metacharset="utf-8"><style>body{padding-top: 30px;}</style><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/><scripttype="text/javascript"src="js/jquery-1.12.2.min.js"></script><scripttype="text/javascript"src="js/adapter-7.4.0.min.js"></script><scripttype="text/javascript"src="js/srs.sdk.js"></script><scripttype="text/javascript"src="js/srs.sig.js"></script></head><body><imgsrc='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/one2one'/><divclass="navbar navbar-fixed-top"><divclass="navbar-inner"><divclass="container"><aclass="brand"href="https://github.com/ossrs/srs">SRS</a><divclass="nav-collapse collapse"><ulclass="nav srs_nav"><liclass="active"><ahref="one2one.html">一对一通话</a></li><li><ahref="room.html">多人通话</a></li><liclass="srs_ignore"><ahref="https://github.com/ossrs/signaling"><imgalt="GitHub Repo stars"src="img/shields-io-signaling.svg"></a></li></ul></div></div></div></div><divclass="container"><divclass="form-inline">
        SRS:
        <inputtype="text"id="txt_host"class="input-medium"value="">
        Room:
        <inputtype="text"id="txt_room"class="input-small"value="live">
        Display:
        <inputtype="text"id="txt_display"class="input-small"value=""><buttonclass="btn btn-primary"id="btn_start">开始通话</button></div><divclass="row"><divclass="span4 hide"id="publisher"><label></label><videoid="rtc_media_publisher"width="310"autoplaymutedcontrols></video><label></label><spanid='self'></span></div><divclass="span6 hide"id="player"><label></label><videoid="rtc_media_player"width="310"autoplaymutedcontrols></video><label></label><spanid='peer'></span><ahref="javascript:control_refresh_peer()">Refresh</a><inputtype="text"id="txt_alert"class="input-medium"value=""><ahref="javascript:control_alert_peer()">Alert</a></div></div><label></label><divclass="accordion hide srs_merge"><divclass="accordion-group"><divclass="accordion-heading"><ahref="javascript:void(0)"class="accordion-toggle">FFmpeg合流转直播</a></div><divclass="accordion-body collapse in"><divclass="accordion-inner"style="overflow:auto">
                    ffmpeg -f flv -i rtmp://<spanclass="ff_host"></span>/<spanclass="ff_app"></span>/<spanclass="ff_first"></span> -f flv -i rtmp://<spanclass="ff_host"></span>/<spanclass="ff_app"></span>/<spanclass="ff_second"></span> \ <br/>&nbsp;&nbsp;&nbsp;&nbsp; -filter_complex "[1:v]scale=w=96:h=72[ckout];[0:v][ckout]overlay=x=W-w-10:y=H-h-10[out]" -map "[out]" \ <br/>&nbsp;&nbsp;&nbsp;&nbsp; -c:v libx264 -profile:v high -preset medium \ <br/>&nbsp;&nbsp;&nbsp;&nbsp; -filter_complex amix -c:a aac \ <br/>&nbsp;&nbsp;&nbsp;&nbsp; -f flv -y
                    <spanid="ff_output">
                        rtmp://<spanclass="ff_host"></span>/<spanclass="ff_app"></span>/merge
                    </span><spanid="ff_wxvideo"></span>
                    && <br/>
                    echo "ok"
                </div><divclass="accordion-inner"><ahref="#"id="ff_preview"target="_blank"class="accordion-toggle">
                        预览：rtmp://<spanclass="ff_host"></span>/<spanclass="ff_app"></span>/merge
                    </a></div></div></div></div><label></label><divclass="accordion hide srs_merge"><divclass="accordion-group"><divclass="accordion-heading"><ahref="javascript:void(0)"class="accordion-toggle">
                    视频号推流信息
                </a></div><divclass="accordion-body collapse in"><divclass="accordion-inner">
                    推流地址 <inputtype="text"id="txt_wx_video_tcurl"class="input-xxlarge"></div><divclass="accordion-inner">
                    推流密钥 <inputtype="text"id="txt_wx_video_stream"class="input-xxlarge"></div><divclass="accordion-inner"><buttonclass="btn btn-primary"id="btn_apply">应用</button></div></div></div></div></div><footerclass="footer"><divclass="container"><p>&copy; SRS 2020</p></div></footer><scripttype="text/javascript">var sig =null;var publisher =null;var player =null;var control_refresh_peer =null;var control_alert_peer =null;$(function(){
        console.log('?wss=x to specify the websocket schema, ws or wss');
        console.log('?wsh=x to specify the websocket server ip');
        console.log('?wsp=x to specify the websocket server port');
        console.log('?host=x to specify the SRS server');
        console.log('?room=x to specify the room to join');
        console.log('?display=x to specify your nick name');varstartDemo=asyncfunction(){var host =$('#txt_host').val();var room =$('#txt_room').val();var display =$('#txt_display').val();// Connect to signaling first.if(sig){
                sig.close();}
            sig =newSrsRtcSignalingAsync();
            sig.onmessage=function(msg){
                console.log('Notify: ', msg);if(msg.event ==='leave'){$('#player').hide();}if(msg.event ==='publish'){if(msg.peer && msg.peer.publishing && msg.peer.display !== display){startPlay(host, room, msg.peer.display);}}if(msg.event ==='control'){if(msg.param ==='refresh'){setTimeout(function(){
                            window.location.reload();},500);}elseif(msg.param ==='alert'){alert('From '+ msg.peer.display +': '+ msg.data);}}if(msg.participants.length >=2){$('.srs_merge').show();}else{$('.srs_merge').hide();}};await sig.connect(conf.wsSchema, conf.wsHost, room, display);control_refresh_peer=asyncfunction(){let r1 =await sig.send({action:'control',room:room,display:display,call:'refresh'});
                console.log('Signaling: control peer to refresh ok', r1);};control_alert_peer=asyncfunction(){let r1 =await sig.send({action:'control',room:room,display:display,call:'alert',data:$('#txt_alert').val()});
                console.log('Signaling: control peer to alert ok', r1);};let r0 =await sig.send({action:'join',room:room,display:display});
            console.log('Signaling: join ok', r0);// For one to one demo, alert and ignore when room is full.if(r0.participants.length >2){alert('Room is full, already '+(r0.participants.length -1)+' participants');
                sig.close();return;}// Start publish media if signaling is ok.awaitstartPublish(host, room, display);let r1 =await sig.send({action:'publish',room:room,display:display});
            console.log('Signaling: publish ok', r1);// Play the stream already in room.
            r0.participants.forEach(function(participant){if(participant.display === display ||!participant.publishing)return;startPlay(host, room, participant.display);});if(r0.participants.length >=2){$('.srs_merge').show();}};varstartPublish=function(host, room, display){$(".ff_first").each(function(i,e){$(e).text(display);});var url ='webrtc://'+ host +'/'+ room +'/'+ display + conf.query;$('#rtc_media_publisher').show();$('#publisher').show();if(publisher){
                publisher.close();}
            publisher =newSrsRtcPublisherAsync();$('#rtc_media_publisher').prop('srcObject', publisher.stream);return publisher.publish(url).then(function(session){$('#self').text('Self: '+ url);}).catch(function(reason){
                publisher.close();$('#rtc_media_publisher').hide();
                console.error(reason);});};varstartPlay=function(host, room, display){$(".ff_second").each(function(i,e){$(e).text(display);});var url ='webrtc://'+ host +'/'+ room +'/'+ display + conf.query;$('#rtc_media_player').show();$('#player').show();if(player){
                player.close();}

            player =newSrsRtcPlayerAsync();$('#rtc_media_player').prop('srcObject', player.stream);

            player.play(url).then(function(session){$('#peer').text('Peer: '+ display);$('#rtc_media_player').prop('muted',false);}).catch(function(reason){
                player.close();$('#rtc_media_player').hide();
                console.error(reason);});};// Pass-by to SRS url.let conf =SrsRtcSignalingParse(window.location);$('#txt_host').val(conf.host);
        conf.room &&$('#txt_room').val(conf.room);$('#txt_display').val(conf.display);$(".ff_host").each(function(i,e){$(e).text(conf.host);});$(".ff_app").each(function(i,e){$(e).text($('#txt_room').val());});$('#ff_preview').attr('href','http://ossrs.net/players/srs_player.html?app='+$('#txt_room').val()+'&stream=merge.flv&server='+ conf.host +'&vhost='+ conf.host +'&autostart=true');// Update href for all navs.$('ul.srs_nav').children('li').not('.srs_ignore').children('a').each(function(i, e){$(e).attr('href',$(e).attr('href')+ conf.rawQuery);});$('#btn_apply').click(function(){if($('#txt_wx_video_tcurl').val()!==''&&$('#txt_wx_video_stream').val()!==''){$('#ff_wxvideo').text('"'+$('#txt_wx_video_tcurl').val()+$('#txt_wx_video_stream').val()+'"').show();$('#ff_output').hide();$('#ff_preview').parent().hide();}else{$('#ff_wxvideo').hide();$('#ff_output').show();$('#ff_preview').parent().show();}});$("#btn_start").click(startDemo);// Never play util windows loaded @see https://github.com/ossrs/srs/issues/2732if(conf.autostart){
            window.addEventListener("load",function(){startDemo();});}});</script></body></html>

六、总结

更好的使用技术，以熟悉技术为前提！！！基于SRS实现一对一、一对多实现音视频通话的js实现的业务逻辑的分析，后面文章介绍！！！

----------------------------------👇👇👇

注：更多信息请关注公众号获取

👇👇👇--------------------------------------------

标签： 开源 音视频 实时音视频
本文转载自: https://blog.csdn.net/weixin_37598243/article/details/141575893
版权归原作者 Dylan～～～ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“~~~基于开源音视频服务组件SRS5实现一对一、一对多和视频会议功能~~~”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

安全团队未与业务团队协商一致的策略变更流程，导致策略更新时业务团队未做好准备

无限边界：现代整合安全如何保护云

AppServiceRestFul：打造高效、安全的移动应用后台服务

内外网文件交换的5种方式，不要再只用U盘，网盘了！教你更便捷安全的方法

如何在 Ubuntu 下无障碍安装 Ollama：通过手动下载和修改脚本解决网络问题的完整指南

windows电脑的linux虚拟机连接电脑网络的方法

pycharm 2024.1下载、安装

文章导航