通过React实现萤石摄像头rtsp地址格式的视频流的web展示

首先,我们需要拿到rtsp格式的流地址(rtsp://admin:[password]@[ip]),其中

password:设备底下的6位数验证码

ip:设备的ipv4地址

这里拿到ip的方式可以直连网线和绑定wifi两种方式

然后下载PC端的萤石工作室(下载中心 - 萤石服务中心 - 萤石官网 - EZVIZ

进行登录后,点击设备管理 -> 高级配置 -> 网络

这样我们就拿到了完整的rtsp格式的地址,那么我们就可以通过VLC(Download VLC media player - free - latest version (softonic.com))去测试一下,

点击媒体 -> 打开网络串口 -> 输入地址 -> 播放

没有意外的话就能成功播放啦

下面咱们开始重头戏:

由于在现代浏览器里面不支持直接播放rtsp格式的地址,所以必须进行转流,在查阅大量资料后,选择基于ffmpeg的node后端推流方案 + 基于jspmg的前端视频展示的方案:

后端:基于ffmpeg的node后端推流方案

1.首先下载ffmpeg(Builds - CODEX FFMPEG @ gyan.dev)

下载这四个中任意一个均可,我选择的是倒数第二个,因为他是稳定版而且没有多余的包

然后配置环境变量,能查找到安装成功即可,忘记怎么配置的话,可以看看这篇博客回忆起来(http://t.csdnimg.cn/HyovN

2.接下来我们写一个node项目

1)在一个新建文件夹里,初始化一个node项目

npm init

2)安装node-rtsp-stream库

npm install node-rtsp-stream

3)在根目录下编写一个server.js的文件,然后在package.json里面的scripts配置"start": "node server.js"

const Stream = require('node-rtsp-stream');

// Name of the stream, used to identify it in the API
new Stream({
  name: 'socket',
  streamUrl: 'rtsp://admin:密码@ip',
  wsPort: 9999,
    // ffmpeg 的一些配置参数,比如转换分辨率等,大家可以去 ffmpeg 官网自行查询
  ffmpegOptions: {
    '-stats': '',
    '-r': 20,
    '-s': '1280 720'
  }
});

前端:基于jspmg的前端视频展示

我们创建一个react项目,确保安装了node.js,

1.创建react项目

npx create-react-app my-app

2.运行项目

cd my-app
npm start

3.编码

App.js:

import './App.css'
import React, { useEffect } from "react";
import JSMpeg from "@cycjimmy/jsmpeg-player";

export default function JsmpegPlayer() {

  useEffect(() => {
    // 根据你后端 RTSP 推流服务转的 WebSocket 地址修改
    new JSMpeg.VideoElement('#video', 'ws://localhost:9999');
  }, []);

  return (  
    <div className='App'>
      <h1>Jsmpeg Player</h1>
      <div id="video" className='video-container'>
        
      </div>
    </div>
  );
}

App.css:

.App {
  text-align: center;
  width: 100%;
  height: 100%;
}

.video-container {  
  width: 1500px;  
  height: 1500px;  
}

完成上面的所有步骤之后,使用npm start分别启动这两个项目就好啦!!!

希望这些对你有所帮助,如果你觉得有用的话,欢迎点赞收藏起来,方便下次浏览查阅呦

相关推荐
小牛itbull1 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js