webrtc实现部署到局域网

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

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

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

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

如果有问题,可以去看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

(0)
上一篇 2024年3月6日 下午4:21
下一篇 2024年3月6日 下午4:31

相关推荐

发表回复

登录后才能评论