导航：首页 > 开发技术 >

HTML5怎么实现播放RTSP视频

发表于：2025-02-01 作者：千家信息网编辑

千家信息网最后更新 2025年02月01日，本篇内容主要讲解"HTML5怎么实现播放RTSP视频"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"HTML5怎么实现播放RTSP视频"吧!Electron

千家信息网最后更新 2025年02月01日HTML5怎么实现播放RTSP视频

本篇内容主要讲解"HTML5怎么实现播放RTSP视频"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"HTML5怎么实现播放RTSP视频"吧!

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

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

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

我对这四种方式都进行了实现，整体效果最好的还是第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 添加如下参数：