一对一WebRTC视频通话系列(六)——部署到公网

本系列博客主要记录一对一WebRTC视频通话实现过程中的一些重点,代码全部进行了注释,便于理解WebRTC整体实现。


本专栏知识点是通过<零声教育>的音视频流媒体高级开发课程进行系统学习,梳理总结后写下文章,对音视频相关内容感兴趣的读者,可以点击观看课程网址:零声教育


一对一WebRTC视频通话系列往期博客

一对一WebRTC视频通话系列(一)—— 创建页面并显示摄像头画面
一对一WebRTC视频通话系列(二)——websocket和join信令实现
一对一WebRTC视频通话系列(三)——leave和peer-leave信令实现
一对一WebRTC视频通话系列(四)——offer、answer、candidate信令实现
一对一WebRTC视频通话系列(五)——综合调试和功能完善


一对一WebRTC视频通话系列(六)——部署到公网

一、启动coturn

首先进入到coturn目录,利用

# nohup是重定向命令,输出都将附加到当前目录的 nohup.out 文件中; 命令后加 & ,后台执行起来后按ctr+c,不会停止
sudo nohup turnserver -L 0.0.0.0 -a -u sxl:zxc -v -f -r nort.gov &
//前台启动
sudo turnserver -L 0.0.0.0 -a -u sxl:zxc -v -f -r nort.gov

然后查看相应的端口号3478是否存在进程

sudo lsof -i:3478

效果:
在这里插入图片描述

二、nginx环境配置

sudo apt-get update
#安装依赖:gcc、g++依赖库
sudo apt-get install build-essential libtool
#安装 pcre依赖库(http://www.pcre.org/)
sudo apt-get install libpcre3 libpcre3-dev
#安装 zlib依赖库(http://www.zlib.net)
sudo apt-get install zlib1g-dev
#安装ssl依赖库
sudo apt-get install openssl
#下载nginx 1.15.8版本
wget http://nginx.org/download/nginx-1.15.8.tar.gz
tar xvzf nginx-1.15.8.tar.gz
cd nginx-1.15.8/
# 配置,一定要支持https
./configure --with-http_ssl_module
# 编译
make
#安装
sudo make install

nginx默认安装目录为:/usr/local/nginx
可以利用下面三条命令进行操作:

启动:sudo /usr/local/nginx/sbin/nginx
停止:sudo /usr/local/nginx/sbin/nginx ­s stop
重新加载配置文件:sudo /usr/local/nginx/sbin/nginx ­s reload

先启动nginx,然后利用下列命令查看是否启动成功

sudo ps -ef | grep nginx

效果如下:
在这里插入图片描述

三、配置web服务器

首先产生证书:

mkdir -p ~/cert
cd ~/cert
# CA私钥
openssl genrsa -out key.pem 2048
# 自签名证书
openssl req -new -x509 -key key.pem -out cert.pem -days 1095

在这里插入图片描述

配置文件主要包括3部分:
(1)配置自己的证书

ssl_certificate /home/sxl/cert/cert.pem; // 注意证书所在的路径
ssl_certificate_key /home/sxl/cert/key.pem;

(2)配置主机域名或者主机IP

upstream websocket {
	server 192.168.226.3:8099;
}

server_name 192.168.226.3;

(3)端口
客户端与Nginx服务器监听的端口:8098
客户端与Nginx服务器监听的端口:8099

完整配置文件:/usr/local/nginx/conf/conf.d/webrtc­-websocket­-proxy.conf

map $http_upgrade $connection_upgrade {
	default upgrade;
	'' close;
}

upstream websocket {
	server 192.168.226.3:8099;
}

server {
	listen 8098 ssl;
	#ssl on;
	ssl_certificate /home/sxl/cert/cert.pem;
	ssl_certificate_key /home/sxl/cert/key.pem;
	
	server_name 192.168.226.3;
	location /ws {
		proxy_pass http://websocket;
		proxy_http_version 1.1;
		proxy_connect_timeout 4s;
		proxy_read_timeout 6000s; 
		proxy_send_timeout 6000s;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection $connection_upgrade;
	}
}

之后需要配置nginx主配置文件

include /usr/local/nginx/conf/conf.d/*.conf;

配置完成后,输入:

sudo /usr/local/nginx/sbin/nginx 
//如果修改配置,重新加载
sudo /usr/local/nginx/sbin/nginx -s reload

如果配置成功,运行不会报错,效果如下图所示:
在这里插入图片描述

如果80端口被占,会发生报错如下:
在这里插入图片描述
此时采用kil l-9 80删除进程是无效的,需要输入下列命令:

 netstat -ntlp|grep 80
 fuser -k 80/tcp

在这里插入图片描述
之后便可以正常运行。
在这里插入图片描述
信令服务器后台执行:

sudo nohup node ./signal_server.js &
  • 28
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
要使用 webRTC 进行一对一视频通话,需要以下步骤: 1. 建立本地媒体流对象 使用 getUserMedia() 方法获取本地视频和音频流对象。 ```javascript navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(function(localStream) { // localStream 是本地媒体流对象 }) .catch(function(error) { console.log(error); }); ``` 2. 建立 peer connection 对象 使用 RTCPeerConnection() 方法创建 peer connection 对象,并将本地媒体流对象添加到 peer connection 中。 ```javascript var pc = new RTCPeerConnection(); localStream.getTracks().forEach(function(track) { pc.addTrack(track, localStream); }); ``` 3. 建立远程媒体流对象 通过 peer connection 对象,监听远程的媒体流对象。 ```javascript pc.addEventListener('track', function(event) { // event.streams 是一个媒体流对象数组 var remoteStream = event.streams[0]; }); ``` 4. 发送 offer 和 answer 通过 peer connection 对象,发送 offer 和 answer 信令,建立连接。 ```javascript pc.createOffer() .then(function(offer) { return pc.setLocalDescription(offer); }) .then(function() { // 发送 offer 信令 }) .catch(function(error) { console.log(error); }); // 接收到 offer 信令后,回复 answer 信令 pc.setRemoteDescription(offer) .then(function() { return pc.createAnswer(); }) .then(function(answer) { return pc.setLocalDescription(answer); }) .then(function() { // 发送 answer 信令 }) .catch(function(error) { console.log(error); }); // 接收到 answer 信令后,设置远程描述 pc.setRemoteDescription(answer) .catch(function(error) { console.log(error); }); ``` 5. 连接成功后,进行视频通话 当连接成功后,就可以在页面中显示本地视频和远程视频,并进行视频通话了。 ```javascript // 添加本地视频和远程视频 var localVideo = document.getElementById('localVideo'); var remoteVideo = document.getElementById('remoteVideo'); localVideo.srcObject = localStream; remoteVideo.srcObject = remoteStream; ``` 完整的一对一视频通话示例代码请参考:https://webrtc.github.io/samples/src/content/peerconnection/pc1/

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

君莫笑lucky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值