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

短命女 2022-11-28 10:36 77阅读 0赞

**目录**

前言

搭建前端https访问：

配置后端https请求：

--------------------

## 前言 ##

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

## **搭建前端https访问：** ##

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

![20200817115151901.png][]  
域名界面点进管理，购买免费证书并下载，这里用的是Nginx  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2][]

把下载的key和pem放在Nginx根目录下，部署视频聊天前端文件夹Video至根目录，打开conf文件夹下的nginx.conf文件并编辑  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4][]  
在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能访问到即可

![20200817154313619.png][]  
打开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的请求错误  
![20200817160942504.png][]![20200817160220448.png][]

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

**最后我们看看效果  
由于电脑上的摄像头无法被两个页面调用，所以我用手机和电脑进行远程视频  
电脑端的录屏**  
![20200817171142829.gif][]  
**手机端录屏**  
![20200817171521268.gif][]  
**总结：由于视频聊天涉及隐私问题，自己试着研究一下还可以，所以就不放案例试用链接，[之前的视频聊天案例][Link 3]**

[Link 1]: https://blog.csdn.net/time_____/article/details/104801205
[Link 2]: https://blog.csdn.net/time_____/article/details/104439713
[20200817114950588.png]: /images/20221124/f4c8f3a42a354ca5bc4cc8ca0483d85c.png
[20200817115151901.png]: /images/20221124/753745b28830428c8f4d8a1bc9b5f6ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200817115741565.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200817115604189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2]: /images/20221124/7431b3bda28d48d0a3b4f68064014c96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200817152152668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4]: /images/20221124/d6a4c72086454ca8844ecbffc47840b4.png
[20200817154313619.png]: /images/20221124/a51ce360ec0c416e81b824818692d2fe.png
[20200817160942504.png]: https://img-blog.csdnimg.cn/20200817160942504.png
[20200817160220448.png]: /images/20221124/447a03d5f5934231bd8a81d73be3f2ee.png
[20200817171142829.gif]: /images/20221124/e77567d06f8a42049cf600f76a974ed5.png
[20200817171521268.gif]: /images/20221124/745b2c2621544cbda3c7a75dcbd6f3f4.png
[Link 3]: https://gitee.com/DieHunter/myCode/tree/master/videoSteam