http-flv播放

描述

将rtsp转成http-flv流，在前端播放

前端

技术栈

框架：VUE2
依赖：elment-ui (基于VUE 2) 、http-flv 、vue-property-decorator
element: https://element.eleme.cn/#/zh-CN
http-flv：https://github.com/bilibili/flv.js/?tab=readme-ov-file
vue-property-decorator：https://github.com/kaorun343/vue-property-decorator

安装依赖

看用什么工具，这里以npm举例

npm i element-ui -S
npm install --save flv.js
npm i -S vue-property-decorator

前端代码

<template>
  <div
    style="
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    "
    >
    <video style="width: 80%; height: 85vh" id="videoElement" autoplay controls muted></video>
    <el-input style="width: 80%; margin: 10px" v-model="streamUrl" placeholder="请输入视频地址" />
    <div>
      <el-button @click="play" type="info">播放</el-button>
      <el-button @click="destoryVideo" type="danger">销毁</el-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  import flv from "flv.js";

  @Component({ name: "HttpFlvPlay" })
    export default class HttpFlvHttp extends Vue {
    flvPlayer: flv.Player | null = null;
    streamUrl = "";

    play() {
      if (this.streamUrl === "") {
        this.$message.info("视频流地址不能为空");
        return;
      }

      if (flv.isSupported()) {
        var videoElement: HTMLMediaElement = document.getElementById(
          "videoElement"
        ) as HTMLMediaElement;
        this.flvPlayer = flv.createPlayer({
          type: "flv",
          isLive: true,
          hasAudio: false,
          url: this.streamUrl
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
      }
    }

    destoryVideo() {
      console.log("destoryVideo", this.flvPlayer);
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
        console.log("destoryVideo", this.flvPlayer);
      }
    }
  }
</script>

视频流转码

工具

ffmpeg：https://ffmpeg.org/download.html
参数感兴趣自己学一下

容器

名称：zypy333/http-flv
链接：https://hub.docker.com/r/zypy333/http-flv
安装

docker pull zypy333/http-flv

创建容器并启动

docker run --rm -it -p 80:80 -p 1935:1935 zypy333/http-flv

补充：80端口是一个前端播放测试页面，但是我用时没成功…纳闷

可选，docker compose启动，compose.yaml内容

name: http-flv

services:
  flv-server:
    image: zypy333/http-flv  # 指定镜像来源[5](@ref)
    container_name: http-flv-proxy  # 自定义容器名称（可选）[3](@ref)
    ports:
      - "80:80"         # HTTP 端口映射
      - "1935:1935"     # RTMP 端口映射
    stdin_open: true    # 模拟 -it 的交互模式[5](@ref)
    tty: true
    restart: "no"       # 保持 --rm 特性（容器退出后不重启）
    networks:
      - flv-network

networks:
  flv-network:
    name: flv-network-b  

docker compose 启动关闭指令

docker-compose up -d    # 创建容器并启动，或者
docker compose up -d    # 最新版docker自带compose

docker compose down     # 关闭并删除容器
docker compose start    # 有容器直接启动
docker compose start    # 关闭，不删除

将视频流推流到转码服务器，我这里直接用mp4视频来模拟

ffmpeg -re -i example.mp4 -vcodec copy -acodec copy -f flv rtmp://127.0.0.1/demo/stream-1

视频太短想循环播放

ffmpeg -re -stream_loop -1 -i example.mp4 -vcodec copy -acodec copy -f flv rtmp://127.0.0.1/demo/stream-1

播放地址：http://localhost/live?app=demo&stream=stream-1

结果