Using @100mslive/react-sdk in a Capacitor mobile app

[avivash]

Describe the bug Hi, I'm currently using @100mslive/react-sdk in my next js app and everything is working great on desktop and mobile browsers, but i'm now trying to create a mobile app using https://capacitorjs.com/. I've got everything working in the mobile app on both iOS and Android except for the 100ms integration.

When I start live streaming, I am being prompted for camera/video permissions, which I'm granting, but in the mobile app I only see this grey screen with a play button image:

For Android, these are the permissions and features I'm setting in my AndroidManifest.xml file:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>“
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-feature android:name="android.hardware.audio.output" android:required="true" />
    <uses-feature android:name="android.hardware.camera.any" android:required="true" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="true" />
    <uses-feature android:name="android.hardware.camera.front" android:required="false" />
    <uses-feature android:name="android.hardware.camera.level.full" android:required="false" />
    <uses-feature android:name="android.hardware.camera.flash" android:required="false" />

Also, if i use the developer console i see this error, even though i have granted permission:

I realize you have Android and iOS SDKs of 100ms, but as a non-mobile developer, I'm not entirely sure how I would instead use those SDKs on mobile and whether or not they will work with the existing @100mslive/react-sdk library I'm using on the client.

Any information would be greatly appreciated, thanks! 🙏🏼

To Reproduce Steps to reproduce the behavior:

1. Install @100mslive/react-sdk in a react or next js app
2. Install capacitor to generate a mobile app
3. Attempt to start a livestream from within an Android or iOS app
4. See that only a grey screen with a playhead image is shown and the livestream never starts

Expected behavior The video stream should start properly and use the mobile device's camera

Screenshots

Smartphone (please complete the following information):

• Device: Pixel 7, Pixel 6 pro and Pixel 4
• OS: Android/Tiramisu

Additional context I'm not sure if this is the correct repo to create this issue in, so please let me know if there is a better place to put it

[avivash]

Update: I was able to get it working on android by adding android:allowAudioPlaybackCapture="true" to the AndroidManifest.xml and

dependencies {
    def hmsVersion = "2.8.1"
    implementation "live.100ms:android-sdk:$hmsVersion"    // Essential
    implementation "live.100ms:video-view:$hmsVersion" // Essential
    implementation "live.100ms:virtual-background:$hmsVersion" // Optional
    implementation "live.100ms:hls-player-stats:$hmsVersion"   // Optional
    implementation "live.100ms:hls-player:$hmsVersion"   // Optional
}

to the build.gradle