vue2 播放大华 rtsp 视频流方法

前言最近需要用到大华摄像头所以一直在找各种资料学习最后整理了一下，话不多说 “开搞”

第一步我们需要一个大华摄像头此句是废话及 webrtc 至于是什么大家可以去搜索一下

WebRTC（Web Real-Time Communications）是由谷歌开源并推进纳入W3C标准的一项音视频技术，旨在通过点对点的方式，在不借助中间媒介的情况下，实现浏览器之间的实时音视频通信。

下载方式此文章绑定了资源包了应该是不花钱花钱可以看我主页资源那里面免费的省得去下载了可慢了下载的时候

说到这了那就从 WebRTC 开始吧下载完成解压后你会得到文件夹点击后

双击运行看到这个你就成功启动了默认端口 8000
双击之后一闪而过可以用命令启动文件夹cmd输入 webrtc-streamer.exe -H 192.168.10.1:8000 -o

192.168.10.1 本机ip

8000 端口

-o 占用内存少一些

好了这个东西就完事了下一个

我这里以大华摄像头为例子其他的大同小异

进入大华摄像头后台设置修改编码模式 264 我就因为这个找了1小时问题控制台没报错请求没报错画面就是不显示人都麻了

下一步网络设置 -- 平台接入 -- RTMP 启用确定

完事然后就是前端代码了直接复制粘贴这个你可以放在组件中页面调用就行

<template>
  <div>
    <video id="video" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
  </div>
</template>

<script>
import webRtcServer from '/public/stactic/webrtcstreamer'
import adapter from '/public/stactic/adapter.min'

export default {
  data() {
    return {
      webRtcServer: null,
      camera_ip: '127.0.0.1:8000' //  webRTC  运行机器的  IP  加  端口
  }
  },
  mounted() {
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
    //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
    this.webRtcServer.connect('rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0')
  },
  //销毁视频流
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  }
}
</script>

然后的然后你如果现在运行你会发现 100% 不会显示吼吼吼吼因为还有一步就是

import webRtcServer from '/public/stactic/webrtcstreamer'
import adapter from '/public/stactic/adapter.min'

这两个引用还没有说呢咋这么心急呢吼吼吼

这两个文件在第一步所下载的 webrtc 文件夹中 html 里面拿名字搜索一下就行了这两个文件我i放在了里面具体看你们自己哈然后你会发现

好使了哦~~~~~

vue2 播放大华 rtsp 视频流方法

悦读