skylinkはビデオスクロールを動的に変更できません

Question

Skylink APIを使用してGoogleハングアウトのようなビデオアプリを作成しようとしています。部屋にピアが1つしかない場合、ピアはフルスクリーンになります。部屋に他の同輩がいる場合、残りの同僚はGoogleハングアウトのように右下に表示されます。

フルスクリーンピアが部屋を去ったとき、リスト内の1人のピアがフルスクリーンピアを置き換え、残りのピアはリストに残ります。

私の考えは、フルスクリーンのピアが残っているときに、私はフルスクリーンビデオの<video>をリストのビデオの1つに置き換えるためにjavascriptを使用します。しかし、私がそれをしたとき、全画面ビデオが立ち往生しました。ストリームを停止したように見えるか、ピアのストリームを別のビデオタグに単純に表示することはできません。

次は私の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"を設定することによって、常に再生させることができます。