Video rendering issue🐛

[vaishnavijlk]

Description

I'm trying to render the local and remote peer video inside my screen.

100ms Flutter Version

3.19.5

Steps to reproduce

Enabling the necessary permissions required for joining the call
Get the hms token
Joining the call

Note: I'm running this app in android 11 device

Expected results

I expected to see both remote and local peer video inside the screen

Code example, screenshot, or link to a repository

https://github.com/100mslive/100ms-flutter/tree/main/sample%20apps/bloc
https://github.com/100mslive/100ms-flutter/tree/main/sample%20apps/flutter-quickstart-app

Logs

Flutter Doctor output

vaishnavihegde@Vaishnavis-MacBook-Air test100ms % flutter doctor -v
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.2.1 23C71 darwin-arm64, locale en-SG)
• Flutter version 3.19.5 on channel stable at /Users/vaishnavihegde/Downloads/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 300451adae (7 months ago), 2024-03-27 21:54:07 -0500
• Engine revision e76c956498
• Dart version 3.3.3
• DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/vaishnavihegde/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.14.3

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.93.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.98.0

[✓] Connected device (5 available)
• rk3568 mdc710 (mobile) • 10.1.128.31:40961 • android-arm64 • Android 11 (API 30)
• rk3568 mdc710 (mobile) • 10.1.128.44:43037 • android-arm64 • Android 11 (API 30)
• Vaishnavi’s Phone (mobile) • 00008120-000E51A11492201E • ios • iOS 18.0.1 22A3370
• macOS (desktop) • macos • darwin-arm64 • macOS 14.2.1 23C71 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.101

[✓] Network resources
• All expected network resources are available.

• No issues found!

[ygit]

@vaishnavijlk can you share the code snippet you have used for rendering the videos?

[vaishnavijlk]

@ygit I did run the example app, https://github.com/100mslive/100ms-flutter/tree/main/sample%20apps/flutter-quickstart-app in my android 11 device. Video is not rendering, this happens quite often. Also, whenever the video renders, the video blinks( ON and OFF), sometimes only some part of the video displays in the app, the rest part of the video just goes on and off.

[vaishnavijlk]

@ygit Also, please refer my test branch which reproduces the issue I mentioned above https://github.com/vaishnavijlk/test100ms.git

[ygit]

@vaishnavijlk can you try the Prebuilt Quickstart guide?
https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt

[vaishnavijlk]

@ygit , the prebuilt hms_room_kit works, but due to the requirement of customisation I'm using the hmssdk_flutter

[ygit]

@vaishnavijlk Try passing the key parameter as well. Attached screenshot.
The crash stack trace indicates that the app is trying to render video on an already destroyed activity. You should check the lifecycle of the PeerTile or its container widgets.

Alternatively, you can fork & customize the UI of Prebuilt RoomKit.