HTML5播放RTSP视频的实例代码_html5rtsp资源-CSDN下载

版权申诉

5星 · 超过95%的资源 116 浏览量 2020-12-07 04:02:45 上传评论 1 收藏 123KB PDF 举报

资源推荐

资源详情

资源评论

HTML5 播放播放 RTSP 视频的实例代码视频的实例代码

目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直

接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 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);

})

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

版权申诉

Rainbow-Ever

2023-10-14

感谢大佬分享的资源给了我灵感，果断支持！感谢分享~
莫凡的博客

2023-08-22

资源很赞，希望多一些这类资源。
jinghongguang

2025-03-13

资源很好用，有较大的参考价值，资源不错，支持一下。
a80805064

2023-07-17

资源不错，内容挺好的，有一定的使用价值，值得借鉴，感谢分享。
2301_76678883

2023-07-28

这个资源值得下载，资源内容详细全面，与描述一致，受益匪浅。

weixin_38735790

粉丝: 5

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip