EasyNVR網頁Chrome無插件播放攝像機視頻功能二次開發之雲臺控制接口示例代碼

時間 2019-11-30

標籤 easynvr 網頁 chrome 插件播放攝像機視頻功能二次開發控制接口示例代碼欄目 HTML 简体版

原文原文鏈接

隨着多媒體技術和網絡通訊技術的迅速發展，視頻監控技術在電力系統、電信行業、工業監控、工地、城市交通、水利系統、社區安防等領域獲得愈來愈普遍的應用。攝像頭直播視頻監控經過網絡直接鏈接，可達到的世界任何角落，並可以經過控制雲臺、存儲視頻監控音視頻，對現場遠程運維，實現隨時隨地想看就看的安防需求。css

背景需求

攝像機雲臺控制在攝像機當中很常見，攝像機能將當前狀態下雲臺的水平角度、傾斜角度和攝像機鏡頭焦距等位置參數存儲到設備中，須要時能夠迅速調用這些參數並將雲臺和攝像頭調整至該位置。攝像機只要支持Onvif協議進行和第三方軟件或設備對接，大部分都能進行遠程控制。EasyNVR支持Onvif協議的設備雲臺控制，能實現和設備的實時數據傳輸及控制。vue

今天主要介紹經過EasyNVR接口二次開發，將雲臺控制及實時直播功能集成在本身的原有的web業務系統上。

demo效果以下：
ios
demo是經過vue-cli腳手架搭建起來，簡單說一下，目錄結構
git
對easy-player不瞭解的這是播放器插件地址能夠參看（https://www.npmjs.com/package/easy-player）github
這裏主要講解一下App.vue內容文件web

