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.

[vaishnavijlk]

@ygit , can we get any guidance on this exception ? This exception occurs when video is not rendered in the screen.

[ygit]

@vaishnavijlk This looks like an app implementation issue. Is it possible for you to share some code regarding how the video rendering is setup?

[vaishnavijlk]

@ygit, Please refer this file : https://github.com/vaishnavijlk/test100ms/blob/main/videoconsult/lib/components/teleconsultation/peer_tile.dart

Repository Link : https://github.com/vaishnavijlk/test100ms/tree/main/videoconsult

The same issue happens with the sample apps shared by your page https://github.com/100mslive/100ms-flutter/tree/main/sample%20apps Like (bloc, flutter meet) Also with quickstart examples

This is our device Spec :
Chip: RK3568
Android Version: 11
Storage: 32GB
RAM: 4GB

[vaishnavijlk]

@ygit is there any solution for this? Since we are using 100ms platform in production, video rendering issue is happening quite frequently and affecting many users. Any help or guidance on this would be great.

[ygit]

hey @vaishnavijlk
Try passing the Key property as shown in this screenshot

[vaishnavijlk]

@ygit, I have added the key property now and still have the same issue https://github.com/vaishnavijlk/test100ms/blob/main/videoconsult/lib/components/teleconsultation/peer_tile.dart

[ygit]

hey @vaishnavijlk
Let's get on a call to debug this further. Please book a time slot here: https://calendly.com/yogesh-singh-100ms/30min

[ygit]

hey @vaishnavijlk
Were you able to try the suggestions i made over the call last week?