简单搭建simplewebrtc环境

最新推荐文章于 2024-05-11 09:36:13 发布

csj6346

最新推荐文章于 2024-05-11 09:36:13 发布

阅读量6.1k

点赞数

分类专栏： webrtc 文章标签： simplewebrtc

webrtc 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

简要介绍

simplewebrtc是一种简单的开源网页音视频聊天解决方案，由三部分组成：

NAT穿透服务器，负责内网穿透，音视频转发
信令服务器，负责信令控制，建立点对点通道
web客户端，负责用户交互和展示

总体参考https://www.cnblogs.com/yubaolee/p/webrtc.html

谢谢yubaolee大神

搭建过程中遇到一些问题，记录一下

准备工作

服务器环境 ubuntu16.04

浏览器 Firefox & Chrome

搭建NAT穿透服务器coturn

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

出错的话，可能需要安装

apt install openssl
apt install libssl-dev
apt install libevent-dev

turnserver.conf是默认的配置文件，从example/etc拷贝到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=chen:123456

启动服务

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

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

搭建信令服务器simplemaster

git clone https://github.com/nguyenphu160196/signalmaster.git
cd signalmaster
npm install

这里没有使用andyet的github仓库，是因为在实际测试中发现socket.js会报错，issues中也有遇到相同问题的，可能是socket.io的版本问题，后续稍微研究一下

感谢nguyenphu160196大神

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/development.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:www.turn.cn:3478"],
      "username": "user",
      "credential":"pass",  
      "expiry": 86400
    }
  ]
}

启动

node server.js &

我一般喜欢把命令行写在shell脚本里执行，这样脚本退出时，服务进程交给系统管理，终端退出时进程依旧会继续运行

web客户端

参考http://www.cnblogs.com/fengwenit/p/4728918.html

谢谢fengwenit大神

复制下面的代码，保存为一个html文件

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://simplewebrtc.com/latest.js"></script>
    <script>
 
        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:'http://111.172.238.250:8888'
            nick: 'nickname'
        });
 
 
 
        // we have to wait until it's ready
        webrtc.on('readyToCall', function () {
            // you can name it anything
            webrtc.joinRoom('roomid');
 
            // Send a chat message
            $('#send').click(function () {
                var msg = $('#text').val();
                webrtc.sendToAll('chat', { message: msg, nick: webrtc.config.nick });
                $('#messages').append('<br>You:<br>' + msg + '\n');
                $('#text').val('');
            });
        });
 
        //For Text Chat ------------------------------------------------------------------
        // Await messages from others
        webrtc.connection.on('message', function (data) {
            if (data.type === 'chat') {
                console.log('chat received', data);
                $('#messages').append('<br>' + data.payload.nick + ':<br>' + data.payload.message+ '\n');
            }
        });
        
    </script>
    <style>
        #remoteVideos video {
            height: 150px;
        }
 
        #localVideo {
            height: 150px;
        }
    </style>
</head>
<body>
    <textarea id="messages" rows="5" cols="20"></textarea><br />
    <input id="text" type="text" />
    <input id="send" type="button" value="send" /><br />
    <video id="localVideo"></video>
    <div id="remoteVideos"></div>
</body>
</html>

其中url是信令服务器的地址、nickname、roomid根据需要修改，用firefox、chrome打开，即可开始测试

2019年1月29日更新：

http://simplewebrtc.com/latest.js这个有同学反映已经404了，https://github.com/chenshangjin/simplewebrtc_test_page 这里有个备份，有需要的同学可以拿去测试。

本地测试

一端采用chrome浏览器+笔记本摄像头

另一端采用firefox浏览器+虚拟摄像头，虚拟摄像头可以使用http://www.loveliao.com/downfiles/VCam_v4.5.exe

测试ok

待我的网站备案审核通过后放上去继续测试

小结

目前看来对这个方案对web客户端要求较高，与同学测试时出现了无法打开本地流、无法收到远程流等问题，后续需要继续研究

2018年8月24日更新

网站备案通过了，按计划部署上去，在此记录一下

1.服务器用的是阿里云的低配ECS，申请一个免费证书

2.Nginx配置证书，可以参考阿里云的证书下载和安装

3.html文件中http://simplewebrtc.com/latest.js替换成自己服务器的地址，顺便改成https

4.html文件中signalserver的url也换成自己服务器的地址

5.signalmaster的配置文件config/development.json也需要配置证书，注意证书文件位置不要放错

 "secure": true,
 "key": "config/sslcerts/key.pem",
 "cert": "config/sslcerts/cert.pem",

到此全部完成

csj6346

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
9
评论
简单搭建simplewebrtc环境

简要介绍simplewebrtc是一种简单的开源网页音视频聊天解决方案，由三部分组成：NAT穿透服务器，负责内网穿透，音视频转发信令服务器，负责信令控制，建立点对点通道 web客户端，负责用户交互和展示总体参考https://www.cnblogs.com/yubaolee/p/webrtc.html谢谢yubaolee大神搭建过程中遇到一些问题，记录一下准备工作服...
复制链接

扫一扫