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

一个简单的聊天室html页面

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


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>webrtc chat room </title>
  5. <style>
  6. video {
  7. height: 200px;
  8. width: 200px;
  9. border: 1px solid cornflowerblue;
  10. border-radius: 3px;
  11. margin: 10px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div>
  17. roomid: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="join room">
  18. </div>
  19. <div>
  20. nick name: <input id ="nickname" readonly="readonly" type = "text" value="">
  21. </div>
  22. <h3>
  23. self:
  24. </h3>
  25. <video id="localVideo"></video>
  26. <div id="remoteVideos">
  27. <h3>
  28. remote clients:
  29. </h3>
  30. </div>
  31. <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
  32. <script src="js/simplewebrtc-with-adapter.bundle.js"></script>
  33. <script lang="javascript">
  34. $("#nickname").val(new Date().getTime());
  35. var qs = function (key) {
  36. return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
  37. };
  38. var roomid = qs("roomid");
  39. if (roomid) {
  40. $('#roomid').val(roomid);
  41. }
  42. else {
  43. $('#roomid').val('99999');
  44. }
  45. // $('#roomid').val(roomid);
  46. var smUrl = 'https://webrtc.xxx.com:8800';
  47. var webrtc = new SimpleWebRTC({
  48. // the id/element dom element that will hold "our" video
  49. localVideoEl: 'localVideo',
  50. // the id/element dom element that will hold remote videos
  51. remoteVideosEl: 'remoteVideos',
  52. // immediately ask for camera access
  53. autoRequestMedia: true,
  54. url: smUrl,
  55. nick: $('#nickname').val(),
  56. });
  57. webrtc.on('readyToCall', function () {
  58. // you can name it anything
  59. console.log('connectioned .');
  60. });
  61. webrtc.on("createdPeer", function (peer) {
  62. console.log('createdPeer', peer, peer.nick );
  63. if (peer.nick) {
  64. alert('client '+ peer.nick + ' joined');
  65. }
  66. });
  67. webrtc.on("joinedRoom", (roomName )=>{
  68. console.log('joinedRoom', roomName );
  69. alert('joined room ' + roomName );
  70. });
  71. webrtc.on("leftRoom", (roomName )=>{
  72. console.log('leftRoom', roomName );
  73. });
  74. webrtc.on("videoAdded", (videoEl, peer )=>{
  75. console.log('videoAdded', videoEl, peer );
  76. if (peer.nick) {
  77. alert('client '+ peer.nick + ' joined');
  78. }
  79. });
  80. webrtc.on("videoRemoved", (videoEl, peer )=>{
  81. console.log('videoRemoved', videoEl, peer );
  82. });
  83. $('#btnStart').click(function(){
  84. var roomId = $('#roomid').val();
  85. webrtc.joinRoom(roomId);
  86. // alert('join room '+ roomId +' success')
  87. })
  88. //$('#btnStart').click();
  89. </script>
  90. </body>
  91. </html>

安装nginx并部署聊天室页面

安装nginx:

  1. sudo apt-get install nginx

配置nginx:

  1. server {
  2. listen 80;
  3. listen 443;
  4. server_name webrtc.xxx.com;
  5. location / {
  6. index index.html;
  7. root html/www;
  8. }
  9. ssl on;
  10. ssl_certificate /ssl/xxx.crt;
  11. ssl_certificate_key /ssl/xxx.key;
  12. ssl_session_timeout 5m;
  13. ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  14. ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
  15. }

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

安装并配置signalmaster信令服务

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

安装signalmaster:

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

配置signalmaster:

  1. cd signalmaster
  2. cd config
  3. vim development.json
  4. //编辑
  5. {
  6. "isDev": true,
  7. "server": {
  8. "port": 8800,
  9. "/* secure */": "/* whether this connects via https */",
  10. "secure": true,
  11. "cert": "/ssl/xxx.crt",
  12. "key": "/ssl/xxx.key",
  13. "password": null
  14. },
  15. "rooms": {
  16. "/* maxClients */": "/* maximum number of clients per room. 0 = no limit */",
  17. "maxClients": 0
  18. },
  19. "stunservers": [
  20. {
  21. "urls": "stun:webrtc.xxx.com:3478"
  22. }
  23. ],
  24. "turnservers": [
  25. {
  26. "urls": ["turn:webrtc.xxx.com:3478"],
  27. "username": "abc",
  28. "credential": "123",
  29. "secret": "",
  30. "expiry": 86400
  31. }
  32. ]
  33. }
  34. ~

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

安装并配置coturn穿透服务

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

安装coturn:

  1. # deps
  2. apt-get install -y \
  3. emacs-nox \
  4. build-essential \
  5. libssl-dev sqlite3 \
  6. libsqlite3-dev \
  7. libevent-dev \
  8. g++ \
  9. libboost-dev \
  10. libevent-dev
  11. # download
  12. wget https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz
  13. tar xvf 4.5.0.7.tar.gz
  14. # build & install
  15. cd coturn-4.5.0.7
  16. ./configure --prefix=/opt
  17. make
  18. make install
  19. # env
  20. echo "export PATH=/opt/bin:$PATH" >> ~/.bashrc
  21. source ~/.bashrc

配置coturn:

  1. cd coturn-4.5.0.7
  2. vim coturn.conf
  3. #server
  4. listening-port=3478
  5. listening-ip=
  6. relay-ip=
  7. alt-listening-port=0
  8. external-ip=
  9. realm=abc
  10. # server-name={YOUR_SERVER_NAME}
  11. no-tls
  12. no-dtls
  13. mobility
  14. no-cli
  15. verbose
  16. fingerprint
  17. # auth
  18. lt-cred-mech
  19. stale-nonce=3600
  20. # user
  21. # 这里是演示,不配置数据库,通过 use={name}:{password} 方式配置
  22. # userdb=/opt/var/db/turndb
  23. # 多用户则写多行
  24. user=abc:123

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

运行所有服务

运行信令服务:

  1. cd signalmaster
  2. node server.js

运行穿透服务器:

  1. cd coturn-4.5.0.7
  2. 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. 安装dbeaver,The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.

    在连接mysql时,出现了以下错误: 解决方法是 在数据库链接指定useUnicode=true&useSSL=false&characterEncoding=utf8&ser ...

  2. Ndarry对象

    创建一个 ndarray 只需调用 NumPy 的 array 函数即可: numpy.array(object, dtype = None, copy = True, order = None, s ...

  3. 插画版Kubernetes指南

    原文地址:https://www.cnblogs.com/kouryoushine/articles/8007648.html 是根据一个视频翻译过来的,比较形象 编者按:Matt Butcher 是 ...

  4. 创建自定义路由处理程序(Creating a Custom Route Handler) | 定制路由系统| 高级路由特性 |精通ASP-NET-MVC-5-弗瑞曼

    自定义实现 IRouteHandler

  5. c# 三种计算程序运行时间的方法

    三种计算c#程序运行时间的方法第一种:利用 System.DateTime.Now // example1: System.DateTime.Now method DateTime dt1 = Sys ...

  6. vue3的打包及打包的坑

    1.vue3没有vue.config.js文件,在根目录下建一个vue.config.js文件 2.vue.config.js  3.vue3.3版本前的打包命令  vue3.3版本之后 我用3.3之 ...

  7. springBoot的事件机制---GenericApplicationListener用法

    springBoot的事件机制---GenericApplicationListener用法 什么是ApplicationContext? 它是Spring的核心,Context我们通常解释为上下文环 ...

  8. Selenium(七):截图显示等待

    一.显示等待(有条件等待) 常见问题: 定位明明是对的,为什么运行代码没找到定位. 定位明明是对的,找到定位了,文本信息为什么取到是空的? 分析原因: 没有处理frame 页面渲染速度比自动化测试的代 ...

  9. HTML:一张思维导图搞懂HTML

    HTML常用标签及其用法

  10. Arduino系列之按键模块(一)

    今天我将简单介绍按键模块计数的原理: 我们常用的按键及按键模块有2脚和4脚的,其内部结构如图所示,当按下按键时就会接通按键两端,当放开时,两端自然断开.                         ...