WebRTC实现部署到局域网

前面已经实现了一对一视频、一对多视频和一对多+虚拟视频，所以，这节就来试试把前面做好的项目部署到局域网上，边学边用才能让自己干劲十足。

粉丝福利，免费领取C++音视频学习资料包+学习路线大纲、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

第一步前端处理

打开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 + hostexport 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重定向到httpsif ($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文件，可以从这里找找看；还得注意端口号是不是开放了.