skylink无法动态更改视频soucre

Question

我正在尝试使用Skylink API制作视频应用，例如Google环聊。如果房间中只有一个对等点，则该对等点将成为全屏。如果有更多的同伴在房间里，其他同行将被列在右下角，如谷歌环聊。

全屏对等体离开房间时，列表中的一个对等体将替换全屏对等体，其余对等体仍在列表中。

我的想法是，当全屏对象离开时，我使用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”来始终播放它。