Audio Mixing with Multiple Videos in WebView - React Native

Question

I'm trying to get two videos playing at the same time with audio. As soon as I add the `muted` prop to the html video, both videos play perfectly, so I know it's an issue with the audio mixing correctly.

I've tried the react-native-volume-manager and it is solving my problem.

Here is my simplified code snippet:

import React, { useEffect } from "react"
import { SafeAreaView, ViewStyle } from "react-native"
import WebView from "react-native-webview"
import { VolumeManager } from "react-native-volume-manager"

export const TestScreen = () => {
  const testUrls = [
    { key: "abc", value: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4" },
    { key: "def", value: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4" },
  ]

  useEffect(() => {
    ;(async function manageVolume() {
      await VolumeManager.enable(true, true) // Enable async
      await VolumeManager.setActive(true, true) // Activate async
      await VolumeManager.enableInSilenceMode(true)
      // await VolumeManager.setCategory("Record")
      await VolumeManager.setMode("VoiceChat")
      await VolumeManager.setCategory("Ambient", true)
      await VolumeManager.setVolume(1.0)
    })()
  }, [])

  return (
    <SafeAreaView style={$container}>
      {testUrls.map(({ key, value }) => (
        <WebView
          key={key}
          allowsInlineMediaPlayback
          allowsFullscreenVideo={false}
          source={{
            html: `<div style="width: 100%; max-width: 100%; height: 100%;  align-items: center; justify-content: center;">
                    <video id="video" style="width: 100%; height: auto;" playsinline autoplay loop>
                      <source src="${value}" type="video/mp4">
                    </video>
                    </div>
                  `,
          }}
          style={$webView}
        />
      ))}
    </SafeAreaView>
  )
}

const $container: ViewStyle = {
  flex: 1,
  backgroundColor: "black",
}

const $webView: ViewStyle = {
  flex: 0.5,
  backgroundColor: "red",
}

I would like both videos to play with audio overlapping. I've tried using the react-native-volume-manager library and used every combination of AVAudioSessionModes and AVAudioSessionCategories provided in the library.

Note: using iOS.