reactjs Twilioビデオチャット - ビデオをリモートメディアとして追加する

Question

私はreactjsにtwilioビデオチャットベースのコンポーネントで作業しています。誰かが電話に参加したときに、この人のビデオがリモートメディアに添付されることが提案されましたか？

私は、反応型のTwilioビデオチャットの構築に関するいくつかのリンクを発見しました。ここ

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

Answer 1

Twilioの開発者エバンジェリスト。

participantビデオルームに参加してビデオを見て、そのオーディオを聞きたい場合は、incoming media tracksをアプリケーションのビデオ要素に接続する必要があります。参加者のtrackAddedイベントとtrackRemovedイベントを聞いて、トラックのアタッチとデタッチを知ることができます。たとえば：

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(); 
    }) 
} 

私は自分自身を反応させるためにはかなり新しいですが、私はエディが取得するコンポーネントのライフサイクルイベントでJSXでrefを使用して、彼のブログの記事にメディアを添付して、this.refs.localMediaする方法を考えます要素への参照とメディアを添付する、良いアプローチです。

ブログ投稿では、新しいRooms APIではなく、廃止予定のビデオ用Conversations APIが使用されています。しかし、参加者/トラックのモデルとDOMへのトラックの添付は似ています。

これがまったく役に立ったら教えてください。