diff --git a/package.json b/package.json index a3967f0f38dda31faba64f0d63322fca5a34bd5d..3c35cc2df661d0f3c575ad489f2d86d4e86f6e13 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "aframe-xr": "github:brianpeiris/aframe-xr#3162aed", "extract-text-webpack-plugin": "^3.0.2", "material-design-lite": "^1.3.0", - "minijanus": "^0.1.6", - "naf-janus-adapter": "^0.2.1", + "minijanus": "^0.4.0", + "naf-janus-adapter": "^0.3.0", "networked-aframe": "https://github.com/brianpeiris/networked-aframe#3d64f88", "nipplejs": "^0.6.7", "query-string": "^5.0.1", diff --git a/src/lobby.js b/src/lobby.js index 9ae262ba4e20882278020e97caadf6b9059e5452..f6e77536f32b81e8438be802f4c076b2e38acf29 100644 --- a/src/lobby.js +++ b/src/lobby.js @@ -1,10 +1,11 @@ import React from "react"; import ReactDOM from "react-dom"; -import mj from "minijanus"; +import { JanusSession, JanusPluginHandle } from "minijanus"; import "material-design-lite"; import "material-design-lite/material.css"; import "./lobby.css"; +import "webrtc-adapter"; import registerTelemetry from "./telemetry"; @@ -22,7 +23,7 @@ class Lobby extends React.Component { componentDidMount() { this.ws = new WebSocket(window.CONFIG.janus_server_url, "janus-protocol"); - this.session = new mj.JanusSession(this.ws.send.bind(this.ws)); + this.session = new JanusSession(this.ws.send.bind(this.ws)); this.ws.addEventListener("open", this.onWebsocketOpen); this.ws.addEventListener("message", this.onWebsocketMessage); } @@ -37,7 +38,7 @@ class Lobby extends React.Component { this.session .create() .then(() => { - this.handle = new mj.JanusPluginHandle(this.session); + this.handle = new JanusPluginHandle(this.session); return this.handle.attach("janus.plugin.sfu").then(this.updateRooms); }) .then(() => { @@ -61,8 +62,7 @@ class Lobby extends React.Component { } onWebsocketMessage(event) { - var message = JSON.parse(event.data); - this.session.receive(message); + this.session.receive(JSON.parse(event.data)); } render() { diff --git a/src/room.js b/src/room.js index 5f01eb29b0576ea51647ee70dee185aeb55b233e..4f22c1096a5958d4c8c40272ce1900497b13155c 100644 --- a/src/room.js +++ b/src/room.js @@ -9,6 +9,7 @@ import "networked-aframe"; import "naf-janus-adapter"; import "aframe-teleport-controls"; import "aframe-input-mapping-component"; +import "webrtc-adapter"; import animationMixer from "aframe-extras/src/loaders/animation-mixer"; AFRAME.registerComponent("animation-mixer", animationMixer); @@ -57,12 +58,19 @@ AFRAME.registerInputMappings(config); registerNetworkSchemas(); registerTelemetry(); -function shareScreen() { - const track = NAF.connection.adapter.localMediaStream.getVideoTracks()[0]; +async function shareMedia(audio, video) { + const constraints = { + audio: !!audio, + video: video ? { mediaSource: "screen", height: 720, frameRate: 30 } : false + }; + const mediaStream = await navigator.mediaDevices.getUserMedia(constraints); + NAF.connection.adapter.setLocalMediaStream(mediaStream); const id = `${NAF.clientId}-screen`; let entity = document.getElementById(id); - if (!entity) { + if (entity) { + entity.setAttribute("visible", !!video); + } else if (video) { const sceneEl = document.querySelector("a-scene"); entity = document.createElement("a-entity"); entity.id = id; @@ -74,12 +82,10 @@ function shareScreen() { entity.setAttribute("networked", { template: "#video-template" }); sceneEl.appendChild(entity); } - - track.enabled = !track.enabled; - entity.setAttribute("visible", track.enabled); } window.App = { + async onSceneLoad() { const qs = queryString.parse(location.search); const scene = document.querySelector("a-scene"); @@ -118,31 +124,20 @@ window.App = { const myNametag = document.querySelector("#player-rig .nametag"); myNametag.setAttribute("text", "value", username); - scene.addEventListener("action_share_screen", shareScreen); - - const mediaStream = await navigator.mediaDevices.getUserMedia({ - audio: true, - video: - qs.screen === "true" - ? { mediaSource: "screen", height: 720, frameRate: 30 } - : false + var sharingScreen = false; + scene.addEventListener("action_share_screen", () => { + sharingScreen = !sharingScreen; + shareMedia(true, sharingScreen); }); - // Don't send video by deafult - const videoTracks = mediaStream.getVideoTracks(); - if (videoTracks.length) { - videoTracks[0].enabled = false; - } - if (qs.offline) { App.onConnect(); } else { - scene.components["networked-scene"].connect(); + document.body.addEventListener("connected", App.onConnect); - // @TODO ideally the adapter should exist before connect, but it currently doesnt so we have to do this after calling connect. This might be a race condition in other adapters. - NAF.connection.adapter.setLocalMediaStream(mediaStream); + scene.components["networked-scene"].connect(); - document.body.addEventListener("connected", App.onConnect); + await shareMedia(true, sharingScreen); } }, diff --git a/yarn.lock b/yarn.lock index fbff8dc13d2806d3efabc81d00eb6df59868c067..7bfeda266187bc9ff9d246ac805f17e7ccdf16ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3361,10 +3361,6 @@ mimic-fn@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18" -minijanus@^0.1.6: - version "0.1.7" - resolved "https://registry.yarnpkg.com/minijanus/-/minijanus-0.1.7.tgz#a4aba659e0fc46127450aa440b32de82c6cc46b9" - minijanus@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/minijanus/-/minijanus-0.4.0.tgz#4d08529da795886b1aab6714ee7c9ff122c8c802" @@ -3462,9 +3458,9 @@ mv@^2.1.1: ncp "~2.0.0" rimraf "~2.4.0" -naf-janus-adapter@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/naf-janus-adapter/-/naf-janus-adapter-0.2.1.tgz#1e3ff77d14bc9a7e3c90fba999e9ce7e978701fb" +naf-janus-adapter@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/naf-janus-adapter/-/naf-janus-adapter-0.3.0.tgz#fee55fe0f4724238da5f87fbb0e7f75cd522905e" dependencies: debug "^3.1.0" minijanus "^0.4.0"