通过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分别启动这两个项目就好啦!!!

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

相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端