Merge pull request #58 from beatriceo/remote-video-update
Change video.srcObject instead of deleting entire video element
This commit is contained in:
commit
f23ccacbbf
|
@ -78,7 +78,7 @@ const handleLeaveSession = () => {
|
|||
|
||||
App.session.unsubscribe();
|
||||
|
||||
remoteVideoContainer.innerHTML = "";
|
||||
// remoteVideoContainer.innerHTML = "";
|
||||
|
||||
broadcastData({
|
||||
type: REMOVE_USER,
|
||||
|
@ -91,8 +91,9 @@ const joinRoom = data => {
|
|||
};
|
||||
|
||||
const removeUser = data => {
|
||||
let video = document.getElementById(`remoteVideoContainer+${data.from}`);
|
||||
video && video.remove();
|
||||
remoteVideo = document.querySelector("#remote-video-container>video");
|
||||
if (video.srcObject) video.srcObject = null;
|
||||
|
||||
delete pcPeers[data.from];
|
||||
};
|
||||
|
||||
|
@ -139,12 +140,9 @@ const createPC = (userId, isOffer) => {
|
|||
};
|
||||
|
||||
pc.onaddstream = event => {
|
||||
const element = document.createElement("video");
|
||||
element.id = `remoteVideoContainer+${userId}`; // why is the userId being interpolated?
|
||||
element.autoplay = "autoplay";
|
||||
element.srcObject = event.stream;
|
||||
element.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
remoteVideoContainer.appendChild(element);
|
||||
const remoteVideo = document.querySelector("#remote-video-container>video");
|
||||
remoteVideo.srcObject = event.stream;
|
||||
remoteVideo.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
localVideo.classList.add("video-sm");
|
||||
};
|
||||
|
||||
|
@ -200,7 +198,11 @@ const exchange = data => {
|
|||
}
|
||||
};
|
||||
|
||||
const logError = error => console.warn("Whoops! Error:", error);
|
||||
const logError = error => {
|
||||
console.error("Whoops! Error:", error);
|
||||
// console.info("Reloading Page...")
|
||||
// window.reload();
|
||||
}
|
||||
|
||||
|
||||
const joinButton = document.getElementById("join-btn")
|
||||
|
@ -213,3 +215,8 @@ setTimeout(function() {
|
|||
joinButton.click()
|
||||
}, 5000);
|
||||
|
||||
|
||||
(function addReloadToWindowObject() {
|
||||
window.__proto__.reload = () => { window.location = window.location }
|
||||
})();
|
||||
|
||||
|
|
|
@ -26,9 +26,9 @@
|
|||
<div class="call-container">
|
||||
<div id="remote-video-container">
|
||||
<div id="video_overlays">
|
||||
|
||||
<video id="local-video" autoplay muted></video>
|
||||
</div>
|
||||
<video id="remote-video" autoplay></video>
|
||||
<i class="far fa-hand-paper hand"></i>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue