Почему возникает проблема с воспроизведением hls в chrome?

Question

[YungJabo]

Пытаюсь запустить трансляцию .m3u8 в плеере браузера через библиотеку hls.js.
В firefox все воспроизводится отлично

Источник потока:
Поток получаю из локального Ace Stream engine:

http://127.0.0.1:6878/ace/manifest.m3u8?content_id=...

Также внутри .m3u8 содержатся ссылки на .ts сегменты вида:

http://127.0.0.1:6878/ace/c/.../0.ts
http://127.0.0.1:6878/ace/c/.../1.ts
...

Проблема:
В Firefox видео воспроизводится без проблем
В Chrome:

• .m3u8 загружается
  
• .ts сегменты загружаются (статус 200)
  

но видео не воспроизводится (вечная загрузка)

CORS явно не падает (запросы проходят)
Поток открывается и работает в VLC

Код компонента:

import Hls from "hls.js";
import { useEffect, useRef } from "react";
import { useStore } from "../../store";

export const Video = () => {
  const videoRef = useRef(null);
  const url = useStore((state) => state.url);

  useEffect(() => {
    if (!url || !videoRef.current) return;

    let hls;

    if (Hls.isSupported()) {
      hls = new Hls({
        enableWorker: true,
        lowLatencyMode: true,
        backBufferLength: 90,
      });
      hls.loadSource(url);
      hls.attachMedia(videoRef.current);

      hls.on(Hls.Events.ERROR, (event, data) => {
        console.error("HLS error:", data);
      });
    } else if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
      videoRef.current.src = url;
    }

    return () => {
      if (hls) {
        hls.destroy();
      }
    };
  }, [url]);

  return (
    <div className="video">
      <video ref={videoRef} controls style={{ width: "100%" }} />
    </div>
  );
};

Comments

[YungJabo]

Проблема как будто наблюдается во всех браузерах на базе Chromium. В microsoft edge такая же проблема

Answer 1

[Виктор Майоров]

а play() вызываешь? хромиум явно требует это делать!
попробуй так

useEffect(() => {
  if (!url || !videoRef.current) return;

  let hls;

  if (Hls.isSupported()) {
    hls = new Hls({
      lowLatencyMode: false,
      enableWorker: false,
      maxBufferLength: 15,
    });

    hls.loadSource(url);
    hls.attachMedia(videoRef.current);

    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      console.log('manifest parsed');
      videoRef.current.play().catch(console.error);
    });

    hls.on(Hls.Events.ERROR, (event, data) => {
      console.error("HLS error:", data);
      if (data.fatal) {
        hls.recoverMediaError();
      }
    });
  }

  return () => hls.destroy();
}, [url]);