npm install hikvision-web-sdk  # 或直接引入JS文件

<template>
  <div>
    <!-- 視頻容器 -->
    <div id="hikvision-player" ref="videoContainer"></div>
    <!-- PTZ控制按鈕 -->
    <button @click="ptzControl('LEFT')">左轉(zhuǎn)</button>
    <button @click="capture">截圖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      // 動(dòng)態(tài)加載?？礢DK
      const script = document.createElement('script');
      script.src = 'https://open.hikvision.com/resource/webVideoCtrl.js';
      script.onload = () => {
        WebVideoCtrl.init({
          callback: () => {
            this.player = new WebVideoCtrl.IWebPlayback({
              id: this.$refs.videoContainer.id,
              width: '100%',
              height: '500px'
            });
            this.loginCamera();
          }
        });
      };
      document.head.appendChild(script);
    },
    loginCamera() {
      this.player.login({
        ip: '192.168.1.64',
        port: 8000,
        username: 'admin',
        password: 'your_password',
        success: () => this.player.startPreview()
      });
    },
    ptzControl(direction) {
      this.player.ptzControl(direction);
    },
    capture() {
      this.player.capturePicture('snapshot_' + Date.now() + '.jpg');
    }
  },
  beforeDestroy() {
    if (this.player) this.player.stopPreview();
  }
}
</script>

// server.js
const express = require('express');
const { spawn } = require('child_process');
const app = express();

app.get('/stream', (req, res) => {
  const ffmpeg = spawn('ffmpeg', [
    '-i', 'rtsp://admin:password@192.168.1.64:554/Streaming/Channels/101',
    '-c:v', 'libx264',
    '-preset', 'ultrafast',
    '-f', 'mpegts',
    'pipe:1'
  ]);
  ffmpeg.stdout.pipe(res);
});

app.listen(3000);

<template>
  <canvas ref="videoCanvas"></canvas>
</template>

<script>
import JSMpeg from '@cycjimmy/jsmpeg-player';

export default {
  mounted() {
    new JSMpeg.Player('ws://your-server:3000/stream', {
      canvas: this.$refs.videoCanvas,
      autoplay: true,
      audio: false
    });
  }
}
</script>

<template>
  <div>
    <img :src="snapshotUrl" v-if="snapshotUrl">
    <button @click="getSnapshot">獲取截圖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      snapshotUrl: null
    }
  },
  methods: {
    async getSnapshot() {
      try {
        const response = await fetch(
          'http://192.168.1.64/ISAPI/Streaming/channels/101/picture', 
          {
            headers: {
              'Authorization': 'Basic ' + btoa('admin:password')
            }
          }
        );
        const blob = await response.blob();
        this.snapshotUrl = URL.createObjectURL(blob);
      } catch (error) {
        console.error('獲取截圖失敗', error);
      }
    }
  }
}
</script>

// 獲取設(shè)備狀態(tài)（無(wú)需視頻流）
GET /ISAPI/System/deviceInfo
// 控制云臺(tái)（需支持PTZ的型號(hào)）
PUT /ISAPI/PTZCtrl/channels/1/continuous