欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浏览器显示海康摄像头实时预览画面纯前端解决方案

程序员文章站 2022-04-08 21:45:23
浏览器显示海康摄像头实时预览画面纯前端解决方案将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流,并将实时视频流通过 express 服务生成 http 长链接或 ws 返回。最后通过b站开源的 flv.js 插件在浏览器上显示直播画面。安装 ffmpeg下载ffmpeg安装 fluent-ffmpeg 插件npm i fluent-ffmpeg指定 ffmpeg 的安装地址ffmpeg.setFfmpegPath(“G:/app/ffmpeg-202...

浏览器显示海康摄像头实时预览画面纯前端解决方案

将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流,并将实时视频流通过 express 服务生成 http 长链接或 ws 返回。
最后通过b站开源的 flv.js 插件在浏览器上显示直播画面。

安装 ffmpeg

  • 下载ffmpeg
  • 安装 fluent-ffmpeg 插件

    npm i fluent-ffmpeg

  • 指定 ffmpeg 的安装地址

    ffmpeg.setFfmpegPath(“G:/app/ffmpeg-20200108-5bd0010-win64-static/ffmpeg-20200108-5bd0010-win64-static/bin/ffmpeg”);

修改配置

修改 config.js 文件,配置海康设备的ip和账号密码

// 海康摄像头账号
var account = 'admin'
// 海康摄像头密码
var password = 'admin'
// 海康摄像头ip
// 可配置多个ip,在浏览器上同时显示多个视频
var ipLists = [
'192.168.1.201',
'192.168.1.202',
'192.168.1.203',
// '192.168.1.204'
]

Usage

npm i
npm run server

github

本文地址:https://blog.csdn.net/weixin_44775548/article/details/106068816