没有显示src的视频RTC

时间:2016-11-15 09:51:50

标签: javascript html video webrtc twilio

我正在使用他们的JavaScript API设置Twilio Video。我的问题是,当我将参与者的视频流附加到div时,Twilio会将相应的视频标记添加到DOM,但是我无法看到参与者'视频。这是我嘲笑隔离问题的脚本:

<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。问题是虽然添加了标签,但屏幕上看不到任何视频。

有没有人见过这样的东西?哪个<video>标记在DOM中可见,但您无法在屏幕上看到任何视频?

1 个答案:

答案 0 :(得分:0)

您必须为本地用户使用LocalParticipant类

{{1}}