.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 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>效果展示
用 Electron 页面展示了 7 个 Hikvison NVR 的摄像头，可以实现低延迟，低 CPU 占用，无花屏现象。由于涉及保密，这里就不放截图了。
同样的方法我播放了 9 个本地 1080p 的视频《白鹿原》，可以看一下这个效果。
播放效果非常好，完全没有卡顿和花屏，CPU 占用率也不高。
示例代码仓库： WhuRS-FGis/html5-rtsp 示例代码仓库：
总结
以上所述是小编给大家介绍的HTML5 播放 RTSP 视频的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
