文档章节

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

o
 osc_mervd488
发布于 2018/04/23 18:43
字数 1063
阅读 21
收藏 0

精选30+云产品,助力企业轻松上云!>>>

原文地址:

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,安装命令如下:

git clone https://github.com/coturn/coturn
cd coturn
./configure
make
make install

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

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

修改配置turnserver.conf,如下:

#监听端口
listening-port=3478

#阿里云内网IP
listening-ip=10.214.31.57

#阿里云外网IP地址
external-ip=118.24.78.34
#访问的用户、密码
user=yubao:000000

启动服务:

cd bin
turnserver -v -r 118.24.78.34:3478 -a -o

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

 

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

tail -f /var/log/turn_12447_2018-04-20.log

信令服务器(Signaling Server)

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

git clone https://github.com/andyet/signalmaster.git
cd signalmaster
npm install express
npm install yetify
npm install getconfig
npm install node-uuid
npm install socket.io

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

if (!config.turnorigins || config.turnorigins.indexOf(origin) !== -1) {
            config.turnservers.forEach(function (server) {
                credentials.push({
                    username: server.username,
                    credential: server.credential,
                    urls: server.urls || server.url
                });
            });
        }

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

{
  "isDev": true,
  "server": {
    "port": 8888,
    "/* secure */": "/* whether this connects via https */",
    "secure": false,
    "key": null,
    "cert": null,
    "password": null
  },
  "rooms": {
    "/* maxClients */": "/* maximum number of clients per room. 0 = no limit */",
    "maxClients": 0
  },
  "stunservers": [
    {
      "urls": "stun:stun.ekiga.net:3478"
    }
  ],
  "turnservers": [
    {
      "urls": ["turn:qq.openauth.me:3478"],
      "username": "yubao",
      "credential":"000000",  
      "expiry": 86400
    }
  ]
}

Web客户端

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

var webrtc = new SimpleWebRTC({

    localVideoEl: 'localVideo',
   
    remoteVideosEl: 'remoteVideos',

    autoRequestMedia: true,

    url:'http://qq.openauth.me:8888',  //配置成自己的signal服务器

    nick: 'yubaolee'   //文本聊天时,用户的昵称

});

我部署的地址:http://qq.openauth.me:8080/baortc/index.html(别随便访问,突然看到我....我会害羞的🙂(✿◡‿◡)),电脑FireFox(chrome安全要求比较高,必须用https,暂时用firefox测试)访问效果:

再用另一台电脑或手机firefox访问,可以发现已经有两个视频窗口(刚刚电脑打开的页面也会自动有两个视频窗口),并且可以文本,视频通信:

自此,一个WebRTC的程序搭建完成。

===================================

原贴地址:https://www.cnblogs.com/yubaolee/p/webrtc.html

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

hbase2.1.9 centos7 完全分布式 搭建随记

hbase2.1.9 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实际情...

osc_4tfw1dxv
44分钟前
11
0
zookeeper3.5.5 centos7 完全分布式 搭建随记

zookeeper3.5.5 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实...

osc_6jhxf9ab
45分钟前
19
0
steam夏日促销悄然开始,用Python爬取排行榜上的游戏打折信息

前言 很多人学习python,不知道从何学起。 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。 很多已经做案例的人,却不知道如何去学习更加高深的知识。 那么针对这三类人,...

osc_ur9mmbck
46分钟前
16
0
python 里 certifi 库的作用

python 里 certifi 库的作用 安装了certifi之后,和requests库一样也有一个cacert.pem,可以用编辑器打开cacert.pem,里面包含了很多可信任知名公司的证书/公钥 库的路径,我这里是python2.7...

osc_1x6ycmfm
47分钟前
11
0
干掉"ZooKeeper",阿里为什么不用ZK做服务发现?

  20大进阶架构专题每日送达   链接:yq.aliyun.com/articles/601745   2020年Java面试题库连载中   !   正文   站在未来的路口,回望历史的迷途,常常会很有意思,因为我们会不...

osc_q5m9dzk0
49分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部