diff --git a/package.json b/package.json
index 67d217a3396c0fd7fece75cef330bf07a57a8357..5cf90f13101984884187392191c8a95c09a4ee9c 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"aframe-xr": "github:brianpeiris/aframe-xr#3162aed",
"material-design-lite": "^1.3.0",
"minijanus": "^0.4.0",
- "naf-janus-adapter": "^0.3.0",
+ "naf-janus-adapter": "^0.4.0",
"networked-aframe": "https://github.com/mozillareality/networked-aframe#mr-social-client/master",
"nipplejs": "^0.6.7",
"query-string": "^5.0.1",
diff --git a/src/components/networked-video-player.css b/src/components/networked-video-player.css
index e6859395801b79bddc37c85c53a92e6a1780c8ec..00dd3a89730b18ba210d2b981c0929399c3f1902 100644
--- a/src/components/networked-video-player.css
+++ b/src/components/networked-video-player.css
@@ -1,12 +1,11 @@
:local(.video) {
- height: 100px;
+ /* 1x1px so that Safari on iOS allows us to autoplay the video */
+ width: 1px; height: 1px; /* toggle to show debug video elements */
background: black;
- margin: 5px;
}
:local(.container) {
position: absolute;
bottom: 0;
- display: flex;
- visibility: hidden; /* toggle to show debug video elements */
+ width: 10px; height: 10px; /* toggle to show debug video elements */
}
diff --git a/src/components/networked-video-player.js b/src/components/networked-video-player.js
index 6e0218a9f0ace62a506be85d56036b17c00bfdb6..03cfba4f6d7a835ac825804724a4109d16690cdb 100644
--- a/src/components/networked-video-player.js
+++ b/src/components/networked-video-player.js
@@ -2,9 +2,7 @@ import styles from "./networked-video-player.css";
const nafConnected = function() {
return new Promise(resolve => {
- NAF.clientId
- ? resolve()
- : document.body.addEventListener("connected", resolve);
+ NAF.clientId ? resolve() : document.body.addEventListener("connected", resolve);
});
};
@@ -21,21 +19,23 @@ AFRAME.registerComponent("networked-video-player", {
await nafConnected();
- const networkedEl = NAF.utils.getNetworkedEntity(this.el);
+ const networkedEl = await 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."
- );
+ 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;
- const stream = await NAF.connection.adapter.getMediaStream(ownerId);
+ const stream = await NAF.connection.adapter.getMediaStream(ownerId, "video");
if (!stream) {
return;
}
const v = document.createElement("video");
v.id = `nvp-video-${ownerId}`;
+ // muted and autoplay so that more restrictive browsers (e.g. Safari on iOS) will actually play the video.
+ v.muted = true;
+ v.autoplay = true;
+ v.playsInline = true;
v.classList.add(styles.video);
v.srcObject = new MediaStream(stream.getVideoTracks()); // We only want the video track so make a new MediaStream
container.appendChild(v);
diff --git a/src/room.html b/src/room.html
index dd04fb42080c710b3f438b609a59b7b1cd4efcbb..7ace5d827d993a9b518361c0b7b0b59ae6b9299f 100644
--- a/src/room.html
+++ b/src/room.html
@@ -7,9 +7,9 @@
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
<% if(NODE_ENV === "production") { %>
- <script src="https://cdn.rawgit.com/brianpeiris/aframe/bba200440e3279753df85a1f52ba4c77a3b16e47/dist/aframe-master.min.js"></script>
+ <script src="https://cdn.rawgit.com/brianpeiris/aframe/845825ae694449524c185c44a314d361eead4680/dist/aframe-master.min.js"></script>
<% } else { %>
- <script src="https://cdn.rawgit.com/brianpeiris/aframe/bba200440e3279753df85a1f52ba4c77a3b16e47/dist/aframe-master.js"></script>
+ <script src="https://cdn.rawgit.com/brianpeiris/aframe/845825ae694449524c185c44a314d361eead4680/dist/aframe-master.js"></script>
<% } %>
</head>
@@ -49,10 +49,10 @@
<a-entity class="video" geometry="primitive: plane;" material="side: double" networked-video-player></a-entity>
</template>
- <template id="remote-avatar-template">
+ <template id="remote-avatar-template">
<a-entity ik-root>
<a-entity class="camera"></a-entity>
-
+
<a-entity class="left-controller"></a-entity>
<a-entity class="right-controller"></a-entity>
@@ -69,7 +69,7 @@
></a-entity>
</a-entity>
</template>
-
+
<template data-selector=".Head">
<a-entity
networked-audio-source
@@ -109,7 +109,7 @@
personal-space-bubble
look-controls
></a-entity>
-
+
<a-entity
id="player-left-controller"
class="left-controller"
diff --git a/src/room.js b/src/room.js
index df0ec4e9c5818e836fe86d9a2a689a16daa9d8b4..bd0ebb4577e1a6520060a5aeb363d380ccd78ea3 100644
--- a/src/room.js
+++ b/src/room.js
@@ -91,7 +91,7 @@ async function shareMedia(audio, video) {
entity = document.createElement("a-entity");
entity.id = id;
entity.setAttribute("offset-relative-to", {
- target: "#head",
+ target: "#player-camera",
offset: "0 0 -2",
on: "action_share_screen"
});
diff --git a/webpack.config.js b/webpack.config.js
index 9fa17dd4bd2e5510e2ec8545fda2a9a244ce9f09..5b6321412a38416e4d75e2e96c90ed7bb6b5d619 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -52,7 +52,7 @@ function createHTTPSConfig() {
fs.writeFileSync(path.join(__dirname, "certs", "key.pem"), pems.private);
return {
- key: pems.public,
+ key: pems.private,
cert: pems.cert
};
}
@@ -89,6 +89,8 @@ const config = {
devServer: {
open: true,
https: createHTTPSConfig(),
+ host: "0.0.0.0",
+ useLocalIp: true,
port: 8080,
before: function(app) {
// networked-aframe makes HEAD requests to the server for time syncing. Respond with an empty body.
diff --git a/yarn.lock b/yarn.lock
index c21a28ee4ba2374af1614edbd3519e39dd77ca6c..7f6e2a8126096af5b5c2c56777487e3b1d3442c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4394,9 +4394,9 @@ mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-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"
+naf-janus-adapter@^0.4.0:
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/naf-janus-adapter/-/naf-janus-adapter-0.4.0.tgz#22f14212a14d9e3d30c8d9441978704ff58392f4"
dependencies:
debug "^3.1.0"
minijanus "^0.4.0"