前面已经实现了
一对一视频
、一对多视频
和一对多+虚拟视频
,学了这么多用不上可真是太难受了哇。所以,这节就来试试把前面做好的项目部署到局域网上,边学边用才能让自己干劲十足。
PS:昨天我自己试着部署到局域网上,部署成功了,但是别人看不到我的直播。奇了怪了,我自己这边开两个页面都能看直播,别人能正常访问我的项目,但是就是看不到直播。经过了一天的排查,晚上做梦都在想那里出了问题,最后可算是解决了。就多加了一行代码: // 如果是自己 且 自己是主播 则直接返回 if (pub.userId === localUserId) { return; }
。就这么一行代码,花了我整整一天!!!果然,人菜还得多练多看。
第一步 前端处理
打开constant.js
文件,略作修改:
// 这个 注释掉
export const serverUrl = 'wss://127.0.0.1:18080'
// 改成下面这个
const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
const host = window.location.host
const server = protocol + host
export const serverUrl = process.env.NODE_ENV === 'development' ? 'ws://127.0.0.1:18080' : server
当然,这里代码写的不是很优雅。但是,目前最主要的目的是能用就行,所以这里后面再改。
然后再执行npm run build
,打包出dist
文件。
第二步 后端处理
打开后端文件,将打包好的dist
文件放到根目录下,然后在app.js
文件中加入以下代码:
app.use(express.static('./dist'));
app.use(function (req,res,next) {
console.log(__dirname,'xxxx');
const filePath = path.join(__dirname,'/dist/index.html'); // 使用 path.join 将文件路径转换为绝对路径
res.sendFile(filePath);
});
里面dist
的路径要和你放dist
文件的路径保持一致。
第三步 nginx代理
不会nginx的,可以看这篇简单理解下,安装下载里面也有。
这里主要是nginx的配置,这个是我的配置:
server {
listen 8088; # 前端端口地址
listen 443 ssl http2;
server_name 你的内网地址;
ssl_certificate "D:\webRTC\server.crt"; # 证书地址
ssl_certificate_key "D:\webRTC\server.key"; # 证书地址
# http重定向到https
if ($scheme = http) {
return 301 https://$host:443$request_uri;
}
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:18080; # 这里就是信令服务启动的服务地址
# proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
## 信令核心配置 必须开启支持 websocket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# proxy_redirect http:// https://;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
这里你可以直接复制,要改的地方主要有三个前端端口地址
、内网地址
还有证书地址
。其他的配置不理解没关系,首要目的是能用。
如果有问题,可以去看nginx目录下的logs
文件,里面有error.log
文件,可以从这里找找看;还得注意端口号是不是开放了
遇到Failed to set remote answer sdp: Called in wrong state: stable
问题,可以从这里找找答案
这里附上一个用js写的webrtc流程,这也是我昨天找的,感觉还不错,思路非常清晰
最后
下一节再介绍多房间多用户的简单会议系统
另外, 推荐一下我的另一个开源项目:问卷平台
使用的技术栈为react + ts + echarts + 高德地图 + webrtc 目前正在持续开发中。有想要学习的小伙伴可以加入进来,一起交流学习
原文链接:https://juejin.cn/post/7343138804473298979 作者:cxyi7