diff --git a/src/components/networked-video-player.css b/src/components/networked-video-player.css index 6c10dd330f8265dff0da39de02ba854b550a9e36..e6859395801b79bddc37c85c53a92e6a1780c8ec 100644 --- a/src/components/networked-video-player.css +++ b/src/components/networked-video-player.css @@ -1,7 +1,12 @@ :local(.video) { - position: absolute; - bottom: 0; height: 100px; background: black; - display: none; + margin: 5px; +} + +:local(.container) { + position: absolute; + bottom: 0; + display: flex; + visibility: hidden; /* toggle to show debug video elements */ } diff --git a/src/components/networked-video-player.js b/src/components/networked-video-player.js index e2ceecf81cd2580924a0ffeb509cd290fc600680..6e0218a9f0ace62a506be85d56036b17c00bfdb6 100644 --- a/src/components/networked-video-player.js +++ b/src/components/networked-video-player.js @@ -11,6 +11,14 @@ const nafConnected = function() { AFRAME.registerComponent("networked-video-player", { schema: {}, async init() { + let container = document.getElementById("nvp-debug-container"); + if (!container) { + container = document.createElement("div"); + container.id = "nvp-debug-container"; + container.classList.add(styles.container); + document.body.appendChild(container); + } + await nafConnected(); const networkedEl = NAF.utils.getNetworkedEntity(this.el); @@ -27,9 +35,10 @@ AFRAME.registerComponent("networked-video-player", { } const v = document.createElement("video"); + v.id = `nvp-video-${ownerId}`; v.classList.add(styles.video); v.srcObject = new MediaStream(stream.getVideoTracks()); // We only want the video track so make a new MediaStream - document.body.appendChild(v); + container.appendChild(v); v.play(); this.videoEl = v; @@ -46,7 +55,7 @@ AFRAME.registerComponent("networked-video-player", { remove() { if (this.videoEl) { - this.videoEl.parent.removeChild(this.videoEl); + this.videoEl.parentNode.removeChild(this.videoEl); } } });