<template>
  <div id="app">
    <!-- 測試鑑權 若是鑑權已關閉請忽略 -->
    <div class="div-btn">
      <el-button-group>
        <el-button size="mini" type="success" @click="login">測試登陸</el-button>
        <el-button size="mini" type="success" @click="loginout">測試退出</el-button>
        <el-button size="mini" type="success" @click="testapi">測試鑑權</el-button>
      </el-button-group>
    </div>
    <el-row>
      <!-- 播放窗口組件 -->
      <el-col :span="12">
        <EasyPlayer :videoUrl="videoUrl" fluent autoplay live stretch></EasyPlayer>
        <el-input v-model="input" placeholder="請輸入播放地址接口" size="mini"></el-input>
        <p>列如：http://127.0.0.1:10800/api/v1/getchannelstream?channel=1&protocol=RTMP</p>
        <el-button class="player-button" size="mini" type="success" @click="player">播放</el-button>
      </el-col>
      <!-- 雲臺控制組件 -->
      <el-col :span="12">
          <div class="control-box">
            <!-- 雲臺控制按鈕列表 -->
            <span @click="testControl('zoomin')"><i class="el-icon-circle-plus-outline"></i></span>
            <span @click="testControl('up')"><i class="el-icon-arrow-up"></i></span>
            <span @click="testControl('zoomout')"><i class="el-icon-remove-outline"></i></span>
            <span @click="testControl('left')"><i class="el-icon-arrow-left"></i></span>
            <span @click="testControl('stop')">中止</span>
            <span @click="testControl('right')"><i class="el-icon-arrow-right"></i></span>
            <span></span>
            <span @click="testControl('down')"><i class="el-icon-arrow-down"></i></span>
            <span></span>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
    <script>
      import md5 from "md5"; //引入md加密密碼傳給服務端，這裏默認是admin *修改在103行*
      import EasyPlayer from "easy-player"
      export default {
        data() {
          return {
            videoUrl:'',                // 這裏定義一個變量用來保存視頻流地址
            input:'',                   // 接收用戶的接口地址
            timer: 0,                   // 定時器用來保活接口
            channels: '',               // 保存接口地址通道地址
            protocols: ''               // 保存接口地址視頻類型
          }
        },
        components:{
          EasyPlayer
        },
        mounted() {},
        methods: {
          player() { // 當輸入完接口地址按下播放會執行這個函數
            if(!this.input){
              this.$message.error('請輸入接口地址！');
            }else{
              let strs = this.input.split('?')[1].split('&')
              for (const iterator of strs) {
                if (iterator.indexOf('channel') != -1) this.channels = parseInt(iterator.split('=')[1])
                if (iterator.indexOf('protocol') != -1) this.protocols = iterator.split('=')[1]
              }
              this.play() //當player函數接收到可用的地址執行play函數
            }
          },
          play() { //play函數會向服務端發送請求對應的通道及視頻類型
            this.$axios.get('/api/v1/getchannelstream', {
                params: {
                  channel: this.channels,
                  protocol: this.protocols
                }
              })
              
              .then((response) => { //請求成功服務端會返回對應的通道的視頻流地址把返回的地址傳給以前定義videoUrl 就能夠播放視頻可是視頻播放一會就會中止，須要保活接口下面建立一個定時器（注意：保活只是在按需的狀況下使用）
                this.videoUrl = response.data.EasyDarwin.Body.URL
                this.timer = setInterval(() => { //當請求成功定時器打開每30秒向服端端發送一下請求告訴服務端客戶端須要播放視頻，否則服務端就會中止向設備端拉取視頻。
                  this.touchStream();
                }, 30 * 1000);
                if(!response.data.EasyDarwin.Body.URL)this.$message.error('播放失敗,檢查接口是否正確或者通道是否啓用！');
              })
              .catch((error) => {
                let { status } = error.response
                if (status == 401) Message.error('token值無效，請從新登陸')
              });
          },
          touchStream() { //touchStream用來調取保活接口
            this.$axios.get('/api/v1/touchchannelstream', {
                params: {
                  channel: this.channels,
                  protocol: this.protocols
                }
              })
              .then((response) => {
                this.videoUrl = response.data.EasyDarwin.Body.URL
                if(!response.data.EasyDarwin.Body.URL)this.$message.error('播放失敗！');
              })
              .catch((error) => {
                let { status } = error.response
                if (status == 401) Message.error('token值無效，請從新登陸')
              });
          },
          login() { //測試登陸
            this.$axios.get('/api/v1/login', {
                params: {
                  username: "admin",
                  password: md5("admin")
                }
              })
              .then((response) => {
                this.$message({
                  message: '恭喜你，登陸成功！',
                  type: 'success'
                });
              })
              .catch((error) => {
                this.$message.error('用戶名或密碼錯誤，登陸失敗！');
              });
          },
          loginout() { //測試推出
            this.$axios.get('/api/v1/logout')
              .then((response) => {
                this.$message({
                  message: '成功退出！',
                  type: 'success'
                });
              })
              .catch((error) => {
                console.log(error)
              });
          },
          
          testapi() {   //測試接口鑑權是否生效
            this.$axios.get('/api/v1/getchannelsconfig', {
                params: {
                  start: 0,
                  limit: 1
                }
              })
              .then((response) => {
                this.$message({
                  message: '鑑權成功！',
                  type: 'success'
                });
              })
              .catch((error) => {
                this.$message.error('鑑權失敗！');
              });
          },
          testControl(data) {  // testControl裏的data是接收雲臺控制組件的裏按鈕傳遞的參數。
            this.$axios.get('/api/v1/ptzcontrol', {// 調取雲臺接口地址
                params: {
                  channel: this.channelNum,     // 調取對應的設備通道地址
                  command: data                 // 調取雲臺接口的控制參數
                }
              })
              .then((response) => {
                console.log(response)
              })
              .catch((error) => {
                console.log(error)
              });
          }
        }
      }
    </script>
    
    <style lang="scss">
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        // text-align: center;
        color: #2c3e50;
      }
      .el-row, .div-btn{
        max-width: 800px;
        margin: auto;
      }
      .div-btn {
        padding: 5px 0;
      }
      .el-col {
        min-height: 300px;
        // border: 1px pink solid
      }
      .el-input {
        padding: 5px;
        box-sizing: border-box;
      }
      .player-button {
        margin: 5px;
        width: 100%;
      }
      .control-box {
        width: 180px;
        height: 180px;
        margin: 50px;
        span {
          display: inline-block;
          text-align: center;
          float: left;
          width: 60px;
          height: 60px;
          padding: 5px;
          border-radius: 50%;
          box-sizing: border-box;
          // border: 1px solid #ccc;
          line-height: 50px;
          cursor: pointer;
          &:hover {
            background-color: #67C23A;
             border: none;
          }
        }
      }
      p {
        font-size: 12px;
      }
    </style>

項目倉庫地址（https://github.com/EasyNVR/EasyNVR/tree/master/EasyNVR_apidemo/apidemo）

下載項目到本地到目錄下安裝demo須要的依賴
npm install
運行項目
npm run serve
打包
npm run build
注意：須要攝像頭支持雲臺控制。vue-cli

EasyNVR部署架構

單點內網

單點公網

多點公網

RTMP推流

EasyNVR應用場景

EasyNVR在互聯網安防直播行業已有多年實戰經驗，經過各行業的市場檢驗已成爲一套便捷、安全、覆蓋範圍廣的成熟產品，結合硬件產品，服務於各行各業視頻基礎建設，同時提供二次開發接口便於企業集成到本身的業務系統中，打造專屬於本身的互聯網視頻監控平臺。

npm

手機看家

航空監控

景區監控

關於EasyNVR

EasyNVR是一款擁有完整、自主、可控知識產權，同時又可以具有軟硬一體功能的安防互聯網化流媒體服務器，可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP、Onvif協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發。詳情可訪問EasyNVR官網：http://www.easynvr.com
axios