HTML5 播放 RTSP 视频

HPDell

2019-03-04

目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。

在借助一定工具的情况下，可以实现在 Web 页面上播放 RTSP 流。本文介绍的方法可以应用于传统 Web 应用和 Electron 应用中，唯一的区别是将 Electron 应用的主进程当作传统 Web 应用的服务器。

目前已有 RTSP 播放方案的对比

既然是做直播，就需要延迟较低。当摄像头掉线时，也应当有一定的事件提示。处于这两点，对目前已有的已经实现、无需购买许可证的 RTSP 播放方案进行对比（处于原理阶段的暂时不分析）。

方案	协议	视频格式	延迟	离线事件汇报	最小端口占用	依赖
1	HLS	ogg	网络延迟较高，可达10秒以上	难	n	VLC + video.js
2	RTMP	flv	网络延迟较低，5秒左右	难	n	ffmpeg + nginx + flash + video.js
3	WebSocket	mpegts	网络延迟很低，渲染速度慢	易	1	ffmpeg + express + jsmpeg
4	HTTP-FLV	flv	网络延迟很低，渲染速度快	易	1	ffmpeg + express + flv.js

我对这四种方式都进行了实现，整体效果最好的还是第4种方案，占用端口少，延迟低，渲染速度快，而且离线事件易于处理。

基于 flv.js 的 RTSP 播放方案

flv.js 是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放，视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输，视频格式需要为 FLV 格式。

服务器端（主进程）

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

import * as express from "express";
import * as expressWebSocket from "express-ws";
import ffmpeg from "fluent-ffmpeg";
import webSocketStream from "websocket-stream/stream";
import WebSocket from "websocket-stream";
import * as http from "http";

function localServer() {
    let app = express();
    app.use(express.static(__dirname));
    expressWebSocket(app, null, {
        perMessageDeflate: true
    });
    app.ws("/rtsp/:id/", rtspRequestHandle)
    app.listen(8888);
    console.log("express listened")
}

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")  // 这里可以添加一些 RTSP 优化的参数
            .on("start", function () {
                console.log(url, "Stream started.");
            })
            .on("codecData", function () {
                console.log(url, "Stream codecData.")
          			// 摄像机在线处理
            })
            .on("error", function (err) {
                console.log(url, "An error occured: ", err.message);
            })
            .on("end", function () {
                console.log(url, "Stream end!");
          			// 摄像机断线的处理
            })
            .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
    } catch (error) {
        console.log(error);
    }
}

当然这个实现还比较粗糙。当有多个相同地址的请求时，应当增加 ffmpeg 的输出，而不是启动一个新的 ffmpeg 进程串流。

浏览器端（渲染进程）

示例使用 Vue 框架进行页面设计。

<template>
    <div>
        <video class="demo-video" ref="player"></video>
    </div>
</template>

<script>
import flvjs from "flv.js";
export default {
    props: {
        rtsp: String,
        id: String
    },
    /**
     * @returns {{player: flvjs.Player}}
     */
    data () {
        return {
            player: null
        }
    },
    mounted () {
        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>
    .demo-video {
        max-width: 480px; 
        max-height: 360px;
    }
</style>