# H5播放RTSP视频流

**Repository Path**: Mr-Format/rtsp-to-flv

## Basic Information

- **Project Name**: H5播放RTSP视频流
- **Description**: 服务端使用express+express-ws将rtsp转换为flv，通过websocket将flv流推送到前端进行显示
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 3
- **Created**: 2021-07-02
- **Last Updated**: 2025-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML5 播放 rtsp视频流

## 基于flv.js的RTSP播放方案

### 1.服务端

服务端采用express+express-ws框架，当有http请求发送到指定地址时，启动ffmpeg串流程序，直接将RTSP流封装成FLV格式的视频流，推送到指定的WebSocket响应流中。

```js
const express = require("express");
const expressWebSocket = require("express-ws");
const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
const ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath(ffmpegPath);
const webSocketStream = require("websocket-stream/stream");
const WebSocket = require("websocket-stream");
const http = require("http");
const path = require("path");

const app = express();
app.use(express.static(__dirname));
expressWebSocket(app, null, {
  perMessgaeDeflate: true
});
app.ws("/rtsp/:id", rtspRequestHandle);
app.listen(8888);
console.log("express listen: 8888");

function rtspRequestHandle(ws, req) {
  console.log("rtsp request handle");
  const stream = webSocketStream(ws, {
    binary: true,
    browserBufferTimeout: 1000000
  }, {
    browserBufferTimeout: 1000000
  });

  let url = req.query.url;
  console.log("rtsp url:", url);
  console.log("rtsp params:", req.params);

  try {
    ffmpeg(url).addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400").on("start", () => {
        console.log(url, "stream stated.")
      }).on("codecData", () => {
        console.log(url, "Stream codecData.");
      }).on("error", err => {
        console.log(url, "An Error occured:", err.message);
      }).on("end", () => {
        console.log(url, "Stream end!");
      }).outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
  } catch (error) {
    console.log(error);
  }
}
```

### 2.客户端

```vue
<template>
  <div>
    <button @click="play">启动</button>
    <div class="container">
      <video class="demo-video" ref="player" controls></video>
    </div>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      id: 0,
      rtsp: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov",
      player: null
    };
  },
  methods: {
    play() {
      if (flvjs.isSupported()) {
        let video = this.$refs.player;
        if (video) {
          this.player = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`,
          });
          this.player.attachMediaElement(video);
          try {
            this.player.load();
            this.player.play();
          } catch (error) {
            console.log(error);
          }
        }
      }
    }
  },
  beforeDestroy() {
    this.player.destory();
  },
};
</script>
<style>
.container {
  padding: 20px;
}
.demo-video {
  width: 480px;
  height: 360px;
  margin-top: 10px;
}
</style>
```

## VLC方案

- 下载VLC media player软件
- 媒体  ->  流  ->  网络，输入rtsp流地址（rtsp://...)  ->  串流  ->  下一个
- 文件选项切换为HTTP  ->  添加  ->  设置端口和路径  ->  下一个
- 选中激活转码，配置文件切换为Video-Theora+Vorbis(OGG)  ->  下一个
- 选中串口所有基本流，点击流，开始转换。

转换完成后，将链接（http://本机IP地址:端口号/路径/）设置为video标签src属性值即可

## HLS方案

服务端将rtsp流转换为hls视频格式，前端获取http视频地址（.m3u8格式），判断是否支持hlc视频，直接或者通过hlc.js插件使用video元素播放视频

- 服务端
略

- web端

```js
// 引入hls.js
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

// 获取视频地址 url
// ...

// 获取video元素
const video = this.$refs.video;

// 判断是否支持Hls 或 能否直接播放hls
if (Hls.isSupported()) {
  const hls = new Hls(); // 实例化Hls对象
  hls.loadSource(url); // 传入路径
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play(); // 调用播放 API
  });
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
  video.src = url;
  video.addEventListener("canplay", () => {
    video.play();
  });
}
```