WebRTC 视频通话小 demo，采用 node 和 vue

开发 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://laravue.xyz

项目地址

https://github.com/zmecust/Vue-WebRTC2.0

安装

- 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/Vue-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/Vue-WebRTC/dist')); //客户端所在地址，修改成绝对路径，否则会报 404 错误