Question

我正在尝试使用Skylink API创建一个像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”来使其一直播放。

skylink无法动态更改视频副本

1 个答案: