在vue3中使用海康威视web3.2无插件版实时直播(一)

4,377 阅读2分钟

image.png 一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第5天,点击查看活动详情

前言

最近在公司的项目中遇到了一个之前没接触过的内容,那就是对接硬件,说实话和硬件厂商沟通可太费劲了。新项目中需要web直连海康威视的摄像头取流进行播放,但是其中踩了一步步的坑,确实难顶。所以写了这篇文章纪念一下。

可行性调研

目前看直播的方案有很多种,大多来说都是通过后端在服务器中将视频流转换成web可以播放的格式返回给前端直播地址,比如转换成http-flv格式(xxx.xxx.xxx.xxx/live?port=1…) 或者其他可播放格式,这里需要注意以下视频流最好不要是h265格式,因为大部分播放器不支持h265。这个时候就有那位大人说服务器转以下延迟太高了,能不能web直接播放直播,行吧,那就先研究研究,打开海康威视官网找找有没有webSDK,嘿,还真有。下图可以看到我们找到了两个webSDK,我们先看一下web3.0版本,在官方描述中支持的浏览器很少(支持的浏览器有:IE6IE11、Chrome8 Chrome42、Firefox3.5~ Firefox52(32位,64位是到Firefox40)、Safari5.0.2+,需要浏览器支持NPAPI。),最重要的是NPAPI,但是现在大部分主流浏览器是不支持NPAPI的,所以这个只能无奈放弃了。看来只有使用web无插件开发包3.2了,结果总是好的,可以在web直连摄像头取流直播。

image.png

分析开发包

我们下载完开发包后会发现其中有一个nginx的文件夹,那很明显了,虽然不用后端在服务器用ffmpeg转换,但是还是要靠nginx用服务器转流。那海康是如何实现web直连的呢,通过官方的demo可以看到通过webSocket进行取流。这里需要注意的是要看海康的摄像头是否支持webSocket。在摄像头自带的jsp页面可以看看是否有webSocket选项,目前没有开启的摄像头,等后面再补图了(20220428图已补)。

image.png