关于开发中视频监控遇到的问题及flv.js使用教程

最新推荐文章于 2025-04-12 22:21:48 发布

爱冒险的猪猪侠

最新推荐文章于 2025-04-12 22:21:48 发布

阅读量844

点赞数 1

文章标签：音视频

本文链接：https://blog.youkuaiyun.com/weixin_47275670/article/details/129056494

版权

文章介绍了在项目开发中遇到的海康威视视频监控集成问题，首先尝试使用webrtc-streamer将rtsp流转换为video流，但遇到CPU占用高和卡顿问题。接着提到了萤石云平台，虽然免费但超过一定数量需付费，并且设置较复杂。最后讨论了使用flv.js和后端配合来播放rtsp流，该方法需要更多后端工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目开发中遇到一些海康威视视频监控相关的问题，在这里总结分享一下自己遇到的难点及解决办法。下面是一开始解决这些问题的办法以及一些缺陷，在不断的摸爬滚打中，终于总结出一套合适的解决办法😥。

一、webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release

最开始想的解决办法是利用webrtc-streamer将海康威视提供的rtsp接口转流成通用的video视频流的方式，效果不太理想，cpu耗用资源大，加载多个窗口视频会出现明显的卡顿等等问题。如果说加载单个视频监控的话，单个效果还算可以，唯一的优点就是上手最简单，这里就不推荐使用这种方法。

1.安装webrtc-streamer

webrtc-streamer git地址：https://github.com/mpromonet/webrtc-streamer

下载地址：Release v0.7.1 · mpromonet/webrtc-streamer · GitHub

推荐下载 webrtc-streamer-v0.7.1-Darwin-x86_64-Release.tar.gz

webrtc-streamer-v0.7.1-Darwin-x86_64-Release.tar.gz

下载完解压安装执行 webrtc-streamer.exe

2.前端处理

在下载的webrtc-streamer中html>libs中copy这几个包

新建index.html

<html>
<head>
<script src="adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        
    var webRtcServer= null;

    window.onload = function() { 
        webRtcServer= new WebRtcStreamer("video","http://127.0.0.1:8000");
        webRtcServer.connect("rtsp://账户名:密码@视频ip:554/h264/ch1/main/av_stream");//这里需要自己填写
    }
    window.onbeforeunload = function() { 
    	webRtcServer.disconnect(); 
    }
</script>
</head>
<h2>高清</h2>
<body> 
    <video id="video"  width="500px" height="600px" />
</body>
</html>

基本教程就到这里，简单是真的简单，但是不好用啊😯