如何正确使用Hls.js和React？

Question

我正在使用 Hls.js 为视频播放器构建一个 React。我正在使用 React Refs 并调用 useEffect 来获取视频元素。问题是我不断收到错误。

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

export default function VideoPlayer({ data, className = '', ...props }) {
  const videoRef = useRef();

  useEffect(()=>{
    const hls = new Hls({
      "debug": true
    });

    if (Hls.isSupported()) {
      hls.log = true;
      hls.loadSource = data.src;
      console.log(videoRef)
      hls.attachMedia(videoRef)
      hls.on(Hls.Events.ERROR, (err) => {
        console.log(err)
      });

    } else {
      console.log('load')
    }
  },[])

  return (
    <video
      ref={videoRef}
      controls
      {...props}
      src={data.src}
      className={className}
    />
  )
}

这是我在控制台中得到的输出。

[log] > 在 hls.js 版本 1.4.9-0.canary.9343 中为“Hls 实例”启用调试日志

VideoPlayer.jsx：16 {当前：视频}当前：nullsrc：“blob：http://192.168.0.205/c68f5827-3d23-4656-9479-c64f7f9b2e51”[[原型]]：对象 VideoPlayer.jsx:17 [日志] > AttachMedia React-dom.development.js:22839

未捕获类型错误：media.addEventListener 不是函数 在 BufferController.onMediaAttaching (buffer-controller.ts:181:13) 在 EventEmitter2.emit (index.js:203:33) 在 Hls.emit (hls.ts:288:26) 在 Hls.trigger (hls.ts:296:19) 在 Hls.attachMedia (hls.ts:360:10) 在 VideoPlayer.jsx:17:11 在 commitHookEffectListMount (react-dom.development.js:23150:26) 在 commitPassiveMountOnFiber (react-dom.development.js:24926:13) 在 commitPassiveMountEffects_complete 处（react-dom.development.js:24891:9） 在 commitPassiveMountEffects_begin (react-dom.development.js:24878:7)

控制台错误截图

看到重新渲染后需要加载Hls.js，我使用了useEffect，但仍然有问题。

我已经查看了其他建议，但仍然存在问题。

如何将 hls.js 与 React 结合使用

Answer 1

我能够找出我的错误。我没有抓住当前的参考

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

export default function VideoPlayer({ data, className = '', ...props }) {
  const videoRef = useRef();

  useEffect(()=>{
    const hls = new Hls({
      "debug": true
    });

    if (Hls.isSupported()) {
      hls.log = true;
      hls.loadSource = data.src;
      hls.attachMedia(videoRef.current)
      hls.on(Hls.Events.ERROR, (err) => {
        console.log(err)
      });

    } else {
      console.log('load')
    }
  },[data])

  return (
    <video
      ref={videoRef}
      controls
      {...props}
      src={data.src}
      className={className}
    />
  )
}

我希望这对其他人有帮助。这是一篇简短的文章，但我在煮了咖啡后就明白了......

Answer 2

这就是我所做的 - 谢谢！！

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

export default function VideoWithHLS() {
  const videoRef = useRef<null | HTMLVideoElement>(null);

  useEffect(() => {
    const hls = new Hls({
      debug: true,
    });

    if (Hls.isSupported() && videoRef.current) {
    //   hls.log = true;
      hls.loadSource("Your Source 👾");
      hls.attachMedia(videoRef.current);
      hls.on(Hls.Events.ERROR, (err) => {
        console.log(err);
      });
    } else {
      console.log("load");
    }
    return () => {
      // cleanup (when component destroyed or when useEffect runs twice on StrictMode)
      hls.destroy();
    };
  }, []);

  return (
    <video
      ref={videoRef}
      controls
      autoPlay
      style={{ width: "250px", borderRadius: "10px" }}
    />
  );
}