/Vue-WebRTC2.0

实现通过拨号方式建立点对点视频通话连接

Primary LanguageJavaScript

vue-webrtc

A Vue.js project about video communication

演示地址

项目概述

  • 实现通过拨号方式建立点对点视频通话连接

安装

  • 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 错误

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

说明

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

For detailed explanation on how things work, checkout the guide and docs for vue-loader.