搭建一个线上版远程视频聊天

目录

 

前言

搭建前端https访问：

配置后端https请求：

---

前言

在另一篇博客中已经实现了远程视频聊天，然而这种方式只能运行在本地或者https服务下，因为navigator.mediaDevices.getUserMedia需要运行在安全模式下，所以这篇文章将对视频聊天做一个改进，达到真正的远程聊天功能
之前的案例：使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天

搭建前端https访问：

搭建https的第一步得有一个服务器，相关的配置说明在我另一篇文章有提到
案例：本地项目上线流程
然后，购买域名并备案，第一次要久一点，大概20天左右
在域名界面进行域名解析和ssl证书下载（后续配置https）

将域名绑定服务器外网ip

域名界面点进管理，购买免费证书并下载，这里用的是Nginx

把下载的key和pem放在Nginx根目录下，部署视频聊天前端文件夹Video至根目录，打开conf文件夹下的nginx.conf文件并编辑

在nginx.conf文件中添加代码，代理Video文件夹下的video.html文件至12345端口

# Video
    server {
        listen       12345;
        server_name  localhost;
        location / {
            root   Video;
            index  video.html;
        }
    }

在nginx.conf文件中添加以下代码配置https证书，将上面的代理网站部署https证书

 # HTTPS server
    #
    server {
       listen       443  ssl;
       server_name  localhost;

       ssl_certificate      ../cert.pem;
       ssl_certificate_key  ../cert.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

        location  /Video/{
           proxy_pass   http://127.0.0.1:12345/;
        }
    }

最后通过访问https://域名/Video/的方式打开前端页面

配置后端https请求：

将之前下载的证书文件复制到server目录，或者其他目录，server能访问到即可

打开server修改代码，之前我们的写法是

const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = require("socket.io")(server);

现在得做个小修改，其他代码不动

const express = require('express')
const app = express();
const fs = require('fs');
const options = {//读取证书文件
  key: fs.readFileSync('cert.key'),
  cert: fs.readFileSync('cert.pem')
};
const server = require('https').createServer(options,app);
const io = require('socket.io')(server);

后端修改成https的目的是因为前端部分放在https服务器上，而后端用http请求方式，浏览器会报http的请求错误

然后把请求地址改为https即可访问

最后我们看看效果
由于电脑上的摄像头无法被两个页面调用，所以我用手机和电脑进行远程视频
电脑端的录屏

手机端录屏

总结：由于视频聊天涉及隐私问题，自己试着研究一下还可以，所以就不放案例试用链接，之前的视频聊天案例