WebRTC实现双端音视频聊天功能(Vue3 + SpringBoot )

const stream = await navigator.mediaDevices.getUserMedia({
	video: true,
	audio: true
});

yum install -y make gcc cc gcc-c++ wget openssl-devel libevent libevent-devel openssl 

sudo yum install coturn
# （验证安装）安装程序结束后执行如下命令查看是否正确输出turnserver路径
which turnserver

find / -name turnserver.conf

# 输入命令查看Ip
ifconfig

openssl req -x509 -newkey rsa:2048 -keyout /turn_server_pkey.pem -out /turn_server_cert.pem -days 999 -nodes 

# 网卡名
relay-device=eth0
#内网IP
listening-ip=172.24.52.189 
listening-port=3478
#内网IP，加密访问配置
relay-ip=172.24.52.189
tls-listening-port=5349
# 外网IP
external-ip=自己的外网IP
relay-threads=500
#打开密码验证
lt-cred-mech
cert=/turn_server_cert.pem
pkey=/turn_server_pkey.pem
min-port=40000
max-port=65535
#设置用户名和密码，创建IceServer时使用
user=user:123456
# 外网IP绑定的域名
realm=你自己IP绑定的域名
# 服务器名称，用于OAuth认证，默认和realm相同，部分浏览器本段不设可能会引发cors错误。
server-name=你自己IP绑定的域名
# 认证密码，和前面设置的密码保持一致
cli-password=123456

#开放端口
firewall-cmd --zone=public --add-port=3478/udp --permanent
firewall-cmd --zone=public --add-port=3478/tcp --permanent
#重启防火墙
firewall-cmd --reload

turnserver -o -a -f

// STUN 服务器
const iceServers = [
{
urls: “stun:stun.l.google.com:19302” // Google公开的STUN 服务器
},
{
urls: “stun:自己的STUN服务器IP:3478” // 自己的Stun服务器
},
{
urls: “turn:自己的TRUN服务器IP:3478”, // 自己的TURN服务器
username: “userName”,
credential: “Password”
}
];
// 创建RTC连接对象并监听和获取condidate信息
function createPeerConnection() {
wlog(“开始创建PC对象…”)
peerConnection = new RTCPeerConnection(iceServers);
wlog(“创建PC对象成功”)
// 创建RTC连接对象后连接websocket
initWebSocket();
// 监听网络信息（ICE Candidate）
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
candidateInfo = event.candidate;
wlog(“candidate信息变化…”);
// 将candidate信息发送给远端
setTimeout(()=>{
sendCandidate(event.candidate);
}, 150)
}
};
// 监听远端音视频流
peerConnection.ontrack = (event) => {
nextTick(() => {
wlog(“> 收到远端数据流 <=”)
if (!remoteVideo.value.srcObject) {
remoteVideo.value.srcObject = event.streams[0];
remoteVideo.value.play(); // 强制播放
}
});
// remoteVideo.value.srcObject = event.streams[0];
};
// 监听ice连接状态
peerConnection.oniceconnectionstatechange = () => {
wlog(RTC连接状态改变：${peerConnection.iceConnectionState});
};
// 添加本地音视频流到 PeerConnection
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
}

// 消息处理器 - 解析器
function handleSignalingMessage(message) {
wlog(“收到ws消息，开始解析…”)
wlog(message)
let parseMsg = JSON.parse(message);
wlog(解析结果：${parseMsg});
if (parseMsg.type == “join”) {
joinHandle(parseMsg.data);
} else if (parseMsg.type == “offer”) {
wlog(“收到发起端offer，开始解析…”);
offerHandle(parseMsg.data);
} else if (parseMsg.type == “answer”) {
wlog(“收到接收端的answer，开始解析…”);
answerHandle(parseMsg.data);
}else if(parseMsg.type == “candidate”){
wlog(“收到远端candidate，开始解析…”);
candidateHandle(parseMsg.data);
}
}
// 远端Candidate处理器
async function candidateHandle(candidate){
peerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(candidate)));
wlog(“+++++++ 本端candidate设置完毕 ++++++++”);
}
// 接收端的answer处理
async function answerHandle(answer) {
wlog(“将answer设置为远端信息”);
peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer))); // 设置远端SDP
}
// 发起端offer处理器
async function offerHandle(offer) {
wlog(“将发起端的offer设置为远端媒体信息”);
await peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(offer)));
wlog(“创建Answer 并设置到本地”);
let answer = await peerConnection.createAnswer()
await peerConnection.setLocalDescription(answer);
wlog(“发送answer给发起端”);
// 构造answer消息发送给对端
let paramObj = {
userId: oppositeUserId,
type: “answer”,
data: JSON.stringify(answer)
}
// 执行发送
const res = await axios.post(${BaseUrl}/rtcs/sendMessage, paramObj);
}
// 加入处理器
function joinHandle(userIds) {
// 判断连接的用户个数
if (userIds.length == 1 && userIds[0] == userId) {
wlog(“标识为发起端，等待对方加入房间…”)
isRoomEmpty.value = true;
// 存在一个连接并且是自身，标识我们是发起端
offerFlag = true;
} else if (userIds.length > 1) {
// 对方加入了
wlog(“对方已连接…”)
isRoomEmpty.value = false;

// 取出对方ID
for (let id of userIds) {
  if (id != userId) {
    oppositeUserId = id;
  }
}
wlog(`对端ID: ${oppositeUserId}`)
// 开始交换SDP和Candidate
swapVideoInfo()
}
}