在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解

2023-07-31 16:49:04 216

WebRTC，即WebReal-TimeCommunication，web实时通信技术。简单地说就是在web浏览器里面引入实时通信，包括音视频通话等。

在疫情期间哪里也去不了，在家没事就研究webrtc视频直播技术，网上找了些教程最终都不太能顺利跑起来的，可能是文章写的比较老，使用的一些开源组件已经更新了，有些配置已经不太一样了，所以按照以前的步骤会有问题。折腾了一阵终于跑起来了，记录一下。

一个简单的聊天室html页面

这个页面使用simple-webrtc来实现webrtc的通讯，simple-webrtc是对几个webrtc核心对象的封装，所以使用这个会比较简单。




webrtcchatroom




roomid:



nickname:


self:




remoteclients:

$("#nickname").val(newDate().getTime()); varqs=function(key){ return(document.location.search.match(newRegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1]; }; varroomid=qs("roomid"); if(roomid){ $('#roomid').val(roomid); } else{ $('#roomid').val('99999'); } //$('#roomid').val(roomid); varsmUrl='https://webrtc.xxx.com:8800'; varwebrtc=newSimpleWebRTC({ //theid/elementdomelementthatwillhold"our"video localVideoEl:'localVideo', //theid/elementdomelementthatwillholdremotevideos remoteVideosEl:'remoteVideos', //immediatelyaskforcameraaccess autoRequestMedia:true, url:smUrl, nick:$('#nickname').val(), }); webrtc.on('readyToCall',function(){ //youcannameitanything console.log('connectioned.'); }); webrtc.on("createdPeer",function(peer){ console.log('createdPeer',peer,peer.nick); if(peer.nick){ alert('client'+peer.nick+'joined'); } }); webrtc.on("joinedRoom",(roomName)=>{ console.log('joinedRoom',roomName); alert('joinedroom'+roomName); }); webrtc.on("leftRoom",(roomName)=>{ console.log('leftRoom',roomName); }); webrtc.on("videoAdded",(videoEl,peer)=>{ console.log('videoAdded',videoEl,peer); if(peer.nick){ alert('client'+peer.nick+'joined'); } }); webrtc.on("videoRemoved",(videoEl,peer)=>{ console.log('videoRemoved',videoEl,peer); }); $('#btnStart').click(function(){ varroomId=$('#roomid').val(); webrtc.joinRoom(roomId); //alert('joinroom'+roomId+'success') }) //$('#btnStart').click();

安装nginx并部署聊天室页面

安装nginx：

sudoapt-getinstallnginx

配置nginx：

server{
listen80;
listen443;
server_namewebrtc.xxx.com;
location/{
indexindex.html;
roothtml/www;
}
sslon;
ssl_certificate/ssl/xxx.crt;
ssl_certificate_key/ssl/xxx.key;
ssl_session_timeout5m;
ssl_protocolsTLSv1TLSv1.1TLSv1.2;
ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;

}

安装完成nginx后把上面的html页面使用nginx部署到服务器。注意需要走https，因为chrome的设定不走https没法调用起摄像头跟麦克风。

安装并配置signalmaster信令服务

信令服务是用来在客户端之间传输webrtc的客户端信息。因为在webrtc建立p2p连接的时候需要对方客户端的相关信息，所以需要一个渠道来转发客户端之间的信息。signalmaster是一个基于nodejs的服务，使用socket.io实现websocket长连接。

安装signalmaster:

gitclonehttps://github.com/simplewebrtc/signalmaster.git

配置signalmaster：

cdsignalmaster
cdconfig
vimdevelopment.json
//编辑
{
"isDev":true,
"server":{
"port":8800,
"/*secure*/":"/*whetherthisconnectsviahttps*/",
"secure":true,
"cert":"/ssl/xxx.crt",
"key":"/ssl/xxx.key",
"password":null
},
"rooms":{
"/*maxClients*/":"/*maximumnumberofclientsperroom.0=nolimit*/",
"maxClients":0
},
"stunservers":[
{
"urls":"stun:webrtc.xxx.com:3478"
}
],
"turnservers":[
{
"urls":["turn:webrtc.xxx.com:3478"],
"username":"abc",
"credential":"123",
"secret":"",
"expiry":86400
}
]
}
~

这里主要注意的是也需要配置ssl证书，证书使用上面nginx那个证书即可。另外trunserver如果设置了密码也需要配置正确的用户名跟密码。

安装并配置coturn穿透服务

我们的客户端一般都在局域网之内，所以p2p连接建立的时候需要进行内网穿透。使用coturn建立turnserver作为穿透服务。

安装coturn：

#deps
apt-getinstall-y\
emacs-nox\
build-essential\
libssl-devsqlite3\
libsqlite3-dev\
libevent-dev\
g++\
libboost-dev\
libevent-dev

#download
wgethttps://github.com/coturn/coturn/archive/4.5.0.7.tar.gz
tarxvf4.5.0.7.tar.gz

#build&install
cdcoturn-4.5.0.7
./configure--prefix=/opt
make
makeinstall

#env
echo"exportPATH=/opt/bin:$PATH">>~/.bashrc
source~/.bashrc

配置coturn：

cdcoturn-4.5.0.7
vimcoturn.conf
#server
listening-port=3478
listening-ip=
relay-ip=
alt-listening-port=0
external-ip=
realm=abc

#server-name={YOUR_SERVER_NAME}

no-tls
no-dtls
mobility
no-cli
verbose
fingerprint

#auth
lt-cred-mech
stale-nonce=3600

#user
#这里是演示，不配置数据库，通过use={name}:{password}方式配置
#userdb=/opt/var/db/turndb
#多用户则写多行
user=abc:123

这里主要需要注意的是ip的配置listening-ip=内网ip，relay-ip=内网ip，external-ip=外网ip。还有user配置了话，信令服务器也要配置对应的用户名密码。

运行所有服务

运行信令服务：

cdsignalmaster
nodeserver.js

运行穿透服务器：

cdcoturn-4.5.0.7
turnserver-ccoturn.conf

访问一下nginx部署的静态页面就可以啦。开两个网页，自己可以跟自己试一下，最好找其他朋友试一下，有的时候穿透服务没配置好的时候，自己跟自己是可以的，但是跟其他人就不可以了。

参考

Coturn:TURNandSTUNServer
5分钟快速打造WebRTC视频聊天

coturn

总结

到此这篇关于在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解的文章就介绍到这了,更多相关Ubuntuwebrtc视频聊天内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解

self:

remoteclients:

热门推荐

随机推荐