src不顯示的視頻RTC

我使用他們的JavaScript API設置Twilio Video。我的問題是，當我將參與者視頻流附加到div上時，Twilio會將適當的視頻標籤添加到DOM，但我無法看到參與者的視頻。這裏是一個腳本，我嘲笑來隔離問題：src不顯示的視頻RTC

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script> 
</head> 
<body> 
    <div id="local"><video height=300 width=300></video></div> 
    <div id="remote"></div> 
    <script> 
    var Video = Twilio.Video; 
    var localMedia = new Video.LocalMedia(); 
    var user_uuid = scramble(); 
    var localVideo = document.querySelector("#local video"); 

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia || navigator.mediaDevices.getUserMedia; 

    navigator.getUserMedia({video: true, audio: true}, function(stream){ 
     localVideo.src = window.URL.createObjectURL(stream); 
     localMedia.addStream(stream); 

     $.get("/api/match", 
     { 
      user_uuid: user_uuid 
     } 
    ).done(function(body){ 
     if(body.status_url){ 
      getParticipants(body.status_url, Video, localMedia, function(room){ 
      room.participants.forEach(function(participant){ 
       participant.media.attach("#remote"); 
      }); 

      room.once('participantConnected', function(participant){ 
       participant.media.attach("#remote"); 
      }); 
      }); 
     } 
     }); 
    }, function(e){console.log(e)}); 

    function scramble(){ 
     function s4() { 
     return Math.floor((1 + Math.random()) * 0x10000) 
      .toString(16) 
      .substring(1); 
     } 
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
     s4() + '-' + s4() + s4() + s4(); 
    } 
    function getParticipants(status_url, Video, localMedia, cb){ 
     $.get(status_url).then(function(res){ 
     if (res.room && res.token){ 
      var room = res.room; 
      var token = res.token; 
      var client = new Video.Client(token); 

      client.connect({ 
      to: room, 
      localMedia: localMedia 
      }).then(function(room){ 
      cb(room); 
      }, function(error) { 
      console.error('Failed to connect to the Room', error); 
      }); 
     } else { 
      setTimeout(function(){ 
      getParticipants(status_url, Video, localMedia, cb); 
      }, 3000); 
     } 
     }); 
    } 
    </script> 
</body> 
</html>

對於背景下，我ping一臺服務器，直到我與其他人加入視頻會議相匹配。只要他們加入，Twilio就會正確地爲DOM添加一個新的視頻標籤和一個src BLOB。問題是，雖然添加了標籤，但屏幕上沒有視頻可見。

有沒有人看過類似的東西？在DOM中可以看到<video>標籤，但在屏幕上看不到任何視頻？

來源

2016-11-15 bumpkin

看來你正在做正確的事情，如果它仍然沒有工作，我建議發送此細節[email protected]他們可以將它傳遞給合適的團隊。 – philnash

嘿土包 - 你有沒有得到這個工作？如果是這樣，你願意分享你的代碼嗎？我有一些工作，只要從我的PHP服務器獲取一個令牌並連接到一個房間，但我什麼都看不到DOM上的任何東西...... –

你必須使用LocalParticipant類本地用戶

var localMediaContainer = document.getElementById('local-video'); 

var videoElement; 

const localParticipant = room.localParticipant; 

room.localParticipant.tracks.forEach(track => {  
    videoElement = track.attach(); 
    localMediaContainer.appendChild(videoElement); 
}); 
console.log('Connected to the Room as LocalParticipant: ', localParticipant.identity);

來源

2017-05-22 19:12:57 Mark

src不顯示的視頻RTC

回答

相關問題