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

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

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

一个简单的聊天室html页面

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

<!DOCTYPE html>
<html>
<head>
 <title>webrtc chat room </title>
 <style>
 video {
 height: 200px;
 width: 200px;
 border: 1px solid cornflowerblue;
 border-radius: 3px;
 margin: 10px;
 }
 </style>
</head>
<body>
 <div>
 roomid: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="join room">
 </div>

 <div>
 nick name: <input id ="nickname" readonly="readonly" type = "text" value="">
 </div>
 <h3>
 self:
 </h3>
 <video id="localVideo"></video>
 <div id="remoteVideos">
 <h3>
 remote clients:
 </h3>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
 <script src="js/simplewebrtc-with-adapter.bundle.js"></script>
 <script lang="javascript">
 $("#nickname").val(new Date().getTime());
 var qs = function (key) {
 return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
 };

 var roomid = qs("roomid");
 if (roomid) {
 $('#roomid').val(roomid);
 }
 else {
 $('#roomid').val('99999');
 }
 // $('#roomid').val(roomid);
 var smUrl = 'https://webrtc.xxx.com:8800';
 var webrtc = new SimpleWebRTC({
 // the id/element dom element that will hold "our" video
 localVideoEl: 'localVideo',
 // the id/element dom element that will hold remote videos
 remoteVideosEl: 'remoteVideos',
 // immediately ask for camera access
 autoRequestMedia: true,
 url: smUrl,
 nick: $('#nickname').val(),
 });

 webrtc.on('readyToCall', function () {
 // you can name it anything
 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('joined room ' + 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(){
 var roomId = $('#roomid').val();
 webrtc.joinRoom(roomId);
 // alert('join room '+ roomId +' success')
 })
 //$('#btnStart').click();
 </script>
</body>
</html>

安装nginx并部署聊天室页面

安装nginx：

sudo apt-get install nginx

配置nginx：

server {
 listen 80;
 listen 443;
 server_name webrtc.xxx.com;
 location / {
  index index.html;
  root html/www;
  }
 ssl on;
 ssl_certificate /ssl/xxx.crt;
 ssl_certificate_key /ssl/xxx.key;
 ssl_session_timeout 5m;
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 ssl_ciphers ECDHE-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:

git clone https://github.com/simplewebrtc/signalmaster.git

配置signalmaster：

cd signalmaster
cd config
vim development.json
//编辑
{
 "isDev": true,
 "server": {
 "port": 8800,
 "/* secure */": "/* whether this connects via https */",
 "secure": true,
 "cert": "/ssl/xxx.crt",
 "key": "/ssl/xxx.key",
 "password": null
 },
 "rooms": {
 "/* maxClients */": "/* maximum number of clients per room. 0 = no limit */",
 "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-get install -y \
 emacs-nox \
 build-essential \
 libssl-dev sqlite3 \
 libsqlite3-dev \
 libevent-dev \
 g++ \
 libboost-dev \
 libevent-dev

# download
wget https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz
tar xvf 4.5.0.7.tar.gz

# build & install
cd coturn-4.5.0.7
./configure --prefix=/opt
make
make install

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

配置coturn：

cd coturn-4.5.0.7
vim coturn.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配置了话，信令服务器也要配置对应的用户名密码。

运行所有服务

运行信令服务：

cd signalmaster
node server.js

运行穿透服务器：

cd coturn-4.5.0.7
turnserver -c coturn.conf

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

参考

Coturn: TURN and STUN Server
5分钟快速打造WebRTC视频聊天

coturn

总结

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

赞 (0)

相关推荐

  • 详解python的webrtc库实现语音端点检测

    详解python的webrtc库实现语音端点检测

    引言 语音端点检测最早应用于电话传输和检测系统当中,用于通信信道的时间分配,提高传输线路的利用效率.端点检测属于语音处理系统的前端操作,在语音检测领域意义重大. 但是目前的语音端点检测,尤其是检测 人声 开始和结束的端点始终是属于技术难点,各家公司始终处于 能判断,但是不敢保证 判别准确性 的阶段. 现在基于云端语义库的聊天机器人层出不穷,其中最著名的当属amazon的 Alexa/Echo 智能音箱. 国内如雨后春笋般出现了各种搭载语音聊天的智能音箱(如前几天在知乎上广告的若琪机器人)和各类智

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

    WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. 在疫情期间哪里也去不了,在家没事就研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题.折腾了一阵终于跑起来了,记录一下. 一个简单的聊天室html页面 这个页面使用simple-webrtc来实现webrtc的通讯,sim

  • 5分钟搭建一个WebRTC视频聊天

    在上篇文章给大家介绍了在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解,感兴趣的朋友可以参考下.今天给大家分享一篇关于5分钟搭建一个WebRTC视频聊天. 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本信息都发不出去,更别说视频了.于是自己动手. 想在公网上实现视频通信,需要下面3个核心元素: 一个是NAT穿透服务器(ICE Server),实现内网穿透,具体的作用可以

  • 在Linux上搭建一个Java部署环境的详细步骤

    目录 在Linux上搭建一个Java部署环境 1. 安装jdk 2.操作步骤: 3. 安装mysql 小结 上篇介绍了如何在 Linux 上搭建 java 部署环境(安装jdk/tomcat/mysql) + 将程序部署到云服务器上的操作). 在Linux上搭建一个Java部署环境 为了部署java web程序,需要安装:jdk.tomcat.mysql.(注意:所有的安装yum都需要管理员权限) 1. 安装jdk 安装jdk有很多种方式,但是我们这里推荐的是使用yum直接安装openjdk.

  • 使用Go基于WebSocket构建千万级视频直播弹幕系统的代码详解

    (1)业务复杂度介绍 开门见山,假设一个直播间同时500W人在线,那么1秒钟1000条弹幕,那么弹幕系统的推送频率就是: 500W * 1000条/秒=50亿条/秒 ,想想B站2019跨年晚会那次弹幕系统得是多么的NB,况且一个大型网站不可能只有一个直播间! 使用Go做WebSocket开发无非就是三种情况: 使用Go原生自带的库,也就是 golang.org/x/net ,但是这个官方库真是出了奇Bug多 使用GitHub大佬 gorilla/websocket 库,可以结合到某些Web开发框

  • 基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

    基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

    Pyplot matplotlib.pyplot是一个命令型函数集合,它可以让我们像使用MATLAB一样使用matplotlib.pyplot中的每一个函数都会对画布图像作出相应的改变,如创建画布.在画布中创建一个绘图区.在绘图区上画几条线.给图像添加文字说明等.下面我们就通过实例代码来领略一下他的魅力. import matplotlib.pyplot as plt plt.plot([1,2,3,4]) plt.ylabel('some numbers') plt.show() 上图是我们通

  • 基于Bootstrap和jQuery构建前端分页工具实例代码

    基于Bootstrap和jQuery构建前端分页工具实例代码

    前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

  • 基于java集合中的一些易混淆的知识点(详解)

    (一) collection和collections 这两者均位于java.util包下,不同的是: collection是一个集合接口,有ListSet等常见的子接口,是集合框架图的第一个节点,,提供了对集合对象进行基本操作的一系列方法. 常见的方法有: boolean add(E e) 往容器中添加元素:int size() 返回collection的元素数:boolean isEmpty() 判断此容器是否为空: boolean contains(Object o) 如果此collecti

  • 基于Spring中各个jar包的作用及依赖(详解)

    基于Spring中各个jar包的作用及依赖(详解)

    先附spring各版本jar包下载链接http://repo.spring.io/release/org/springframework/spring/ spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar, aspects.jar, spring-portlet.jar, and spring-hibernate2.jar 示例图片为Spring-2.5.6.jar的包目录 下面讲解各个jar包的作用: 1.org.springframework.aop或sp

  • 基于Java中最常用的集合类框架之HashMap(详解)

    基于Java中最常用的集合类框架之HashMap(详解)

    一.HashMap的概述 HashMap可以说是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构. HashMap是基于哈希表的Map接口实现的,此实现提供所有可选的映射操作.存储的是对的映射,允许多个null值和一个null键.但此类不保证映射的顺序,特别是它不保证该顺序恒久不变. 除了HashMap是非同步以及允许使用null外,HashMap 类与 Hashtable大致相同. 此实现假定哈希函数将元素适当地分布在各桶之间,可为基本操作(get 和 put)提供稳定的性

  • 基于js 各种排序方法和sort方法的区别(详解)

    今天突发奇想,想明白sort方法是否比各种排序都有优势,所以就参考别人的代码,做了一个测试,结果令人惊讶啊,上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max

随机推荐