搭建一个线上版远程视频聊天
目录
前言
搭建前端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端口
# Videoserver {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即可访问
最后我们看看效果
由于电脑上的摄像头无法被两个页面调用,所以我用手机和电脑进行远程视频
电脑端的录屏
手机端录屏
总结:由于视频聊天涉及隐私问题,自己试着研究一下还可以,所以就不放案例试用链接,之前的视频聊天案例
搭建一个线上版远程视频聊天相关推荐
- 使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天
目录 WebRTC 代码原理及流程 源码:git@gitee.com:DieHunter/myCode.git仓库:myCode/videoSteam 前端 先附上HTML和CSS 完整的socket ...
- Guacamole搭建,一个基于HTML5的远程桌面
介绍 Guacamole可以同HTML5来代理远程桌面协议(如: VNC, RDP, Telnet, SSH) 官网: http://guac-dev.org/ 其由许多部件组成的轻量级web应用程序 ...
- 脱单盲盒源码,线上脱单盲盒网站源码分析下载,脱单盲盒线上版源码开发
在年轻人群体中流行的"盲盒"衍生出了新玩法,成为一种新型的交友方式.近日,一些"脱单盲盒"的摊位出现在广州街头夜市,顾客只要花一块钱就可买到一位异性的联系方式, ...
- cpu飙升 死循环_java排查一个线上死循环cpu暴涨的过程分析
问题,打一个页面cpu暴涨,打开一次就涨100%,一会系统就卡的不行了. 排查方法,因为是线上的linux,没有用jvm监控工具rim链接上去. 只好用命令排查: top cpu排序,一个java进程 ...
- 在线教育、精品课程、直播课、课程交流、历史观看、订单、收藏、余额、推荐、关注、购买课程、充值、产品设计、线上教育、视频课程、教育app、在线课堂、网络教学、远程教育、教学辅导、学习平台、K12教育
在线教育.精品课程.直播课.课程交流.历史观看.订单.收藏.余额.推荐.关注.购买课程.充值.产品设计.线上教育.视频课程.教育app.在线课堂.网络教学.远程教育.教学辅导.学习平台.K12教育 A ...
- java线程堆栈nid.tid_java排查一个线上死循环cpu暴涨的过程分析
问题,打一个页面cpu暴涨,打开一次就涨100%,一会系统就卡的不行了. 排查方法,因为是线上的linux,没有用jvm监控工具rim链接上去. 只好用命令排查: top cpu排序,一个java进程 ...
- go build 无文件_Go之Gin+Vue开发一个线上外卖应用
我们将开始使用Gin框架开发一个api项目,我们起名为:云餐厅.如同饿了么,美团外卖等生活服务类应用一样,云餐厅是一个线上的外卖应用,应用的用户可以在线浏览商家,商品并下单. 该项目分为客户端和服务端 ...
- 我们有一个线上的项目,刚启动完就占用了超过 1.5G,一次大量 JVM Native 内存泄露的排查分析(64M 问题)
我们有一个线上的项目,刚启动完就占用了使用 top 命令查看 RES 占用了超过 1.5G,这明显不合理,于是进行了一些分析找到了根本的原因,下面是完整的分析过程,希望对你有所帮助. 会涉及到下面这些 ...
- ubuntu 搭建一个没有上传限制,支持多用户访问,管理用户下载上传,界面优雅,文件互通的网盘(支持nas)
一个没有上传限制,支持多用户访问,管理用户下载上传,界面优雅,文件互通的网盘! (Alist + Samba) 运行环境 ubuntu 20.04 Alist `Alist` 官网 https:// ...
最新文章
- java删除jtable一行的值_JTable中删除一行数据
- python课后题答案第五章_Python语言程序设计(美-梁勇)第5章习题解答
- 【结论】棋盘(jzoj 2297)
- c#让电脑锁定、注销、关机
- WPF中的图表设计器 – 2
- 笔记本电脑自带麦克风吗_想让声音变得好听吗,不花一分钱,让你的电脑拥有外置麦克风...
- android基础面试题(三)
- 实训以来,到这里的次数少了!
- [cocos2dx]斗地主制作之洗牌算法
- 前端求职简历模板,一投即过!
- 短视频去水印接口支持全网解析源码/自定义API接口
- 用帕累托图进行数据分析
- 6sigma精益改善-常用术语和方法工具
- IDEA连接MySQL数据源配置和mybatis整合
- 物联网模块选择注意事项
- 剑指台积电!英特尔砸200亿美元建厂进军芯片代工
- 手机App测试点归纳
- JAVA ECLIPSE安装
- 多校训练2 F Girlfriend 数论(球冠)
- 华大单片机HC32L130F8UA 串口烧录程序