原文地址:

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

百度一下WebRTC,我想也是一堆。本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本信息都发不出去,更别说视频了。于是自己动手。

想在公网上实现视频通信,需要下面3个核心元素:

  1. 一个是NAT穿透服务器(ICE Server),实现内网穿透,具体的作用可以自行百度。
  2. 基于WebSocket的信令服务器(Signaling Server),用于建立点对点的通道。
  3. Web客户端。通过H5的WebRTC特性调用摄像头,进行用户交互。

三个部分的组成如下:

蓝色的部分实际部署可以在三台服务器,我这里演示环境都在一台服务器。需要开的端口3478、8888、8080,当然也可以自行配置。下面来详细介绍具体的组合步骤:

准备工作

服务器运行环境:centos 7.3

安装工具:nodejs 、git 请自行百度安装

客户端环境:FireFox(或手机版FireFox)。因为chrome需要https支持,服务器需要部署证书。所以演示程序只支持Firefox,如有需要我会再发一篇文章介绍。

安装NAT穿透服务器(ICE Server)

实现内网穿透的方式主要有stun,turn两种方式,一般用的时候会把stun,turn的地址都配置上,如果连不上stun,会自动切换到turn服务器。详细介绍可以参考:STUN, TURN, ICE介绍网上有很多开源的stun服务器,但丫的我一个都没成功过,有兴趣的可以试试:http://blog.sina.com.cn/s/blog_683d26990100oucy.html 我这里就直接使用coturn只搭建turn server,安装命令如下:

  1. git clone https://github.com/coturn/coturn
  2. cd coturn
  3. ./configure
  4. make
  5. make install

安装完成后,把example/etc里面的turnserver.conf拷贝到bin文件夹:

  1. cp examples/etc/turnserver.conf bin/turnserver.conf

修改配置turnserver.conf,如下:

  1. #监听端口
  2. listening-port=
  3.  
  4. #阿里云内网IP
  5. listening-ip=10.214.31.57
  6.  
  7. #阿里云外网IP地址
  8. external-ip=118.24.78.34
  9. #访问的用户、密码
  10. user=yubao:

启动服务:

  1. cd bin
  2. turnserver -v -r 118.24.78.34: -a -o

搭建好后可以在 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/测试一下有没有成功,如下:

也可以在/var/log文件夹中随时查看运行日志,比如我的:

  1. tail -f /var/log/turn_12447_2018--.log

信令服务器(Signaling Server)

信令服务器使用的是 signalmaster ,基于websocket。选用它的原因是可以直接集成turn server服务器。

  1. git clone https://github.com/andyet/signalmaster.git
  2. cd signalmaster
  3. npm install express
  4. npm install yetify
  5. npm install getconfig
  6. npm install node-uuid
  7. npm install socket.io

signalmaster可以连接turnserver,但不支持用户名/密码方式,需要对源码sockets.js 110行进行调整,调整后的代码如下:

  1. if (!config.turnorigins || config.turnorigins.indexOf(origin) !== -1) {
  2. config.turnservers.forEach(function (server) {
  3. credentials.push({
  4. username: server.username,
  5. credential: server.credential,
  6. urls: server.urls || server.url
  7. });
  8. });
  9. }

完成后,修改config/production.json,配置turnserver的用户和密码,如下:

  1. {
  2. "isDev": true,
  3. "server": {
  4. "port": 8888,
  5. "/* secure */": "/* whether this connects via https */",
  6. "secure": false,
  7. "key": null,
  8. "cert": null,
  9. "password": null
  10. },
  11. "rooms": {
  12. "/* maxClients */": "/* maximum number of clients per room. 0 = no limit */",
  13. "maxClients": 0
  14. },
  15. "stunservers": [
  16. {
  17. "urls": "stun:stun.ekiga.net:3478"
  18. }
  19. ],
  20. "turnservers": [
  21. {
  22. "urls": ["turn:qq.openauth.me:3478"],
  23. "username": "yubao",
  24. "credential":"000000",
  25. "expiry": 86400
  26. }
  27. ]
  28. }

Web客户端

