vue3 web项目引入高拍仪

一、安装高拍仪SDK？

1. SDK下载路径 Eloam SDK 在线对接平台 - Windows SDK 文档

2.安装sdk，注意不要安装在C盘，安装时最好把360啥的关了，要不然可能会安装不上。(只有window系统的电脑有SDK，没有mac版本的)

二、原理

SDK安装后，会在本地起一个38088的端口，以及相关的接口，我们只需请求相应的接口就好了。

Eloam SDK 在线对接平台 - Windows SDK 文档

这个是高拍仪的api接口地址。

二、开发

1.判断设备是否连接 

const is_connect = () => {
      axios
        .post('http://127.0.0.1:38088/device=isconnect')
        .then((res: any) => {
          console.log(res);
          if (res.data.code === '0') {
            if (res.data.data >= 1) {
              open_view1();
            } else {
              message.warn('请检测设备是否连接上!!!');
            }
          } else {
            message.warn('请检测设备是否连接上');
          }
        })
        .catch(error => {
          message.warn('请检测设备是否连接上!!!');
          console.log(error);
        });
    };

2.打开主摄像头

const open_view1 = () => {
   gaopaiyiData.imgSrc = 'http://127.0.0.1:38088/video=stream&camidx=0?1';
};

我这里是页面上有一个img的元素，直接把src设置成打开摄像头的接口地址，就行了。

3. 主头拍照

/** 主头拍照 */
    const view1_scan = () => {
      let data = {
        filepath: 'base64',
        rotate: '0',
        cutpage: '0',
        camidx: '0',
        ColorMode: '0',
        quality: '3',
      };
      axios.post('http://127.0.0.1:38088/video=grabimage', JSON.stringify(data)).then(res => {
        add_image(res.data.photoBase64);
      });
    };

4. 旋转

const rotate = () => {
      if (rotateIndex === 4) {
        rotateIndex = 0;
      }
      rotateIndex++;
      let angle = 90 * rotateIndex;
      let data = { camidx: '0', rotate: String(angle) };
      axios.post('http://127.0.0.1:38088/video=rotate', JSON.stringify(data)).then(res => {});
    };

---

总结

高拍仪的引入步骤就两步，安装SDK，然后根据官网的api进行开发。根据自己需要的功能，请求对应的接口。