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」來始終播放它。