From 1697cbff5c93b068c2525d17b8496775e62c48d8 Mon Sep 17 00:00:00 2001
From: Marshall Quander <marshall@quander.me>
Date: Thu, 28 Jun 2018 15:20:21 -0700
Subject: [PATCH] Don't load bot recordings unless you are a bot
---
src/components/avatar-replay.js | 20 ++++++++++++--------
src/hub.html | 2 --
src/hub.js | 22 +++++++++++++++++-----
webpack.config.js | 12 ++++++++++++
4 files changed, 41 insertions(+), 15 deletions(-)
diff --git a/src/components/avatar-replay.js b/src/components/avatar-replay.js
index 260744549..b1dd13bf7 100644
--- a/src/components/avatar-replay.js
+++ b/src/components/avatar-replay.js
@@ -1,5 +1,3 @@
-import botRecording from "../assets/avatars/bot-recording.json";
-
// These controls are removed from the controller entities so that motion-capture-replayer is in full control of them.
const controlsBlacklist = [
"tracked-controls",
@@ -20,24 +18,30 @@ AFRAME.registerComponent("avatar-replay", {
schema: {
camera: { type: "selector" },
leftController: { type: "selector" },
- rightController: { type: "selector" }
+ rightController: { type: "selector" },
+ recordingUrl: { type: "string" }
},
init: function() {
- const { camera, leftController, rightController } = this.data;
+ this.modelLoaded = new Promise(resolve => this.el.addEventListener("model-loaded", resolve));
+ },
+ update: function() {
+ const { camera, leftController, rightController, recordingUrl } = this.data;
+ const fetchRecording = fetch(recordingUrl).then(resp => resp.json());
camera.setAttribute("motion-capture-replayer", { loop: true });
this._setupController(leftController);
this._setupController(rightController);
- this.el.addEventListener("model-loaded", () => {
+ this.dataLoaded = Promise.all([fetchRecording, this.modelLoaded]).then(([recording]) => {
const cameraReplayer = camera.components["motion-capture-replayer"];
- cameraReplayer.startReplaying(botRecording.camera);
+ cameraReplayer.startReplaying(recording.camera);
const leftControllerReplayer = leftController.components["motion-capture-replayer"];
- leftControllerReplayer.startReplaying(botRecording.left);
+ leftControllerReplayer.startReplaying(recording.left);
const rightControllerReplayer = rightController.components["motion-capture-replayer"];
- rightControllerReplayer.startReplaying(botRecording.right);
+ rightControllerReplayer.startReplaying(recording.right);
});
},
+
_setupController: function(controller) {
controlsBlacklist.forEach(controlsComponent => controller.removeAttribute(controlsComponent));
controller.setAttribute("visible", true);
diff --git a/src/hub.html b/src/hub.html
index d54fac093..da521280d 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -23,8 +23,6 @@
</head>
<body data-html-prefix="<%= HTML_PREFIX %>">
- <audio id="bot-recording" loop muted crossorigin="anonymous" src="./assets/avatars/bot-recording.mp3"></audio>
-
<audio id="test-tone">
<source src="./assets/sfx/tone.webm" type="audio/webm"/>
<source src="./assets/sfx/tone.mp3" type="audio/mpeg"/>
diff --git a/src/hub.js b/src/hub.js
index aeb047d7a..9482d7ae7 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -336,15 +336,27 @@ const onReady = async () => {
playerRig.setAttribute("avatar-replay", {
camera: "#player-camera",
leftController: "#player-left-controller",
- rightController: "#player-right-controller"
+ rightController: "#player-right-controller",
+ recordingUrl: "assets/avatars/bot-recording.json"
});
- const audio = document.getElementById("bot-recording");
- mediaStream.addTrack(audio.captureStream().getAudioTracks()[0]);
+
+ const audioEl = document.createElement("audio");
+ audioEl.loop = true;
+ audioEl.muted = true;
+ audioEl.crossorigin = "anonymous";
+ audioEl.src = "assets/avatars/bot-recording.mp3";
+ document.body.appendChild(audioEl);
+
// Wait for runner script to interact with the page so that we can play audio.
- await new Promise(resolve => {
+ const interacted = new Promise(resolve => {
window.interacted = resolve;
});
- audio.play();
+ const canPlay = new Promise(resolve => {
+ audioEl.addEventListener("canplay", resolve);
+ });
+ await Promise.all([canPlay, interacted]);
+ mediaStream.addTrack(audioEl.captureStream().getAudioTracks()[0]);
+ audioEl.play();
}
if (mediaStream) {
diff --git a/webpack.config.js b/webpack.config.js
index 6f66a85c9..7f4daa883 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -223,6 +223,18 @@ const config = {
to: "hub-preview.png"
}
]),
+ new CopyWebpackPlugin([
+ {
+ from: "src/assets/avatars/bot-recording.json",
+ to: "assets/avatars/bot-recording.json"
+ }
+ ]),
+ new CopyWebpackPlugin([
+ {
+ from: "src/assets/avatars/bot-recording.mp3",
+ to: "assets/avatars/bot-recording.mp3"
+ }
+ ]),
// Extract required css and add a content hash.
new ExtractTextPlugin({
filename: "assets/stylesheets/[name]-[contenthash].css",
--
GitLab