javascript - skylink无法动态更改视频源

Question

我正在尝试使用 Skylink API 制作一个像 google Hangout 这样的视频应用程序。如果房间里只有一名同伴，则该同伴将全屏显示。如果房间中有更多同伴，其余同伴将像 google Hangout 一样列在右下角。

当全屏对等点离开房间时，列表中的一个对等点将取代全屏对等点，其余对等点仍在列表中。

我的想法是当全屏同行离开时，我使用javascript来替换 <video>全屏视频与列表中的视频之一。然而，当我这样做时，全屏视频卡住了。我似乎停止了直播，或者无法简单地在另一个视频标签中显示我的同伴的直播。

以下是我的javascript代码，请查看函数skylink.on('peerJoined', function(peerId, peerInfo, isSelf)和removeFullscreenVideo(peerId) :

const VIDEO_LIST_NAME = "video-list";

/*
 * Create a new Skylink object and subscribe events using the on() function.
 */
var skylink = new Skylink();

/*
 * Configures the Skylink console log level that would determine the type of 
 * console logs that would be printed in the Web console.
 */
skylink.setLogLevel(4);

/* flag to record if anyone is fullscreen */
var existFullscreen = false;
var idFullscreen = null;
var videoIDs = [];

/* peerJoined: informs you that a peer has joined the room and 
 * shares their peerID and peerInfo a with you.
 */
skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
  /* We already have a video element for our video and don't 
   * need to create a new one.
   */
   console.log("peerinfo:", peerInfo);
  if(isSelf) return; 

  if(!existFullscreen){
    // if no one is fullscreen, create fullscreen video.
    addFullscreenVideo(peerId);
  } else{
    // if it exists fullscreen, create smallscreen video.
    addSmallscreenVideo(peerId);
  }
});

/* incomingStream: This event is fired after peerJoined when SkylinkJS starts 
 * receiving the audio and video streams from that peer. 
 */
skylink.on('incomingStream', function(peerId, stream, isSelf) {
  if(isSelf) return;
  var vid = document.getElementById(peerId);
  attachMediaStream(vid, stream);
});

/* peerLeft: informs you that a peer has left the room. Ee look in the DOM
 * for the video element with the events peerId and remove it.
 */
skylink.on('peerLeft', function(peerId) {
  if(peerId === idFullscreen){
    removeFullscreenVideo(peerId);
  }else{
    removeVideosItem(peerId);
  }
});

/* mediaAccessSuccess: The user needs to authorize his browser to 
 * allow your website access to their camera, microphone or both.
 */
skylink.on('mediaAccessSuccess', function(stream) {
  var vid = document.getElementById('myvideo');
  attachMediaStream(vid, stream);
});

/* Helper functions */
/* get Room ID */
function getRoomId() {
  var roomId = document.cookie.match(/roomId=([a-z0-9-]{36})/);
  if(roomId) {
    return roomId[1];
  }
  else {
    roomId = skylink.generateUUID();
    var date = new Date();
    date.setTime(date.getTime() + (30*24*60*60*1000));
    document.cookie = 'roomId=' + roomId + '; expires=' + date.toGMTString() + '; path=/';
    return roomId;
  }
};

function createVideo(peerId){
  /* create video tag: <video></video> */
  var vid = document.createElement('video');
  /* set attributes of video tage */ 
  vid.autoplay = true;
  vid.muted = true; // Added to avoid feedback when testing locally
  vid.id = peerId;
  return vid;
}

/* new fullscreen video */
function addFullscreenVideo(peerId){
  var vid = createVideo(peerId);
  var vidDiv = document.getElementById('vidDiv');
  vidDiv.insertBefore(vid, vidDiv.firstChild);
  vid.classList.add('fullscreen');
  idFullscreen = peerId;
  existFullscreen = true;
  videoIDs.push(peerId);
}

/* new small screnn video */
function addSmallscreenVideo(peerId){
  var vid = createVideo(peerId);
  var ul = document.getElementById(VIDEO_LIST_NAME);
  var li = document.createElement('li');
  ul.appendChild(li);
  li.appendChild(vid);
  li.id = VIDEO_LIST_NAME + peerId;
  vid.classList.add('smallscreen');
  videoIDs.push(peerId);
}

/* remove fullscreen video */
function removeFullscreenVideo(peerId){
  var index = videoIDs.indexOf(peerId);
  var vid = document.getElementById(peerId);
  videoIDs.splice(index, 1);
  // if there is still other peers in room, pick first item
  // in videos to be fullscreen,
  if(videoIDs.length != 0){
    var firstVideoId = videoIDs[0];
    var firstVideo = document.getElementById(firstVideoId);
    firstVideo.classList.remove('smallscreen');
    firstVideo.classList.add('fullscreen');
    var parent = vid.parentNode;
    vid.parentNode.replaceChild(firstVideo, vid);
    idFullscreen = firstVideoId;
  }
  else{
    existFullscreen = false;
    vid.parentNode.removeChild(vid);
  }
}

/* remove item from video list */
function removeVideosItem(peerId){
  var index = videoIDs.indexOf(peerId);
  var vid = document.getElementById(VIDEO_LIST_NAME + peerId);
  vid.parentNode.removeChild(vid);
  videoIDs.splice(index, 1);
}

我怎样才能做到这一点？谢谢。

Answer 1

也许您可以尝试检查 <video> 是否元素标签正在播放？您可以通过设置 DOM 属性 autoplay="true"使其一直播放。