Build an online version of remote video chat

table of Contents

Preface

In another blog , remote video chat has been implemented, but this method can only run on local or https services, because navigator.mediaDevices.getUserMedia needs to run in safe mode, so this article will do a video chat Improvement to achieve true remote chat function.
Previous case: Use JS+socket.io+WebRTC+nodejs+express to build a simple version of remote video chat

Set up front-end https access:

The first step to set up https is to have a server. The related configuration instructions are mentioned in another article of my
case: the local project online process.
Then, buy the domain name and file it. The first time will take a little longer, about 20 days
in the domain name. Interface for domain name resolution and ssl certificate download (subsequent configuration https)

bind the domain name to the server’s external network ip

Click into the management on the domain name interface, buy a free certificate and download it, here is Nginx

Put the downloaded key and pem in the Nginx root directory, deploy the video chat front-end folder Video to the root directory, open the nginx.conf file in the conf folder and edit

and add the code in the nginx.conf file to proxy the Video folder Video.html file to port 12345

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

Add the following code to the nginx.conf file to configure the https certificate, and deploy the https certificate for the above proxy website

 # 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/;
        }
    }

Finally , open the front-end page by visiting https://domain name/Video/

Configure the backend https request:

Copy the previously downloaded certificate file to the server directory, or other directories, and the server can access it

Open the server to modify the code, before our writing was

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

Now I have to make a small modification, the other code does not change

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);

The purpose of changing the back end to https is because the front end is placed on the https server, and the back end uses http request mode, the browser will report http request errors

Then change the request address to https to access

Finally, we look at the results
because the camera on the computer can not be called two pages, so I'm using a mobile phone for remote video and computer
screen recording computer end of

the phone side screen recording

Summary: As the video chat privacy concerns that he may also try to look , So don’t put the case trial link, the previous video chat case