海康威视云台获取视频流数据——vue前端页面实时显示

素颜马尾好姑娘i 2022-12-16 09:14 1345阅读 0赞

**本次记录使用的硬件：海康威视 智能球型摄像机 产品型号DS-2DC4223IW-DE**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center]

#### 前期工作 ####

1.  供电 2. 连接网线

#### 网络设置 ####

配置 》 网络 》 高级配置 》 平台接入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 1]  
平台接入方式选择 萤石云

#### 直播地址获取 ####

1.  注册成为开发者后登录开放平台官网(此账号还可以登录"萤石云视频"App)，进入开发者服务-我的资源-我的设备中添加设备（需将设备连上网后进行添加），添加成功刷新页面可以看到设备信息，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 3]
2.  添加完设备后，平台还不会提供服务，需要在"我的账号》应用信息"中获取测试AccessToken以及填写相应信息后才能使用服务。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 4]
3.  下载一个"萤石云视频"App， 在App上添加完设备后。此时要在App中将"视频加密"关闭，不然视频无法使用直播服务。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 5]
4.  选择一个设备点击直播地址，进入直播地址设置页面，不用担心关闭加密会造成可能的危险，直播地址的安全可以设置有效期来控制，后面安全防盗方面会进行相应的介绍。关闭加密后就可以看到你的设备已经生成相应的直播地址了，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 6]  
    进入直播地址后可以获取如下链接：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 7]

#### 扩展 ####

HLS适用于移动端使用，可用微信直接打开，也可集成H5页面嵌入到微信小程序或者微信公众号中。

RTMP适用于PC网页端使用，可用flash或者ckplayer等播放器嵌入网页的方式播放，较HLS延迟小，更稳定。

注意: 使用前先进行HLS播放测试，确认视频可正常播放后再进行使用，无法播放的地址会展示错误提示，根据错误提示进行调整，若调整无法恢复可在工单系统中提问咨询。

#### 前端显示第一种方法 ezuikit.js ####

下载UIKit JavaScript上传服务器后解压，然后进行如下页面配置

首先引入ezuikit.js
    <script src="/ezuikit.js"></script>
     
    页面创建一个video标签 [若设置autoplay属性则默认自动播放]
    <video id="myPlayer" poster="[这里可以填入封面图片URL]" controls playsInline webkit-playsinline [autoplay]>
        <source src="[这里填入从开放平台官网获取到的RTMP协议URL]" type="" />
    </video>
     
    再进行初始化
    <script> var player = new EZUIPlayer('myPlayer'); </script>

#### 前端显示第二种方法 vue-video-player ####

1.  安装

npm install vue-video-player --save

1.  引入

import VideoPlayer from 'vue-video-player'
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'
     
    Vue.use(VideoPlayer)

1.  html部分

1.  js部分

import {  videoPlayer } from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    import 'videojs-flash'
    export default { 
      components: { 
        videoPlayer
      },
      data() { 
        return { 
          playerOptions: { 
            height: '520',
            sources: [
              { 
                type: 'rtmp/mp4',
                src: 'rtmp://rtmp01open.ys7.com/openlive/65e46a740c10421bae3abbff4421db09.hd'
              }
            ],
            techOrder: ['flash'],
            autoplay: true,
            controls: true,
            poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg'
          }
        }
      }
    }

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 8]  
vue-video-player官网： https://github.surmon.me/vue-video-player/  
萤石云： https://open.ys7.com/console/device.html  
萤石云云台控制接口： https://open.ys7.com/doc/zh/book/index/device\_ptz.html

#### 扩展 ####

谷歌设置网址权限的url， 在网上可能了一堆胡扯的，下面这个好用  
chrome://settings/content/siteDetails?site=http://localhost:8080/\#/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/05525484c0574eb9ae6023aa79f91bdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/bca275aa35854957be8430762395d33a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/946d0efa8e0340ae9272da2899396a4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/ade038313a9e4357a74e6f1b0b174fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/d61dd484f9ae42fab624159088605ee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/6a4c63b1a9cf4315b0c9f04b5ec4ed73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/c4d9a70533264aa6ac181a1aed7dfca4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/ac49bd76dd0c4767ab524846346a386f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/859a5872b80c481d81350c41a7390909.png