ブラウザでビデオを見る

Twilio APIを使用して、iPadとノートパソコンの間でビデオチャットを作成します。ブラウザでビデオを見る

これはiPad用にうまくいきます。私は2つの画面を持っています（大きな画面にはラップトップからのビデオが含まれ、小さな画面にはiPadからのビデオが含まれています）。しかし、私はラップトップのブラウザーに1つの大きな画面（iPadからのビデオ付き）しか持っていませんし、ラップトップのカメラからのビデオで小さな画面を持っていません。

マイコード：

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="http://media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     var accessToken = "..." 
     const Video = Twilio.Video; 
     const client = new Video.Client(accessToken); 
     const localMedia = new Video.LocalMedia(); 

     Video.getUserMedia().then(mediaStream => { 
      localMedia.addStream(mediaStream); 
     }); 

     client.connect({ 
      to: 'my-room', 
      localMedia: localMedia 
     }).then(room => { 
      const localParticipant = room.localParticipant;      
      room.participants.forEach(participant => {      
       participant.on('trackAdded', track => { 
        if (track.kind === 'audio') { 
         console.log('Added an AudioTrack %s', track.id); 
        } else { 
         console.log('Added a VideoTrack %s', track.id); 
        } 
       }); 
       participant.on('trackRemoved', track => { 
        if (track.kind === 'audio') { 
         console.log('Removed an AudioTrack %s', track.id); 
        } else { 
         console.log('Removed a VideoTrack %s', track.id); 
        } 
       });  
       participant.on('trackEnabled', track => { 
        if (track.kind === 'audio') { 
         console.log('Enabled AudioTrack %s', track.id); 
        } else { 
         console.log('Enabled VideoTrack %s', track.id); 
        } 
       });  
       participant.on('trackDisabled', track => { 
        if (track.kind === 'audio') { 
         console.log('Disabled AudioTrack %s', track.id); 
        } else { 
         console.log('Disabled VideoTrack %s', track.id); 
        } 
       }); 

       const element = participant.media.attach(); 
       document.body.appendChild(element); 

       participant.media.tracks.forEach(track => { 
        track.attach('#track-view'); 
       }); 
      }); 

      room.once('participantConnected', participant => { 
       console.log('Participant "%s" has connected to the Room', participant.identity); 
      }); 

      room.once('participantDisconnected', participant => {     
       console.log('Participant "%s" has disconnected from Room', participant.identity); 
      }); 

     }, error => { 
      console.error('Failed to connect to the Room', error); 
     }); 
    </script> 
</body> 
</html>

私のラップトップのブラウザでノートパソコンからの映像を小さな画面を表示するための最良の方法は何ですか？

出典

2017-03-01 Kirill

ここではTwilioの開発者エバンジェリストです。

ローカルのメディアをどこにでも貼っていないように見えます。

Video.getUserMedia().then(mediaStream => { 
    localMedia.addStream(mediaStream); 
    const element = localMedia.attach(); 
    document.body.appendChild(element); 
});

私はそれがまったく役に立たないかどうか教えてください。

出典

2017-03-06 17:08:22 philnash

こんにちは@philnash - 似たような問題を手伝ってもらえますか？それはここにリンクされています：https://stackoverflow.com/questions/44661361/twilio-programmable-video-js-ionic（私はかなり瞬間に固執しています:(） –

ブラウザでビデオを見る

答えて

関連する問題