WebRTC 视频 Stream 收到但不播放

Question

I have no idea what's going wrong with my app, everything seems like it should be working but just isnt.我不知道我的应用程序出了什么问题，一切似乎都应该正常工作，但就是没有。 I want to make a simple facetime like app.我想制作一个简单的 facetime 之类的应用程序。 I'm using a simple setup that serves an index.html file and and has websockets set up.我正在使用一个简单的设置，它提供一个 index.html 文件并设置了 websockets。 The client connects to a room in socket.io and then they try to connect via RTCPeerConnnection.客户端连接到 socket.io 中的一个房间，然后他们尝试通过 RTCPeerConnnection 进行连接。 The recipient gets back the media stream object from the caller but when I add it on the video elements.srcObject property it just doesnt work, it'll infinitely load throwing no errors.接收者从调用者那里取回媒体 stream object 但是当我将它添加到视频 elements.srcObject 属性时它不起作用，它会无限加载而不会抛出任何错误。

index.html:索引.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(server): 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"));

Answer 1

You are probably triping over the fact that autoplay on audio doesn't work.您可能对音频自动播放不起作用这一事实感到困惑。

To have it work, I do two things:为了让它工作，我做了两件事：

set muted设为静音
make sure the user has pressed a button on the page first确保用户首先按下了页面上的按钮

see https://github.com/pipe/two/blob/master/index.html#L73 for example code and https://webrtchacks.com/autoplay-restrictions-and-webrtc/ for a discussion.有关示例代码，请参阅https://github.com/pipe/two/blob/master/index.html#L73 ，有关讨论，请参阅 https ://webrtchacks.com/autoplay-restrictions-and-webrtc/ 。

Answer 2

I have no idea what's going wrong with my app, everything seems like it should be working but just isnt.我不知道我的应用程序出了什么问题，一切似乎都应该正常工作，但只是没有。 I want to make a simple facetime like app.我想做一个简单的facetime之类的应用程序。 I'm using a simple setup that serves an index.html file and and has websockets set up.我正在使用一个简单的设置来提供 index.html 文件并设置了 websockets。 The client connects to a room in socket.io and then they try to connect via RTCPeerConnnection.客户端连接到 socket.io 中的房间，然后他们尝试通过 RTCPeerConnnection 进行连接。 The recipient gets back the media stream object from the caller but when I add it on the video elements.srcObject property it just doesnt work, it'll infinitely load throwing no errors.接收者从调用者那里取回媒体 stream object 但是当我将它添加到 video elements.srcObject 属性时它只是不起作用，它会无限加载抛出没有错误。

index.html:索引.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(server): 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 视频 Stream 收到但不播放

问题描述

1 个解决方案

解决方案1
0 2020-06-20 15:40:44

解决方案2
0 2020-06-29 17:20:51

WebRTC 视频 Stream 收到但不播放

问题描述

1 个解决方案

解决方案1 0 2020-06-20 15:40:44

解决方案2 0 2020-06-29 17:20:51

解决方案1
0 2020-06-20 15:40:44

解决方案2
0 2020-06-29 17:20:51