Невозможно передать потоковое видео на одноранговый узел, когда одноранговый соединяется с помощью простого однорангового - PullRequest
Новая
       66

Невозможно передать потоковое видео на одноранговый узел, когда одноранговый соединяется с помощью простого однорангового

0 голосов
/ 25 марта 2020

Я использую simple-peer для упрощения использования webrt c, и все работает нормально. Но я сталкиваюсь с проблемой, когда вещатель запускает поток и зритель присоединяется к потоку, видео не отображается для зрителя. Но затем, если вещатель обновляет свою страницу, видео отображается на стороне зрителя.

Broadcaster. 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);
   });
});

1 Ответ

0 голосов
/ 03 мая 2020

Причина, по которой это происходит, заключается в том, что вещатель посылает сигнал, как только он сделан. Таким образом, сигнал будет отправлен от вещателя только один раз, когда зритель подключится позже, он не получит никакого сигнала.

Чтобы решить эту проблему, можно сначала настроить программу просмотра и попросить вещателя создать новое соединение.

В этом проекте github вы можете увидеть пример, где более 2 партнера могут быть подключены одновременно.

Вот реализация:

Broadcaster. 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);
   });
});
...