当前位置:首页 » 《资源分享》 » 正文

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

19 人参与  2024年12月06日 10:02  分类 : 《资源分享》  评论

点击全文阅读


效果图:

实现过程:

首先,我们需要拿到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 APInew 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-appnpm 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分别启动这两个项目就好啦!!!

二、基于webrtc-streamer转流 + react直接调用

首先,我们下载webrtc-streamer(Releases · mpromonet/webrtc-streamer (github.com))

然后解压缩成

 配置config.json文件:

 

{   "urls": {       "dapenson": {"video":"rtsp://admin:密码@ip"}     } }

然后点击webrtc-streamer.exe文件

把webrtcstreamer.js文件复制到react项目里的public文件夹下面

 react项目里的App.js代码:

import React, { useState, useEffect, useRef } from 'react';function App() {  const videoRef = useRef(null);  const webRtcServerRef = useRef(null);  const [currentUrl, setCurrentUrl] = useState("rtsp://admin:密码@ip:554/h264/ch1/main/av_stream");  useEffect(() => {    if (!videoRef.current) return;    // 检查是否已经加载了脚本    if (!document.querySelector('script[src="/public/webrtcstreamer.js"]')) {      const script = document.createElement('script');      script.src = '/public/webrtcstreamer.js'; // 确保这个路径是正确的      script.async = true;      script.onload = () => {        webRtcServerRef.current = new window.WebRtcStreamer(videoRef.current, "http://127.0.0.1:8000");        webRtcServerRef.current.connect(currentUrl);      };      document.body.appendChild(script);      return () => {        document.body.removeChild(script);      };    } else {      // 如果脚本已经加载,则直接初始化 WebRtcStreamer      webRtcServerRef.current = new window.WebRtcStreamer(videoRef.current, "http://127.0.0.1:8000");      webRtcServerRef.current.connect(currentUrl);    }    return () => {      if (webRtcServerRef.current) {        webRtcServerRef.current.disconnect();      }    };  }, [currentUrl]);  const handleSwitchCamera = (newUrl) => {    setCurrentUrl(newUrl);  };  return (    <div className="App">      <header className="App-header">        {/* 这里可以添加应用的标题或其他内容 */}        <button onClick={() => handleSwitchCamera("rtsp://admin:密码@ip:554/h264/ch1/main/av_stream")}>Camera 1</button>        <button onClick={() => handleSwitchCamera("rtsp://admin:密码@ip:554/h264/ch1/main/av_stream")}>Camera 2</button>      </header>      <div className="video-container">        <video id="video" autoPlay muted style={{ height: '100%', width: '100%' }} ref={videoRef} />      </div>    </div>  );}export default App;

直接使用这段App.js的代码就行,需要封装组件的话自行封装就行。 

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


点击全文阅读


本文链接:http://zhangshiyu.com/post/196940.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1