客户端可以快速做一个html的页面,可以参考:一步一步搭建客服系统 (1) 3分钟实现网页版多人文本、视频聊天室 (含完整源码) 当然如果你实在是太懒,直接点击下载吧。可以找个静态的Web服务器,部署上就可以了。注意修改第二部的signal服务器地址:

  1. var webrtc = new SimpleWebRTC({
  2.  
  3. localVideoEl: 'localVideo',
  4.  
  5. remoteVideosEl: 'remoteVideos',
  6.  
  7. autoRequestMedia: true,
  8.  
  9. url:'http://qq.openauth.me:8888', //配置成自己的signal服务器
  10.  
  11. nick: 'yubaolee' //文本聊天时,用户的昵称
  12.  
  13. });

我部署的地址:http://qq.openauth.me:8080/baortc/index.html(别随便访问,突然看到我....我会害羞的

5分钟快速打造WebRTC视频聊天<转>的更多相关文章

  1. 5分钟快速打造WebRTC视频聊天

    百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本信息都发不出去,更别说视频了.于是自己动手. 想 ...

  2. 10分钟快速上车短视频风口:基于uniapp框架创建自己的仿抖音短视APP

    在今年也就是第48次发布的<中国互联网络发展状况统计报告>有这样一个数据,21年的上半年以来,我国我国网民规模达10.11亿,其中短视频用户达8.88亿.碎片化的生活场景下,短视频成为人们 ...

  3. 在Ubuntu上部署一个基于webrtc的多人视频聊天服务

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

  4. 使用WebRTC搭建前端视频聊天室——点对点通信篇

    WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道.在DataChannel之前,浏览器到浏览器的数据 ...

  5. 使用WebRTC搭建前端视频聊天室——信令篇

    博客原文地址 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用了两个库:SkyRTC(github地址 ...

  6. 使用WebRTC搭建前端视频聊天室——入门篇

    http://segmentfault.com/a/1190000000436544 什么是WebRTC? 众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转.比如现在有两 ...

  7. WebRTC实现网页版多人视频聊天室

    因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...

  8. 开源Flex Air版免费激情美女视频聊天室,免费网络远程视频会议系统((Flex,Fms3联合打造))

    开源Flex Air版免费激情美女视频聊天室,免费网络远程视频会议系统((Flex,Fms3联合打造))   Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实 ...

  9. WebRTC:一个视频聊天的简单例子

    相关API简介 在前面的章节中,已经对WebRTC相关的重要知识点进行了介绍,包括涉及的网络协议.会话描述协议.如何进行网络穿透等,剩下的就是WebRTC的API了. WebRTC通信相关的API非常 ...

随机推荐

  1. 服务网关zuul之七:zuul中的动态刷新路由配置

    <spring扩展点之三:Spring 的监听事件 ApplicationListener 和 ApplicationEvent 用法,在spring启动后做些事情> <服务网关zu ...

  2. 廖雪峰Java1-2程序基础-9数组

    数组初识 1.数组的特点: 数组所有元素初始化默认值,int默认值为0 数组创建后大小不可改变 数组索引从0开始 数组是引用类型 使用索引下标访问数组元素,索引超出范围会报错 2.数组的定义: 类型[ ...

  3. Flume原理解析【转】

    一.Flume简介 flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original generati ...

  4. python之路——5

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1. 列表操作 增 append insert extend 删 remove pop clear d ...

  5. [UE4]蓝图替换节点、引用快捷方式

  6. POJ 多项式加法

    题解: 采用顺序表.考虑到题目中没有规定指数上界,为避免RE,拟不采用数组.参考了http://blog.csdn.net/inlovecy/article/details/15208473后,最终采 ...

  7. EditPlus 3安装的配置操作

    1.关闭自动保存备份设置 将保存时创建备份文件的钩去掉即可 2.设置字体样式  3.配置编译和运行 运行相当于在控制台执行命令: java -classpath classes Hello 4.设置快 ...

  8. javascript-时间戳

    // 获取当前时间戳(以s为单位) var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; console.log( ...

  9. day10学习笔记整理

    函数对象函数是第一类对象: 指的是函数名指向的值(函数)可以被当作数据去使用 1. 可以被引用 2. 可以当作参数传给另外一个函数 3. 可以当作一个函数的返回值 4. 可以当作容器类型的元素   l ...

  10. 剑指Offer(二):替换空格

    说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...