InAppWebView: Audio and Video Out of Sync During Autoplay of Lip-Sync Video

minasehiro commented 2 months ago

[x] I have read the Getting Started section
[x] I have already searched for the same problem

Environment

Technology	Version
Flutter version	3.24.0
Plugin version	5.7.2+8
Android version	13 (API 33, emulator and real devices)
iOS version	16.4 (simulator and real devices)
macOS version	13.5.1
Xcode version	15.2 (15C500b)
Google Chrome version	128.0.6613.121 (Official Build) (arm64)

Device information:

Android Emulator: Nexus 10 API 33
iOS Simulator: iPhone 14 iOS 16.4
Real Devices: The issue also occurs on real devices (please specify models if possible)

Description

Expected behavior:

Audio and video should play in sync, especially for lip-sync videos where precise synchronization is essential.

Current behavior:

I am playing a lip-sync video (a video where precise synchronization between audio and video is crucial, such as a person speaking). When the video autoplays in InAppWebView, the audio starts playing first, and the video appears with a delay. The audio and video are out of sync by approximately 2-3 seconds, which is particularly noticeable and disruptive in a lip-sync video.

Steps to reproduce

Create a Flutter app using the following code.
Run the app.
When the video playback starts, observe that the audio and video are not synchronized.

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class VideoTest extends StatefulWidget {
  @override
  _VideoTestState createState() => _VideoTestState();
}

class _VideoTestState extends State<VideoTest> {
  final String _htmlContent = '''
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
      <style>
        body, html {
          margin: 0;
          padding: 0;
          background-color: transparent;
        }
        video {
          width: 100%;
          height: auto;
        }
      </style>
    </head>
    <body>
      <video id="videoElement" autoplay playsinline muted preload="auto">
        <source src="https://your-video-url.webm" type="video/webm">
      </video>
      <script>
        var video = document.getElementById('videoElement');
        video.addEventListener('canplaythrough', function() {
          video.muted = false;
          video.play();
        });
      </script>
    </body>
    </html>
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InAppWebView(
        initialData: InAppWebViewInitialData(data: _htmlContent),
        initialSettings: InAppWebViewSettings(
          javaScriptEnabled: true,
          mediaPlaybackRequiresUserGesture: false,
          allowsInlineMediaPlayback: true,
          javaScriptCanOpenWindowsAutomatically: true,
          transparentBackground: true,
          clearCache: true,
        ),
        onWebViewCreated: (controller) {},
        onConsoleMessage: (controller, consoleMessage) {
          print('WebView console message: \${consoleMessage.messageLevel}: \${consoleMessage.message}');
        },
      ),
    );
  }
}

Images

delayed(Flutter)	sync(original video)
https://github.com/user-attachments/assets/d8e500b6-ffba-4dec-94bc-ab96b42bc228	https://github.com/user-attachments/assets/7719fdcc-47e6-4b5b-b735-cd116b0f510a

Additional context

I confirmed via console.log that the JavaScript code is executing correctly, and the video playback is starting.
I tried enabling hardware acceleration and adjusting various InAppWebViewSettings, but the issue persists.
The same problem occurs even when using different video files or changing encoding settings.
The issue occurs on both emulators and real devices.

github-actions[bot] commented 2 months ago

👋 @minasehiro

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

pichillilorenzo commented 3 weeks ago

Did you try in release mode? It could be just the debug mode.

pichillilorenzo / flutter_inappwebview