VUE3项目大华摄像头WEB端开发

1、下载WEB开发包

前往大华官网地址：(https://support.dahuatech.com/sdkindex/sdkExploit/267?IsDpValue=%2brSesyHc35SwoPzpUsL6AFdResJUzHZKcGdGR3d27us=)，下载WEB开发包。

2、在项目中引入开发模块

1. 解压下载的WEB开发包文件，把NVR/webs目录下的module文件引入项目的public目录
   
   

2. 在index.html文件引入"PlayerControl.js"模块；

3、封装大华摄像头视频播放方法

```html
<!-- 视频画面播放窗口 -->
<canvas id="canvas"></canvas>
<video id="video"></video>

 
```javascript
  /**
   * 播放视频
   * @param {Object} player 播放器实例
   * @param {String} ip 设备ip
   * @param {String} name 设备用户名
   * @param {String} pswd 设备密码
   * @param {String} canvasId 画布id
   * @param {String} videoId 视频id
   * @param {Number} channel 通道号，1开始
   */
  videoPlay(player, ip, name, pswd, canvasId, videoId, channel){
    var options = {
        wsURL: 'ws://'+ip+'/rtspoverwebsocket',
        rtspURL: 'rtsp://'+ip+'/cam/realmonitor?channel='+channel+'&subtype=0&proto=Private3',
        username: name,
        password: pswd,
        h265AccelerationEnabled: true
    };
    player = new PlayerControl(options);
    // console.log(player, channel);
    player.on('WorkerReady', function(){
        player.connect();  
    });
    player.on('DecodeStart', function(rs){
        console.log('start decode');
        console.log(rs);

    });
    player.on('PlayStart', function(rs){
        console.log('play');
        console.log(rs);
    });
    player.on('Error', function(rs){
        console.log('error');
        console.log(rs);
    });
    player.on('FileOver', function(rs){
        console.log('recorder play over');
        console.log(rs);
    });
    player.on('MSEResolutionChanged', function(rs){
        console.log('resolution  changed');
        console.log(rs);
    });
    player.on('FrameTypeChange', function(rs){
        console.log('video encode mode changed');
        console.log(rs);
    });
    player.on('audioChange', function(rs){
        console.log('audio encode changed');
        console.log(rs);
    });
    let canvasElement = document.getElementById(canvasId);
    let videoElement = document.getElementById(videoId);
    player.init(canvasElement, videoElement);
  }
  
  /**
   * 关闭播放
   */
  stopPlay(player){
     player&& player.stop();
     player&& player.close();
     player= null;
  }