html5播放rtsp方案，网上很多教程是使用rtsp转rtmp，不过rtmp需要falsh的支持，但是在chrome已经默认禁用、包括未来也会逐渐淘汰，所有最终这种方案被淘汰。一种叫jsmpeg的插件，它主要是通过webSocket发送MPEG，前端通过js解析MPEG不断绘制canvas，包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右，性能蛮高的。
下面说一下怎么安装
准备工具
1 . Ffmpeg，配置环境添加到path变量中
2 . Node.js），配置环境添加到path变量中
3 . jsmpeg，运行主程序
4 . 运行jsmpeg
解压jsmpeg压缩文件到某个盘符，里面出现有一个websocket-relay.js，我们主要运行这个js文件
在运行websocket-relay.js之前node需要安装webSocket模块
终端: npm install ws
运行jsmpeg文件夹里面的websocket-relay.js
终端: node websocket-relay.js supersecret 8081 8082
说明： Supersecret是密码 8081是ffmpeg推送端口8082是前端webSocket端口
运行解码程序
终端：ffmpeg -i "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
上述方案想要真正投入使用至少要解决同时播放多个rtsp流的问题，官方提供websocket-relay.js只能播放一个源，所以需要重写里面的代码，考虑到性能问题，最好在有GPU的客户端使用，否则性能会是一个瓶颈，网络带宽也是一个值得考虑的问题
目前已有 RTSP 播放方案的对比
既然是做直播，就需要延迟较低。当摄像头掉线时，也应当有一定的事件提示。处于这两点，对目前已有的已经实现、无需购买许可证的 RTSP 播放方案进行对比（处于原理阶段的暂时不分析）。
基于 flv.js 的 RTSP 播放方案
flv.js是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放，视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输，视频格式需要为 FLV 格式。
本文福利， C++音视频学习资料包、技术视频，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）↓↓↓↓↓↓见下面↓↓文章底部↓↓
服务器端（主进程）
服务器端采用 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 添加如下参数：
analyzeduration 可以降低解析码流所需要的时间
max_delay 资料上写的具体作用不太记得了，效果没有 analyzeduration 明显
当然这个实现还比较粗糙。当有多个相同地址的请求时，应当增加 ffmpeg 的输出，而不是启动一个新的 ffmpeg 进程串流。
浏览器端（渲染进程）
示例使用 Vue 框架进行页面设计。
<template>
<div>
<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>原文链接：html5播放rtsp方案 - 资料 - 我爱音视频网 - 构建全国最权威的音视频技术交流分享论坛 文章来源：https://www.toymoban.com/news/detail-406154.html
本文福利， C++音视频学习资料包、技术视频，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）↓↓↓↓↓↓见下面↓↓文章底部↓↓ 文章来源地址https://www.toymoban.com/news/detail-406154.html
到了这里，关于html5播放rtsp方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
