WebRTC 视频通话小 demo,采用 node 和 vue
发布于 7 年前 作者 zmecust 11818 次浏览 来自 分享

开发 WebRTC 视频通话需要有客户端,信令服务器,turn 服务器

科普性的知识在此就不赘述了,如有需要将会开专栏详细普及相关知识

所采用的技术

视频通话采用 WebRTC 提供的 API 接口;由于我不会使用 JQuery,所以客户端采用的 vue 进行的开发;信令服务器主要起到分发消息的作用,因此采用 node 和 socket.io;turn服务器搭建在 Ubuntu 16.04 下面 大家有需要也可以免费使用我搭建的 turn 服务器: { “url”: “turn:115.28.170.217:3478”, “credential”: “zmecust”, “username”: “zmecust” }

使用方法

目前仅支持 PC 端 chrome 和 firefox 浏览器。进入页面,输入你的昵称,可以选择当前在线的其他用户进行通话,等待对方接受视频邀请即可开始。

演示地址

https://webrtc.laravue.org

项目地址

https://github.com/zmecust/p2p-webrtc

安装

- git clone
- npm i
- npm run dev // 本地测试
- npm run build // 线上环境;
- node server.js

Nginx 反向代理

线上环境需要修改 Room.vue 中的 const socket = io.connect('https://yourdomain');

如果部署到线上环境,可以配置 Nginx 反向代理,并且配置 SSL 证书(WebRTC 必须要使用安全协议,如:https & wss) 如下所示:

server {
        listen 443 ssl;

        ssl_certificate '你的 SSL 证书地址';
        ssl_certificate_key '你的 SSL 证书地址';
        
        ssl_session_cache shared:SSL:50m;
        ssl_session_timeout 1d;
        ssl_session_tickets off;

        server_name '你的域名';
        
        if ($scheme = http) {
                return 301 https://$server_name$request_uri;
        }

        location / {
                proxy_pass    http://127.0.0.1:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
        }
}

Supervisor 守护进程

node 服务由 Supervisor 启动并维护,设置参数如下:

[program:WebRTC]
process_name=%(program_name)s
command=node /var/www/html/p2p-webrtc/server.js --daemon  # node 服务所在地址
autostart=true
autorestart=true
user=root
numprocs=1
redirect_stderr=false
stdout_logfile=/var/log/supervisor/WebRTC.log

如果启动失败,可能需要执行:unlink /run/supervisor.sock

对应的需要修改 server.js 的 app.use(express.static('/var/www/html/p2p-webrtc/dist')); //客户端所在地址,修改成绝对路径,否则会报 404 错误

  • supervisord -c /etc/supervisor/supervisord.conf //起服务,注意 supervisor 配置文件所在目录
  • supervisord shutdown //关闭服务
  • supervisord reload //重启服务

说明

  • 关键是两个文件:server.js 为消息分发的信令服务; 客户端首页面在 src/view/Room.vue
  • 如有任何疑问或者 bug,欢迎联系 root@laravue.org
8 回复

支持一下 不错

我好奇这个视频数据是怎么收发的,

来自酷炫的 CNodeMD

@zswnew 视频收发全部归功于 WebRTC,有兴趣你可以查查相关资料;然后谁与谁通话,这些消息分发则由 socket.io 完成;另外 turn 服务器必不可少,作用是交换两端的主机的网络地址(ICE)。如有兴趣,可以先了解 WebRTC 的相关接口。

@zmecust 好的,非常感谢你的指导

来自酷炫的 CNodeMD

turn服务是自己写的还是用的现有库?前几天刚刚看了相关的文章,ICE协议的STUN实现还是蛮麻烦的

@royalrover 肯定不是自己写的啊! 用的 coturn, Ubuntu下运行 apt-get install coturn,怎么配置可以百度下

回到顶部