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 目前正在持续开发中。有想要学习的小伙伴可以加入进来，一起交流学习

webrtc实现部署到局域网

第一步 前端处理

第二步 后端处理

第三步 nginx代理

最后

第一步前端处理

第二步后端处理