webrtc实现部署到局域网

前面已经实现了一对一视频一对多视频一对多+虚拟视频,学了这么多用不上可真是太难受了哇。所以,这节就来试试把前面做好的项目部署到局域网上,边学边用才能让自己干劲十足。

PS:昨天我自己试着部署到局域网上,部署成功了,但是别人看不到我的直播。奇了怪了,我自己这边开两个页面都能看直播,别人能正常访问我的项目,但是就是看不到直播。经过了一天的排查,晚上做梦都在想那里出了问题,最后可算是解决了。就多加了一行代码: // 如果是自己 且 自己是主播 则直接返回 if (pub.userId === localUserId) { return; }。就这么一行代码,花了我整整一天!!!果然,人菜还得多练多看。

第一步 前端处理

打开constant.js文件,略作修改:

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文件中加入以下代码:

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的配置,这个是我的配置:

js 复制代码
    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;
        #}
    }

这里你可以直接复制,要改的地方主要有三个前端端口地址内网地址还有证书地址。其他的配置不理解没关系,首要目的是能用。

关于证书,安装openssl看这里;使用看这里

如果有问题,可以去看nginx目录下的logs文件,里面有error.log文件,可以从这里找找看;还得注意端口号是不是开放了

遇到Failed to set remote answer sdp: Called in wrong state: stable问题,可以从这里找找答案

这里附上一个用js写的webrtc流程,这也是我昨天找的,感觉还不错,思路非常清晰

最后

下一节再介绍多房间多用户的简单会议系统

另外, 推荐一下我的另一个开源项目:问卷平台

使用的技术栈为react + ts + echarts + 高德地图 + webrtc 目前正在持续开发中。有想要学习的小伙伴可以加入进来,一起交流学习

相关推荐
拉不动的猪36 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程1 小时前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app2 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端