最近研究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视频聊天

Real-time communication for the web

coturn

signalmaster

在Ubuntu上部署一个基于webrtc的多人视频聊天服务的更多相关文章

  1. 在ubuntu上部署一个samba服务器

    今天公司装了一天新电脑,准备把它装成服务器,于是为了方便开发的使用,我在上面部署了一个samba,用来实现window和linux的联系: 具体步骤,我详细的查看了百度,高手云集,以下就是总结了网友的 ...

  2. Ubuntu上部署一个简单的Java项目

    一.安装tomcat7,mysql,Java JDK,直接apt安装 $ sudo aptitude install tomcat7 $ -jdk openjdk--jre $ sudo aptitu ...

  3. 基于webrtc的多人视频会话的demo运行程序

    服务端程序: 该服务程序为windows平台下的程序,使用libevent书写,并集成了UDP的中转程序.(该服务器程序不能和客户端程序运行在同一台PC机电脑,不然服务器程序和客户端程序会抢占同一UD ...

  4. 如何使用 Docker 部署一个基于 Play Framework 的 Scala Web 应用?

    本文作者 Jacek Laskowski 拥有近20年的应用程序开发经验,现 CodiLime 的软件开发团队 Leader,曾从 IBM 取得多种资格认证.在这篇博文中,Jacek 分享了 Wars ...

  5. Web Server 在iis上部署webservice基于oracle

    在iis上部署webservice基于oracle 常见错误及解决方案: 原因: 先安装.netframework后安装iis造成的: 解决方案: 1.C:\Windows\Microsoft.NET ...

  6. 新手小白在github上部署一个项目

    新手小白在github上部署一个项目 一. 注册github账号 github地址:https://www.github.com/ 二.下载安装Git 地址:https://git-scm.com/d ...

  7. 记录一个奇葩的问题:k8s集群中master节点上部署一个单节点的nacos,导致master节点状态不在线

    情况详细描述; k8s集群,一台master,两台worker 在master节点上部署一个单节点的nacos,导致master节点状态不在线(不论是否修改nacos的默认端口号都会导致master节 ...

  8. 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)

    本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...

  9. [Linux]阿里云免费试用体验(在阿里云的ubuntu上部署个人服务)

    作为一个IT界的人,一般都希望有一个独立的博客,或者一部独立的机器.所以我一直在找机会,拥有一台自己可以独立控制的机器,自己想干嘛干嘛.当然这在虚拟机或者自己的PC上面也可以实现,但是这跟一台一直开着 ...

随机推荐

  1. 使用Robot Framework框架远程操作UNIX系统

    bot Framework是一个强大的自动化测试框架,依靠社区力量编写的Test Library为它提供了非常强的扩展性.下面我将介绍的就是如何使用第三方提供的扩展测试库(Test Library)来 ...

  2. Gitlab的介绍

    什么是GitLab ?◆GitLab是一个开源分布式版本控制系统◆开发语言: Ruby◆功能:管理项目源代码.版本控制.代码复用与查找GitLab与GitHub的不同 ◆ Github分布式在线代码托 ...

  3. Django 添加 app

    一.创建Django项目的时候添加 二.在终端创建app python manage.py startapp app名称 运行完命令后,要在settings.py文件中,添加配置文件

  4. Serilog高级玩法之用Serilog记录所选终结点附加属性

    这是该系列的第二篇文章:在ASP.NET Core 3.0中使用Serilog.AspNetCore. 第1部分-使用Serilog RequestLogging来简化ASP.NET Core的日志输 ...

  5. 代码审计之CVE-2018-7600-Drupal远程代码执行漏洞-Render API

    今天学习一下Drupal的另一个漏洞,由于渲染数组不当造成的漏洞 poc: url:http://localhost/drupal-8.5.0/user/register?element_parent ...

  6. thinkphp快速入门(学习php框架及代码审计)

    之前想学习php代码审计,但是没有坚持下去,记得当时看到了很多CMS框架采用MVC架构,就嘎然而止了. 为了深入学习下框架,一边看着thinkphp官方文档,一边写个简单的登陆注册页面以加深理解. 官 ...

  7. 拓扑排序(基于dfs+基于队列)

    经典问题-Ordering Tasks dfs函数的返回值表示是否成环,若存在有向环,则不存在拓扑排序.不包含有向环的有向图称为有向无环图(DAG) 可以借助DFS完成拓扑排序,在访问完一个结点时把他 ...

  8. 【Java并发基础】利用面向对象的思想写好并发程序

    前言 下面简单总结学习Java并发的笔记,关于如何利用面向对象思想写好并发程序的建议.面向对象的思想和并发编程属于两个领域,但是在Java中这两个领域却可以融合到一起.在Java语言中,面向对象编程的 ...

  9. Git 初级使用 windows & Ubuntu

    目的:有一段代码要进行几个人同时维护,但是传来传去不方便,所以希望在github上实现,前提是每台机器都有git 在github 上新建一个项目 然后会看到,大体上就按这执行就可以 在Windows系 ...

  10. 迭代器中set的使用

    今天对迭代器中的set方法进行了一下简单的使用,由于之前使用过list方法,所以将他与list进行了一下对比. list中加入对象时不会进行查重,也就是只要是一个符合的对象就可以加到list中,而对于 ...