vue3 web项目引入高拍仪
高拍仪的引入步骤就两步,安装SDK,然后根据官网的api进行开发。根据自己需要的功能,请求对应的接口。
·
一、安装高拍仪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进行开发。根据自己需要的功能,请求对应的接口。
更多推荐
已为社区贡献1条内容
所有评论(0)