paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #58 from beatriceo/remote-video-update 

Change video.srcObject instead of deleting entire video element
This commit is contained in:
Beatrice Olivera 2018-09-05 13:14:02 +01:00 committed by GitHub
parent 55b0f8199f a861e82322
commit f23ccacbbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/javascript/packs/webrtc.js
View File

@ -78,7 +78,7 @@ const handleLeaveSession = () => {
App.session.unsubscribe(); App.session.unsubscribe();
remoteVideoContainer.innerHTML = ""; // remoteVideoContainer.innerHTML = "";
broadcastData({ broadcastData({
type: REMOVE_USER, type: REMOVE_USER,
@ -91,8 +91,9 @@ const joinRoom = data => {
}; };
const removeUser = data => { const removeUser = data => {
let video = document.getElementById(`remoteVideoContainer+${data.from}`); remoteVideo = document.querySelector("#remote-video-container>video");
video && video.remove(); if (video.srcObject) video.srcObject = null;
delete pcPeers[data.from]; delete pcPeers[data.from];
}; };
@ -139,12 +140,9 @@ const createPC = (userId, isOffer) => {
}; };
pc.onaddstream = event => { pc.onaddstream = event => {
const element = document.createElement("video"); const remoteVideo = document.querySelector("#remote-video-container>video");
element.id = `remoteVideoContainer+${userId}`; // why is the userId being interpolated? remoteVideo.srcObject = event.stream;
element.autoplay = "autoplay"; remoteVideo.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
element.srcObject = event.stream;
element.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
remoteVideoContainer.appendChild(element);
localVideo.classList.add("video-sm"); 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") const joinButton = document.getElementById("join-btn")
@ -213,3 +215,8 @@ setTimeout(function() {
joinButton.click() joinButton.click()
}, 5000); }, 5000);
(function addReloadToWindowObject() {
window.__proto__.reload = () => { window.location = window.location }
})();

2
app/views/chat_rooms/show.html.erb
View File

@ -26,9 +26,9 @@
<div class="call-container"> <div class="call-container">
<div id="remote-video-container"> <div id="remote-video-container">
<div id="video_overlays"> <div id="video_overlays">
<video id="local-video" autoplay muted></video> <video id="local-video" autoplay muted></video>
</div> </div>
<video id="remote-video" autoplay></video>
<i class="far fa-hand-paper hand"></i> <i class="far fa-hand-paper hand"></i>
</div> </div>