Hubs Cloud - Temporary fix for Safari audio issues

src/hub.js

@@ -25,7 +25,7 @@ import "aframe-slice9-component";
 import "./utils/threejs-positional-audio-updatematrixworld";
 import "./utils/threejs-world-update";
 import patchThreeAllocations from "./utils/threejs-allocation-patches";
-import { detectOS, detect } from "detect-browser";
+import { isSafari } from "./utils/detect-safari";
 import {
   getReticulumFetchUrl,
   getReticulumMeta,
@@ -687,11 +687,9 @@ document.addEventListener("DOMContentLoaded", async () => {
     return;
   }
 
-  const detectedOS = detectOS(navigator.userAgent);
-  const browser = detect();
   // HACK - it seems if we don't initialize the mic track up-front, voices can drop out on iOS
   // safari when initializing it later.
-  if (["iOS", "Mac OS"].includes(detectedOS) && ["safari", "ios"].includes(browser.name)) {
+  if (isSafari()) {
     try {
       await navigator.mediaDevices.getUserMedia({ audio: true });
     } catch (e) {

src/storage/store.js

@@ -3,6 +3,7 @@ import merge from "deepmerge";
 import Cookies from "js-cookie";
 import jwtDecode from "jwt-decode";
 import { qsGet } from "../utils/qs_truthy.js";
+import { isSafari } from "../utils/detect-safari";
 
 const LOCAL_STORE_KEY = "___hubs_store";
 const STORE_STATE_CACHE_KEY = Symbol();
@@ -239,6 +240,12 @@ export default class Store extends EventTarget {
       preferences: {}
     });
 
+    // Temporary fix for distorted audio in Safari.
+    // See https://github.com/mozilla/hubs/issues/4411
+    if (isSafari()) {
+      this.update({ preferences: { audioOutputMode: "audio" } });
+    }
+
     this._shouldResetAvatarOnInit = false;
 
     const oauthFlowCredentials = Cookies.getJSON(OAUTH_FLOW_CREDENTIALS_KEY);

src/systems/audio-settings-system.js

@@ -1,3 +1,5 @@
+import { isSafari } from "../utils/detect-safari";
+
 function updateMediaAudioSettings(mediaVideo, settings) {
   mediaVideo.el.setAttribute("media-video", {
     distanceModel: settings.mediaDistanceModel,
@@ -43,7 +45,9 @@ export class AudioSettingsSystem {
 
     this.sceneEl.addEventListener("reset_scene", this.onSceneReset);
 
-    if (window.APP.store.state.preferences.audioOutputMode === "audio") {
+    // Do not force panner audio in Safari as a temporary fix for distorted audio.
+    // See https://github.com/mozilla/hubs/issues/4411
+    if (!isSafari() && window.APP.store.state.preferences.audioOutputMode === "audio") {
       //hack to always reset to "panner"
       window.APP.store.update({
         preferences: { audioOutputMode: "panner" }

src/utils/detect-safari.js

@@ -0,0 +1,6 @@
+import { detect } from "detect-browser";
+
+export function isSafari() {
+  const browser = detect();
+  return ["iOS", "Mac OS"].includes(browser.os) && ["safari", "ios"].includes(browser.name)
+}