directory

 

preface

Build front-end HTTPS access:

Configuring back-end HTTPS requests:

preface

inAnother blog postHas achieved in the remote video chat. However, this approach can only be run under local or HTTPS service, because the navigator. MediaDevices. GetUserMedia needs to be run in safe mode, so this article will make an improvement to video chat, to achieve the real remote chat function

Previous cases:Use JS+socket. IO +WebRTC+ nodeJS + Express to build a simple remote video chat

Build front-end HTTPS access:

The first step to setting up HTTPS is to have a server, which I covered in another article

Case: local project on-line process

Then, buy the domain name and file, the first time is a little longer, about 20 days

Resolve the domain name and download the SSL certificate on the domain name page (HTTPS is configured later)



Bind the domain name to the external IP address of the server



Domain interface click management, purchase free certificate and download, here using 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 it



Add code to the nginx.conf file to proxy the Video. HTML file in the Video folder to port 12345

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

Add the following code to the nginx.conf file to configure HTTPS certificates to deploy HTTPS certificates for the proxy sites above

 # HTTPS server
    # server {
       listen       443ssl; 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 TLSv11. TLSv12.;
        ssl_prefer_server_ciphers on;

        location  /Video/{
           proxy_pass   http:/ / 127.0.0.1:12345 /;}}Copy the code

And finally by visitinghttps:// / Video/domain nameThe way to open the front page

Configuring back-end HTTPS requests:

Copy the downloaded certificate file to the server directory or another directory that the server can access



Open up the server and modify the code, the way we wrote it before

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

Now I have to make a small change, so the rest of the code doesn’t move

const express = require('express')
const app = express();
const fs = require('fs');
const options = {// Read the certificate file
  key: fs.readFileSync('cert.key'),
  cert: fs.readFileSync('cert.pem')};const server = require('https').createServer(options,app);
const io = require('socket.io')(server);
Copy the code

The destination of the backend is changed to HTTPSBecause the front-end is placed on an HTTPS server and the back-end uses HTTP, the browser reports an HTTP request error

Then change the request address to HTTPS to access

Finally, let’s look at the effect

Since the camera on my computer couldn’t be called by both pages, I used my phone and computer for remote video

Computer side recording screen



Screen recording on mobile phone



Conclusion: Since video chat involves privacy issues, it is ok to try to study it yourself, so I will not put the link of trial case.The video chat case before