WebRTC 視頻 Stream 收到但不播放
[英]WebRTC Video Stream Received but Not Playing
問題描述
我不知道我的應用程序出了什么問題，一切似乎都應該正常工作，但就是沒有。 我想制作一個簡單的 facetime 之類的應用程序。 我正在使用一個簡單的設置，它提供一個 index.html 文件並設置了 websockets。 客戶端連接到 socket.io 中的一個房間，然后他們嘗試通過 RTCPeerConnnection 進行連接。 接收者從調用者那里取回媒體 stream object 但是當我將它添加到視頻 elements.srcObject 屬性時它不起作用，它會無限加載而不會拋出任何錯誤。
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video autoplay id="me"></video>
<video controls autoplay id="partner"></video>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script>
const initiator = (location.hash === "#initiator")? true: false;
const socket = io("http://127.0.0.1:8000");
if(!initiator){
peer = new RTCPeerConnection();
peer.onaddstream = stream=>{
let video = document.getElementById("partner");
video.srcObject = stream.stream;
console.log(stream)
}
socket.emit("createRoom", "room");
socket.on("roomCreated", ()=>{
console.log("room made");
});
socket.on("startVideoRequest", remote=>{
peer.setRemoteDescription(remote)
.then(()=>{
return peer.createAnswer()
})
.then(sdp=>{
peer.setLocalDescription(sdp)
})
.then(()=>{
socket.emit("acceptVideoRequest", {id: "room", sdp: peer.localDescription});
})
.catch(err=>{
console.log(err);
})
});
}else {
socket.emit("joinRoom", "room");
const peer = new RTCPeerConnection({
initiator,
});
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(stream=>{
peer.addStream(stream);
peer.createOffer()
.then(sdp=>{
peer.setLocalDescription(sdp)
})
.then(()=>{
socket.emit("startVideo", {id: "room", sdp: peer.localDescription});
})
.catch(err=>{
console.log(err);
})
})
socket.on("videoRequestAccepted", data=>{
peer.setRemoteDescription(data);
});
}
</script>
</html>
index.js（服務器）：
const express = require("express");
const http = require("http");
const socketIO = require("socket.io");
const port = process.env.PORT || 8000;
const app = express();
app.get("/", (req, res)=>{
res.sendFile(`${__dirname}/index.html`)
});
const server = http.createServer(app);
const io = socketIO(server);
let rooms = [];
io.on("connection", (socket)=>{
console.log(rooms)
socket.emit("getRooms", rooms);
socket.on("disconnect", ()=>{
console.log("disconnected")
rooms = [];
})
socket.on("createRoom", (id)=>{
socket.join(id);
rooms.push(id);
socket.emit('roomCreated');
});
socket.on("joinRoom", (id)=>{
socket.join(id);
io.to(id).emit('roomJoined');
});
socket.on("startVideo", ({id, sdp})=>{
io.to(id).emit('startVideoRequest', sdp)
});
socket.on("acceptVideoRequest", ({id, sdp})=>{
io.to(id).emit('videoRequestAccepted', sdp);
})
});
server.listen(port, ()=>console.log("running"));
1 個解決方案
解決方案1
0 2020-06-20 15:40:44
您可能對音頻自動播放不起作用這一事實感到困惑。
為了讓它工作，我做了兩件事：
- 設為靜音
- 確保用戶首先按下了頁面上的按鈕
有關示例代碼，請參閱https://github.com/pipe/two/blob/master/index.html#L73 ，有關討論，請參閱 https ://webrtchacks.com/autoplay-restrictions-and-webrtc/ 。
解決方案2
0 2020-06-29 17:20:51
我不知道我的應用程序出了什么問題，一切似乎都應該正常工作，但只是沒有。 我想做一個簡單的facetime之類的應用程序。 我正在使用一個簡單的設置來提供 index.html 文件並設置了 websockets。 客戶端連接到 socket.io 中的房間，然后他們嘗試通過 RTCPeerConnnection 進行連接。 接收者從調用者那里取回媒體 stream object 但是當我將它添加到 video elements.srcObject 屬性時它只是不起作用，它會無限加載拋出沒有錯誤。
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video autoplay id="me"></video>
<video controls autoplay id="partner"></video>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script>
const initiator = (location.hash === "#initiator")? true: false;
const socket = io("http://127.0.0.1:8000");
if(!initiator){
peer = new RTCPeerConnection();
peer.onaddstream = stream=>{
let video = document.getElementById("partner");
video.srcObject = stream.stream;
console.log(stream)
}
socket.emit("createRoom", "room");
socket.on("roomCreated", ()=>{
console.log("room made");
});
socket.on("startVideoRequest", remote=>{
peer.setRemoteDescription(remote)
.then(()=>{
return peer.createAnswer()
})
.then(sdp=>{
peer.setLocalDescription(sdp)
})
.then(()=>{
socket.emit("acceptVideoRequest", {id: "room", sdp: peer.localDescription});
})
.catch(err=>{
console.log(err);
})
});
}else {
socket.emit("joinRoom", "room");
const peer = new RTCPeerConnection({
initiator,
});
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(stream=>{
peer.addStream(stream);
peer.createOffer()
.then(sdp=>{
peer.setLocalDescription(sdp)
})
.then(()=>{
socket.emit("startVideo", {id: "room", sdp: peer.localDescription});
})
.catch(err=>{
console.log(err);
})
})
socket.on("videoRequestAccepted", data=>{
peer.setRemoteDescription(data);
});
}
</script>
</html>
index.js（服務器）：
const express = require("express");
const http = require("http");
const socketIO = require("socket.io");
const port = process.env.PORT || 8000;
const app = express();
app.get("/", (req, res)=>{
res.sendFile(`${__dirname}/index.html`)
});
const server = http.createServer(app);
const io = socketIO(server);
let rooms = [];
io.on("connection", (socket)=>{
console.log(rooms)
socket.emit("getRooms", rooms);
socket.on("disconnect", ()=>{
console.log("disconnected")
rooms = [];
})
socket.on("createRoom", (id)=>{
socket.join(id);
rooms.push(id);
socket.emit('roomCreated');
});
socket.on("joinRoom", (id)=>{
socket.join(id);
io.to(id).emit('roomJoined');
});
socket.on("startVideo", ({id, sdp})=>{
io.to(id).emit('startVideoRequest', sdp)
});
socket.on("acceptVideoRequest", ({id, sdp})=>{
io.to(id).emit('videoRequestAccepted', sdp);
})
});
server.listen(port, ()=>console.log("running"));
WebRTC視頻流錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.