reactjs Twilio Video-Chat - Anfügen von Video als Remote-Medien

Question

Ich bin neu zu reactjs und arbeitet an einer Twilio-Video-Chat-basierten Komponente. Es wurde vorgeschlagen, dass das Video dieser Person an Remote-Medien angehängt wird, wenn jemand an dem Anruf teilnimmt.

Ich habe einige Links gefunden, die sich auf den Aufbau eines reaktivierten Twilio Video-Chats beziehen.

https://www.twilio.com/blog/2016/03/building-a-react-powered-video-chat.html

Answer 1

Twilio Entwickler Evangelist hier.

Wenn ein participant einem Videoraum beitritt und Sie ihr Video sehen und ihr Audio hören möchten, müssen Sie ihr incoming media tracks mit einem Videoelement in Ihrer Anwendung verbinden. Sie können die Ereignisseund des Teilnehmers abhören, so dass Sie wissen, wann Sie die Titel anhängen und entfernen. Zum Beispiel:

room.on('participantConnected', function(participant) { 
    participant.on('trackAdded', function(track) { 
    // Attach the track to a DOM element that you have access to. 
    // This creates a <video> element for VideoTracks and an <audio> element for AudioTracks 
    track.attach(element); 
    }); 

    participant.on('trackRemoved', function(track) { 
    track.detach(); 
    }) 
} 

Ich bin ziemlich neu, mich zu reagieren, aber ich denke, die Art und Weise, dass Eddie die Medien in seiner Blog-Post angebracht, ein ref in der JSX und anschließend this.refs.localMedia in dem Komponentenlebenszyklus Ereignisse die erhalten Verweis auf das Element und befestigen Sie die Medien, ist ein guter Ansatz.

Beachten Sie, dass in diesem Blogpost die veraltete Conversations-API für Video und nicht die neue Rooms-API verwendet wird. Das Modell "Teilnehmer/Tracks" und das Hinzufügen von Tracks zum DOM sind jedoch ähnlich.

Lassen Sie mich wissen, ob dies überhaupt hilft.