diff --git a/src/components/networked-video-player.js b/src/components/networked-video-player.js new file mode 100644 index 0000000000000000000000000000000000000000..2fcdd14cf144345d042cbea5f6b9b183cabb43d5 --- /dev/null +++ b/src/components/networked-video-player.js @@ -0,0 +1,57 @@ +const nafConnected = function() { + return new Promise(resolve => { + NAF.clientId + ? resolve() + : document.body.addEventListener("connected", resolve); + }); +}; +AFRAME.registerComponent("networked-video-player", { + schema: {}, + async init() { + await nafConnected(); + + const networkedEl = NAF.utils.getNetworkedEntity(this.el); + if (!networkedEl) { + throw new Error( + "Video player must be added on a node, or a child of a node, with the `networked` component." + ); + } + + const ownerId = networkedEl.components.networked.data.owner; + console.log("video player for " + ownerId); + + const stream = await NAF.connection.adapter.getMediaStream(ownerId); + + console.log("Stream", stream); + if (!stream) { + return; + } + + const v = document.createElement("video"); + v.srcObject = stream; + v.style.position = "absolute"; + v.style.bottom = 0; + v.style.height = "100px"; + v.style.background = "black"; + document.body.appendChild(v); + v.play(); + + this.videoEl = v; + + v.onloadedmetadata = () => { + const ratio = v.videoWidth / v.videoHeight; + this.el.setAttribute("geometry", { + width: ratio * 1, + height: 1 + }); + //this.el.setAttribute("visible", true); + this.el.setAttribute("material", "src", v); + }; + }, + + remove() { + if (this.videoEl) { + this.videoEl.parent.removeChild(this.videoEl); + } + } +}); diff --git a/src/index.js b/src/index.js index c1b6368b509e5d66d3dc68698a3adb9225196f78..e8ada8c22bf3c56a20eabe589d8ade80192fa480 100644 --- a/src/index.js +++ b/src/index.js @@ -19,6 +19,7 @@ import "./components/body-controller"; import "./components/hand-controls2"; import "./components/character-controller"; import "./components/split-axis-events"; +import "./components/networked-video-player"; import "./systems/personal-space-bubble"; import registerNetworkScheams from "./network-schemas"; @@ -29,64 +30,6 @@ import Config from "./config"; registerNetworkScheams(); registerInputMappings(); -const waitForConnected = function() { - return new Promise(resolve => { - NAF.clientId - ? resolve() - : document.body.addEventListener("connected", resolve); - }); -}; -AFRAME.registerComponent("networked-video-player", { - schema: {}, - init() { - waitForConnected() - .then(() => { - const networkedEl = NAF.utils.getNetworkedEntity(this.el); - if (!networkedEl) { - return Promise.reject( - "Vdeo player must be added on a node, or a child of a node, with the `networked` component." - ); - } - const ownerId = networkedEl.components.networked.data.owner; - console.log("video player for " + ownerId); - return NAF.connection.adapter.getMediaStream(ownerId); - }) - .then(stream => { - console.log("Stream", stream); - if (!stream) { - return; - } - - const v = document.createElement("video"); - v.srcObject = stream; - v.style.position = "absolute"; - v.style.bottom = 0; - v.style.height = "100px"; - v.style.background = "black"; - document.body.appendChild(v); - v.play(); - - this.videoEl = v; - - v.onloadedmetadata = () => { - const ratio = v.videoWidth / v.videoHeight; - this.el.setAttribute("geometry", { - width: ratio * 1, - height: 1 - }); - //this.el.setAttribute("visible", true); - this.el.setAttribute("material", "src", v); - }; - }); - }, - - remove() { - if (this.videoEl) { - this.videoEl.parent.removeChild(this.videoEl); - } - } -}); - function updateVideoElementPosition(entity) { const headEl = document.querySelector("#head");