jhomlala / betterplayer

Better video player for Flutter, with multiple configuration options. Solving typical use cases!
Apache License 2.0
920 stars 983 forks source link

[BUG] WebVTT Subtitles do not work for HLS live streams #1091

Open trms-alex opened 1 year ago

trms-alex commented 1 year ago

History check I've checked the issue history and there are some similar reports, but none specifically address live streams.

Describe the bug When watching a live stream over HLS, WebVTT subtitles do not work. The track appears in the selector, but activating it doesn't show any subtitles. They work fine with our pre-recorded VOD content, but specifically do not work with live streams.

To Reproduce Play this stream through better_player: https://reflect-ccstv.cablecast.tv/live-13/live/live.m3u8 It should have active WebVTT subtitles when someone is speaking.

*Example code

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late BetterPlayerController _betterPlayerController;

  @override
  void initState() {
    super.initState();

    BetterPlayerDataSource betterPlayerDataSource = BetterPlayerDataSource(
        BetterPlayerDataSourceType.network,
        "https://reflect-ccstv.cablecast.tv/live-13/live/live.m3u8",
    );

    _betterPlayerController = BetterPlayerController(
        const BetterPlayerConfiguration(
          autoPlay: true,
          fit: BoxFit.contain,
        ),
        betterPlayerDataSource: betterPlayerDataSource);
  }

  @override
  Widget build(BuildContext context) {
    return BetterPlayer(
      controller: _betterPlayerController,
    );
  }
}

Expected behavior Subtitles should be rendered based on the WebVTT segments.

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.2, on Fedora Linux 36 (Workstation Edition) 5.19.11-200.fc36.x86_64, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.71.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

Better Player version

Smartphone (please complete the following information):

Additional context We believe this problem has to do with the X-TIMESTAMP-MAP tag at the beginning of the .vtt segment files, ex:

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:324854542,LOCAL:00:00:09.494

In fact, the logs show an error when better_player tries to parse that line as a subtitle cue. We think that properly applying this mapping to the subtitle timestamps will fix the issue, but we're still looking into how to actually do this.

More info about this tag can be found in section 3 of this document.