Das flv.js-Plugin vervollständigt die Videowiedergabe im FLV-Format

Aufzeichnen---

Chinesische API-Dokumentation:  flv.js Chinesische API-Dokumentation – kurzes Buch

Referenzartikel: Der ausführlichste im gesamten Web! Verwenden Sie flv.js in Vue, um Live-Überwachungsvideos abzuspielen. stream_vue verwendet flv.js_blog, um Ihren Code-CSDN-Blog zu kopieren

Problem: flv.js erhält das Video, die Schnittstelle ist angepasst, das Bild wird nicht angezeigt, nach dem Ausschalten des Audios wird die Seite angezeigt, das Audioformat stimmt nicht überein, nach dem Ändern des Audioformats des Videos wird die Seite angezeigt

① 组件设置  

  //必须要声明一个播放器的容器  playerRef就是播放器的容器
  const playerRef = React.useRef<any>(null);
  const videoRef = React.useRef(null);

      <div className={styles.site_content_video_right_out}>
                <video
                  className="video"
                  ref={videoRef}
                  preload="auto"
                  width="100%"
                  height="100%"
                  muted
                  autoPlay
                  controls
                  type="rtmp/flv"
                >
                  {/* <source src="" /> */}
                </video>
      </div>

 具体方法----------
 // 获得摄像头信息
  const getInfo = async (item) => {
    // console.log('item', item)
    // getToken(item.equipmentId)
    let nowAddress: any = ''
    // 获得视频地址
    const res = await getVideoAddress({ code, equipmentId: item.equipmentId })
    if (res?.success) {
      const { data } = res
      nowAddress = data
      setAddress(data)
    } else {
      nowAddress = null
      setAddress(null)
    }  
    // setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
    const videoElement = videoRef.current; // 获取到html中的video标签
    if (flvJs.isSupported()) {
      //先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
      if (playerRef.current) {
        playerRef.current.pause(); //暂停播放数据流
        playerRef.current.unload(); //取消数据流加载
        playerRef.current.detachMediaElement(); //将播放实例从节点中取出
        playerRef.current.destroy(); //销毁播放实例
        playerRef.current = null;
      }
      if (nowAddress) {
        const player = playerRef.current = flvJs.createPlayer( //创建直播流，加载到DOM中去
          {
            type: "flv",
            url: nowAddress, //你的url地址
            // url: 'http://218.108.40.230:20301/live/c2lwOmlwODdjMDRAaHpqeS56amp5LmNuank6OTkwMl9tYWluXzIwMjMtMy0yNiAxMDowMDoxMF8yMDIzLTMtMjYgMTY6MDA6MDA=.live.flv?token=7302843b-d9e5-4906-a766-73994f2d7957', //你的url地址
            isLive: true, //数据源是否为直播流
            hasAudio: true, //数据源是否包含有音频
            hasVideo: true, //数据源是否包含有视频
            enableStashBuffer: true, //是否启用缓存区
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            autoCleanupSourceBuffer: true, //自动清除缓存
            lazyLoad: false,
          }
        );
        player.attachMediaElement(videoElement); //放到dom中去
        player.load();//准备完成
        //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
        player.play();//播放
      }

    }
    // }, 1000)
  }

③卸载时销毁播放器

 // 卸载功能组件时释放Video.js播放器
  // 第一个函数参数里面返回一个函数，相当于类组件的componentWillUnmount
  React.useEffect(() => {
    return () => {
      if (playerRef.current) {
        playerRef.current.pause();
        playerRef.current.unload();
        playerRef.current.detachMediaElement();
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, [playerRef]);