极客观点
项目管理
HarmonyOS
本地测试webRTC，没报任何错，但对端视频就是死活都不开，问了几个群都没人答，自学者好难。有没有思否大佬指点一下啊，先谢为敬。
问题补充：前后端都没报任何错。我确定后端信令的转发是没有问题的。现在贴一下前端调试打印的信息：
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./socket.io/socket.io.js"></script>
<script src="./adapter.js"></script>
<style>
video {
border: 1px solid #eee;
}
</style>
</head>
<body>
<div>
<div class="videoBox">
<video class="video" id="localVideo" autoplay muted></video>
<video class="video" id="remoteVideo" autoplay muted></video>
</div>
<div class="videoFooter row">
<button id="startButton">Start</button>
<button id="btnleave">leave</button>
</div>
<script>
let localVideo = document.getElementById('localVideo')
let remoteVideo = document.getElementById('remoteVideo')
let startButton = document.getElementById('startButton')
let btnleave = document.getElementById('btnleave')
let localStream = null;
let socket;
let pc = false;
var roomid = '111111';
let state = 'init';
function connSignalLerver() {
startButton.disabled = true;
btnleave.disabled = false;
start();
return true;
}
function createPeerConnection() {
if (pc === false) {
console.log('开始创建PeerConnection')
console.log(pc)
pc = new RTCPeerConnection();
pc.onicecandidate = function (e) {
console.log('进入了监听ICE阶段')
console.log("ICE 收集状态: " + e.target.iceGatheringState);
if (e.candidate) {
console.log('本机ice', e.candidate)
sendMessage(roomid, {
type: 'candidate',
candidate: e.candidate
})
}
}
console.log("ICE connection state: " + pc.iceConnectionState);
pc.oniceconnectionstatechange = function (evt) {
console.log("ICE连接状态: " + evt.target.iceConnectionState);
}
localStream.getTracks().forEach((track) => {
console.log('进入了添加流阶段')
pc.addTrack(track);
})
pc.ontrack = (e) => {
console.log('监听到了远端流', e)
remoteVideo.srcObject = e.streams[0];
}
// pc.onaddstream = function (evt) {
// var remote_video = document.getElementById('remote_video');
// remote_video.src = window.URL.createObjectURL(evt.stream);
// }
}
}
function closePeerConnection() {
console.log('已关闭PeerConnection')
if (pc) {
pc.close();
pc = null;
}
}
//媒体协商之发送
function sendMessage(roomid, data) {
console.log('已进入发送阶段', data);
if (socket) {
socket.emit('message', roomid, data);
}
}
function getoffer(desc) {
pc.setLocalDescription(desc);
sendMessage(roomid, desc)
}
function getAnswer(desc) {
console.log('发送了answer')
pc.setLocalDescription(desc);
sendMessage(roomid, desc);
}
function offerError(err) {
console.error('offer创建失败：', err);
}
function answerError() {
console.error('answer创建失败：', err);
}
function call() {
console.log('state状态:', state)
if (state === 'joinde_conn') {
// let offer_options = {
// offerToReceiveAudio: 1,
// offerToReceiveVideo: 1
// }
if (pc != null) {
console.log('发送了offer')
pc.createOffer()
.then(getoffer)
.catch(offerError)
}
}
}
function conn() {
socket = io.connect();
socket.emit('join', roomid)
socket.on('joinde', function (roomid, id) {
console.log('你加入了房间', roomid, id)
createPeerConnection();
})
socket.on('otherjoin', function (roomid, id) {
console.log('第二个加入了房间', id)
state = 'joinde_conn';
if (state === 'joinde_conn') {
createPeerConnection();
console.log('PeerConnection开启了')
call();
}
//到这步这止就可以做媒体协商了
})
socket.on('full', function (data) {
state = 'leaved'
console.log('满了', data)
socket.close();
alert('房间满了，你不能再进来了')
closeLocalMedia();
closePeerConnection();
})
socket.on('leaved', function (roomid, id) {
console.log('离开了房间', id)
state = 'leaved';
socket.close();
startButton.disabled = false;
btnleave.disabled = true;
closeLocalMedia();
closePeerConnection();
})
socket.on('bye', function (roomid, id) {
console.log('bye', id)
state = 'joinde_conn';
socket.close();
closeLocalMedia();
closePeerConnection();
})
//媒体协商之信令处理
socket.on('rtc', function (roomid, data) {
console.log('收到了服务器转发：', data)
if (data) {
if (data.type === 'offer') {
console.log('收到了offer', data)
let offer = new RTCSessionDescription();
offer.sdp = data.sdp;
offer.type = "offer";
pc.setRemoteDescription(offer);
pc.createAnswer()
.then(getAnswer)
.catch(answerError);
} else if (data.type === 'answer') {
console.log('收到了answer', data)
let answer = new RTCSessionDescription();
answer.sdp = data.sdp;
answer.type = "answer";
pc.setRemoteDescription(answer);
} else if (data.type === 'candidate') {
pc.addIceCandidate(data.candidate);
console.log('添加候选人成功', typeof (data.candidate))
} else {
console.error('收到未知类型的信令！', data)
}
}
})
}
function getMediaStream(stream) {
localStream = stream;
localVideo.srcObject = localStream;
conn();
}
function handleError(err) {
console.log('无法获取设备：', err)
}
function start() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.error('你的浏览器不支持WEBRTC')
} else {
let constraints = {
video: true,
audio: true,
}
navigator.mediaDevices.getUserMedia(constraints)
.then(getMediaStream)
.catch(handleError)
}
}
function closeLocalMedia() {
if (localStream && localStream.getTracks()) {
localStream.getTracks().forEach((track) => {
track.stop();
});
}
}
function leave() {
if (socket) {
socket.emit('leave', '1111')
closePeerConnection();
closeLocalMedia();
}
startButton.disabled = false;
btnleave.disabled = true;
}
startButton.onclick = connSignalLerver;
btnleave.onclick = leave;
</script>
</body>
</html>
node.js代码：
const express = require('express');
const app = express();
let server = require('http').Server(app)
let io = require('socket.io')(server);
app.set('view engine', 'ejs');
app.use(express.static('public'))
app.get('/', function (req, res) {
res.render('index')
})
let num = 0;
io.on('connection', function (socket) {
console.log('有人连接了')
socket.on('join', function (data) {
num = num + 1;
if (num > 2) {
socket.emit('full', '人满了')
}
socket.join(data)
socket.roomid = data;
socket.emit('joinde', data, socket.id)
console.log(socket.id + '加入房间成功')
if (num == 2) {
socket.to(data).emit('otherjoin', data, socket.id)
}
})
socket.on('message', function (roomid, data) {
console.log(roomid, data)
socket.to(roomid).emit('rtc', roomid, data)
})
socket.on('leave', function () {
num = num - 1;
socket.broadcast.emit('leaved', socket.id, socket.roomid)
})
socket.on('disconnect', function () {
num = num - 1;
socket.broadcast.emit('bye', socket.id, socket.roomid)
})
// socket.on('offer', function (data) {
// socket.broadcast.emit('offer', data)
// })
// socket.on('answer', function (data) {
// socket.broadcast.emit('ice', data)
// })
})
server.listen(3000, '0.0.0.0', function () {
console.log('服务器开始运行！，http://127.0.0.1:3000/')
});
大佬，这个问题，你解决了没有？我也遇到这个问题，你找到问题在哪里没有？