0

我正在使用 simple-peer 来简化 webrtc 的使用，并且一切正常。但是我面临一个问题，当广播公司启动流并且观众加入流时，没有视频显示给观众。但是，如果广播公司刷新他的页面，视频就会显示在观众端。

广播者.js 

componentDidMount() {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
    })
        .then(stream => {
            // Display own video
            if("srcObject" in this.localVideo.current) {
                this.localVideo.current.srcObject = stream;
            }
            else {
                this.localVideo.current.src = window.URL.createObjectURL(stream);
            }

            // Stream video to attendees
            this.gotMedia(stream);
        })
        .catch(error => {
            console.error(error);
        });
}

gotMedia = (stream) => {
    const broadcaster = new Peer({ initiator: true, stream: stream });

    broadcaster.on("signal", data => {
        this.socket.emit("signal", data);
    });

    this.socket.on("signal", data => {
        broadcaster.signal(data);
    });
};

查看器.js 

componentDidMount() {
    const attendee = new Peer();
    attendee.on("signal", data => {
        this.socket.emit("signal", data);
    });

    this.socket.on("signal", data => {
        attendee.signal(data);
    });

    // Get remote video stream and display it
    attendee.on("stream", stream => {
        if("srcObject" in this.remoteVideo.current) {
            this.remoteVideo.current.srcObject = stream;
        }
        else {
            this.remoteVideo.current.src = window.URL.createObjectURL(stream);
        }
    });
}

服务器 

// Handle socket connections
io.on("connection", socket => {
   socket.on("signal", (data) => {
      socket.broadcast.emit("signal", data);
   });
});
4

1 回答 1

1

发生这种情况的原因是广播公司在发出信号后立即发送信号。所以信号只会从广播公司发送一次，当观众稍后连接时，它不会收到任何信号。

要解决此问题，可以先设置查看器并要求广播公司创建新连接。

在这个github 项目中，您可以看到一个示例，其中可以同时连接 2 个以上的对等点。

这是一个实现：

广播者.js

// this method is the same
componentDidMount() {
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
    })
        .then(stream => {
            // Display own video
            if("srcObject" in this.localVideo.current) {
                this.localVideo.current.srcObject = stream;
            }
            else {
                this.localVideo.current.src = window.URL.createObjectURL(stream);
            }

            // Stream video to attendees
            this.gotMedia(stream);
        })
        .catch(error => {
            console.error(error);
        });
}
// new way to handle
gotMedia = (stream) => {
    this.localStream = stream
    this.broadcaster = new Peer({ initiator: true, stream: this.localStream });
    this.broadcaster.on("signal", data => {
        this.socket.emit("signal", data);
    });
    // destroy current peerconnection and create a new one
    this.socket.on("startConnection", () => {
        if(this.broadcaster) this.broadcaster.destroy()
        this.broadcaster = new Peer({ initiator: true, stream: this.localStream });
        this.broadcaster.on("signal", data => {
            this.socket.emit("signal", data);
        });


    });
    this.socket.on("signal", data => {
         this.broadcaster.signal(data);
    });


};

查看器.js

componentDidMount() {
    const attendee = new Peer();
    attendee.on("signal", data => {
        this.socket.emit("signal", data);
    });

    this.socket.on("signal", data => {
        attendee.signal(data);
    });

    // Get remote video stream and display it
    attendee.on("stream", stream => {
        if("srcObject" in this.remoteVideo.current) {
            this.remoteVideo.current.srcObject = stream;
        }
        else {
            this.remoteVideo.current.src = window.URL.createObjectURL(stream);
        }
    });

    // Ask broadcaster to start his connection
    this.socket.emit("startConnection")
}

服务器

// Handle socket connections
io.on("connection", socket => {
   socket.on("startConnection", () => {
       socket.broadcast.emit("startConnection")
   });

   socket.on("signal", (data) => {
      socket.broadcast.emit("signal", data);
   });
});
于 2020-05-03T19:05:16.843 回答