implement useThisCamera preference

Hubs-Foundation · Apr 22, 2020 · 35a340b · 35a340b
1 parent 592b326
commit 35a340b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
@@ -261,6 +261,7 @@
     "commands.capture": "Capture a 15 second video.",
     "commands.debug": "Toggle physics debug rendering.",
     "commands.vrstats": "Toggle stats in VR.",
+    "preferences.useThisCamera": "Use this camera",
     "preferences.muteMicOnEntry": "Mute microphone on entry",
     "preferences.enableOnScreenJoystickLeft": "Enable left on-screen joystick for moving around",
     "preferences.enableOnScreenJoystickRight": "Enable right on-screen joystick for looking around",

diff --git a/src/react-components/preferences-screen.js b/src/react-components/preferences-screen.js
@@ -47,7 +47,16 @@ export default class PreferencesScreen extends Component {
       );
     };
     // TODO: Add search text field and sort rows by fuzzy search
-    const general = [
+    let useThisCamera =
+      {
+        key: "useThisCamera",
+        prefType: PREFERENCE_LIST_ITEM_TYPE.SELECT,
+        options: [{ value: "user", text: "User-Facing" }, { value: "environment", text: "Environment" }, { value: "default", text: "Default" }],
+        defaultString: "default"
+      };
+
+    const originalGeneral = [
+      useThisCamera,
       { key: "muteMicOnEntry", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
       { key: "onlyShowNametagsInFreeze", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
       { key: "allowMultipleHubsInstances", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
@@ -83,7 +92,24 @@ export default class PreferencesScreen extends Component {
       { key: "disableBackwardsMovement", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
       { key: "disableStrafing", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
       { key: "disableTeleporter", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false }
-    ].map(preferenceListItem);
+    ];
+
+    // add camera choices to useThisCamera's options
+    navigator.mediaDevices.enumerateDevices()
+    .then(function(devices) {
+      devices.forEach(function(device) {
+        console.log(device.kind + ": " + device.label +
+                    " id = " + device.deviceId);
+        if (device.kind == "videoinput") {
+          useThisCamera.options.push({value: device.deviceId, text: device.label});
+        }
+      });
+    })
+    .catch(function(err) {
+      console.log(err.name + ": " + err.message);
+    });
+
+    const general = originalGeneral.map(preferenceListItem);
 
     const touchscreen = [
       { key: "enableOnScreenJoystickLeft", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },

diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js
@@ -430,13 +430,29 @@ export default class SceneEntryManager {
     };
 
     this.scene.addEventListener("action_share_camera", () => {
-      shareVideoMediaStream({
+      let constraints = {
         video: {
-          mediaSource: "camera",
           width: isIOS ? { max: 1280 } : { max: 1280, ideal: 720 },
           frameRate: 30
         }
-      });
+      };
+      // check preferences
+      const store = window.APP.store;
+      switch (store.state.preferences.useThisCamera) {
+      case 'user':
+        constraints.video.facingMode = "user";
+        break;
+      case 'environment':
+        constraints.video.facingMode = "environment";
+        break;
+      case 'default':
+        constraints.video.mediaSource = "camera";
+        break;
+      default:
+        constraints.video.deviceId = store.state.preferences.useThisCamera;
+        break;
+      }
+      shareVideoMediaStream(constraints);
     });
 
     this.scene.addEventListener("action_share_screen", () => {

diff --git a/src/storage/store.js b/src/storage/store.js
@@ -66,6 +66,7 @@ export const SCHEMA = {
       type: "object",
       additionalProperties: false,
       properties: {
+        useThisCamera: { type: "string" },
         muteMicOnEntry: { type: "bool" },
         enableOnScreenJoystickLeft: { type: "bool" },
         enableOnScreenJoystickRight: { type: "bool" },