426 lines
9.9 KiB
JavaScript
426 lines
9.9 KiB
JavaScript
|
const utils = require("../../utils/utils");
|
|||
|
|
const CameraDevice = require("../utils/camera-device");
|
|||
|
|
const module = require("../index.js");
|
|||
|
|
|
|||
|
|
const AiSports = requirePlugin("aiSport");
|
|||
|
|
const PoseGraphs = AiSports.PoseGraphs;
|
|||
|
|
const humanDetection = AiSports.humanDetection;
|
|||
|
|
|
|||
|
|
Component({
|
|||
|
|
options: {
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
},
|
|||
|
|
properties: {
|
|||
|
|
/**
|
|||
|
|
* 是否启用全屏模式，true-是，全屏模式；false-否，自适应模式;
|
|||
|
|
* 【全屏模式】: 检测组件大小为100vw 100vh；同时建议开启页面pageOrientation为自适应，navigationStyle为custom
|
|||
|
|
*/
|
|||
|
|
fullScreen: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
topp: {
|
|||
|
|
type: Number,
|
|||
|
|
value: 100
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否开启骨骼图绘制，
|
|||
|
|
* 此值最好不要动态改变
|
|||
|
|
*/
|
|||
|
|
poseDrawEnabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 识别引擎选择
|
|||
|
|
* 1-ve1识别引擎
|
|||
|
|
* 2-ve2识别引擎
|
|||
|
|
*/
|
|||
|
|
ve: {
|
|||
|
|
type: Number,
|
|||
|
|
value: null
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否启用VE1增强模式
|
|||
|
|
* true-是; false-否 null-自动
|
|||
|
|
*/
|
|||
|
|
enhanced: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: null
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否显示扩展信息
|
|||
|
|
*/
|
|||
|
|
extendInfo: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
zoom: 1,
|
|||
|
|
deviceKey: "back",
|
|||
|
|
previewWidth: 480,
|
|||
|
|
previewHeight: 640,
|
|||
|
|
status: 'unknown',
|
|||
|
|
fps: 0,
|
|||
|
|
poseFps: 0,
|
|||
|
|
isHumanBody: false,
|
|||
|
|
previewRate: 1,
|
|||
|
|
previewOffsetX: 0,
|
|||
|
|
previewOffsetY: 0,
|
|||
|
|
frameWidth: 480,
|
|||
|
|
frameHeight: 640,
|
|||
|
|
videoStyle: 'width:100vw;height:100vh'
|
|||
|
|
},
|
|||
|
|
lifetimes: {
|
|||
|
|
attached() {
|
|||
|
|
this.autoFitPreview(480, 640);
|
|||
|
|
this.initializeHumanDetection();
|
|||
|
|
},
|
|||
|
|
detached() {
|
|||
|
|
if (!this.camera)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
this.camera.stop();
|
|||
|
|
this.camera.dispose();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
observers: {
|
|||
|
|
'fullScreen, previewWidth, previewHeight': function () {
|
|||
|
|
this.updateVideoStyle();
|
|||
|
|
},
|
|||
|
|
'poseDrawEnabled': function (val) {
|
|||
|
|
this.initCanvas();
|
|||
|
|
},
|
|||
|
|
've, enhanced': function (ve, enhanced) {
|
|||
|
|
this.stopCapture();
|
|||
|
|
this.initializeHumanDetection();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
updateVideoStyle() {
|
|||
|
|
const style = this.data.fullScreen ?
|
|||
|
|
'width:100vw;height:100vh' :
|
|||
|
|
`width:${this.data.previewWidth}px;height:${this.data.previewHeight}px;`;
|
|||
|
|
this.setData({
|
|||
|
|
videoStyle: style
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
openCameraAuth() {
|
|||
|
|
const that = this;
|
|||
|
|
wx.showModal({
|
|||
|
|
content: '您未打开摄像头权限，无法使用本功能。',
|
|||
|
|
confirmText: '去打开',
|
|||
|
|
success(res) {
|
|||
|
|
if (!res.confirm) {
|
|||
|
|
wx.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '无法使用本功能。'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
wx.openSetting({
|
|||
|
|
success(res) {
|
|||
|
|
if (res.authSetting['scope.camera'] != true) {
|
|||
|
|
that.openCameraAuth();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
wx.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '摄像头权限已打开，稍后请重新进入本页。'
|
|||
|
|
});
|
|||
|
|
setTimeout(() => wx.navigateBack(), 1500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initializeHumanDetection() {
|
|||
|
|
wx.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const ehd = module.judgeEnhanced(this.data.enhanced);
|
|||
|
|
const that = this;
|
|||
|
|
humanDetection.initialize({
|
|||
|
|
ve: that.data.ve,
|
|||
|
|
enhanced: ehd,
|
|||
|
|
callback: (err) => {
|
|||
|
|
wx.hideLoading();
|
|||
|
|
if (!err)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
wx.showModal({
|
|||
|
|
content: `初始化失败，详细信息：${err.message}`,
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
fullScreenFit(width, height) {
|
|||
|
|
const winfo = wx.getWindowInfo();
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
previewWidth: winfo.windowWidth,
|
|||
|
|
previewHeight: winfo.windowHeight
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (winfo.windowHeight > winfo.windowWidth) {
|
|||
|
|
// 竖屏模式
|
|||
|
|
console.log('竖屏');
|
|||
|
|
const previewRate = winfo.windowHeight / height;
|
|||
|
|
const previewOffsetX = (winfo.windowWidth - width * previewRate) / 2;
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
previewRate: previewRate,
|
|||
|
|
previewOffsetX: previewOffsetX,
|
|||
|
|
previewOffsetY: 0
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 横屏模式
|
|||
|
|
console.log('横屏');
|
|||
|
|
const previewRate = winfo.windowWidth / width;
|
|||
|
|
const previewOffsetY = (winfo.windowHeight - height * previewRate) / 2;
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
previewRate: previewRate,
|
|||
|
|
previewOffsetX: 0,
|
|||
|
|
previewOffsetY: previewOffsetY
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
autoFitPreview(width, height) {
|
|||
|
|
this.setData({
|
|||
|
|
frameWidth: width,
|
|||
|
|
frameHeight: height
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (this.data.fullScreen) {
|
|||
|
|
this.fullScreenFit(width, height);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const winfo = wx.getWindowInfo();
|
|||
|
|
const rate = winfo.windowWidth / width;
|
|||
|
|
this.setData({
|
|||
|
|
previewWidth: width * rate,
|
|||
|
|
previewHeight: height * rate,
|
|||
|
|
previewRate: rate,
|
|||
|
|
previewOffsetX: 0,
|
|||
|
|
previewOffsetY: 0
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initCanvas() {
|
|||
|
|
if (!this.data.poseDrawEnabled)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
const that = this;
|
|||
|
|
const query = wx.createSelectorQuery().in(this);
|
|||
|
|
|
|||
|
|
query.select('#graphics')
|
|||
|
|
.fields({
|
|||
|
|
node: true,
|
|||
|
|
size: true
|
|||
|
|
})
|
|||
|
|
.exec(res => {
|
|||
|
|
if (utils.isEmptyArray(res))
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
const canvas = res[0].node;
|
|||
|
|
const dpr = wx.getWindowInfo().pixelRatio;
|
|||
|
|
//res[0].width * dpr; //由于iPhone改变canvas样式后渲染有滞后性，取出的宽、高可能与样式不一致
|
|||
|
|
canvas.width = that.data.previewWidth * dpr;
|
|||
|
|
//res[0].height * dpr;
|
|||
|
|
canvas.height = that.data.previewHeight * dpr;
|
|||
|
|
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
ctx.scale(dpr, dpr);
|
|||
|
|
|
|||
|
|
that.canvas = canvas;
|
|||
|
|
that.ctx = ctx;
|
|||
|
|
|
|||
|
|
that.poseGraphs = new PoseGraphs(
|
|||
|
|
ctx,
|
|||
|
|
canvas.width,
|
|||
|
|
canvas.height,
|
|||
|
|
that.data.previewRate
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
that.poseGraphs.offsetX = that.data.previewOffsetX;
|
|||
|
|
that.poseGraphs.offsetY = that.data.previewOffsetY;
|
|||
|
|
|
|||
|
|
that.poseGraphs.lineColor = "#FF8E148C";
|
|||
|
|
that.poseGraphs.pointColor = '#00a500';
|
|||
|
|
that.poseGraphs.leftColor = '#007fd3';
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async detection(frame) {
|
|||
|
|
|
|||
|
|
let ts = (new Date()).getTime();
|
|||
|
|
const human = await humanDetection.detectionAsync(frame);
|
|||
|
|
ts = (new Date()).getTime() - ts;
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
poseFps: Math.floor(1000 / ts)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (human) {
|
|||
|
|
this.setData({
|
|||
|
|
isHumanBody: true
|
|||
|
|
});
|
|||
|
|
this.triggerEvent('on-human-detecting', {
|
|||
|
|
human: human,
|
|||
|
|
frame: frame
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.setData({
|
|||
|
|
isHumanBody: false
|
|||
|
|
});
|
|||
|
|
this.triggerEvent('on-human-detecting', {
|
|||
|
|
human: null
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.data.poseDrawEnabled)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
//无结果
|
|||
|
|
if (!human)
|
|||
|
|
this.poseGraphs.clear();
|
|||
|
|
else
|
|||
|
|
this.poseGraphs.drawing(human.keypoints);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initVideo() {
|
|||
|
|
if (this.camera)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
const that = this;
|
|||
|
|
this.camera = new CameraDevice();
|
|||
|
|
this.camera.onFrame = frame => {
|
|||
|
|
that.setData({
|
|||
|
|
fps: that.camera.fps
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//重新适应
|
|||
|
|
if (frame.width != that.data.frameWidth || frame.height != that.data.frameHeight) {
|
|||
|
|
that.camera.stop(true);
|
|||
|
|
that.autoFitPreview(frame.width, frame.height);
|
|||
|
|
that.initCanvas();
|
|||
|
|
that.camera.start();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
that.detection(frame);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.camera.onStatusChange = (val, text) => {
|
|||
|
|
if (val === -1) {
|
|||
|
|
wx.hideLoading();
|
|||
|
|
that.setData({
|
|||
|
|
isHumanBody: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
that.setData({
|
|||
|
|
status: text
|
|||
|
|
})
|
|||
|
|
that.triggerEvent('on-camera-change', {
|
|||
|
|
val: val,
|
|||
|
|
text: text
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
startCapture() {
|
|||
|
|
this.initVideo();
|
|||
|
|
this.camera.start();
|
|||
|
|
wx.setKeepScreenOn({
|
|||
|
|
keepScreenOn: true
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
delayStart() {
|
|||
|
|
if (this.data.camera) {
|
|||
|
|
const status = this.camera.getStatus();
|
|||
|
|
if (status != "unknown" && status != "stopped")
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//延时5s启动
|
|||
|
|
const that = this;
|
|||
|
|
setTimeout(() => that.startCapture(), 5000);
|
|||
|
|
wx.showToast({
|
|||
|
|
title: '5S后开始',
|
|||
|
|
duration: 4900
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
stopCapture() {
|
|||
|
|
if (!this.camera || this.camera.getStatus() != 'running')
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
isHumanBody: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (this.camera)
|
|||
|
|
this.camera.stop();
|
|||
|
|
|
|||
|
|
wx.setKeepScreenOn({
|
|||
|
|
keepScreenOn: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
fps: this.camera.fps,
|
|||
|
|
status: this.camera.getStatus()
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
wx.showLoading({
|
|||
|
|
title: '正在停止...'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
toggleCamera() {
|
|||
|
|
this.setData({
|
|||
|
|
deviceKey: this.data.deviceKey === 'back' ? 'front' : 'back'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onCameraReady(e) {
|
|||
|
|
console.log('相机初始化完成。');
|
|||
|
|
this.setData({
|
|||
|
|
zoom: e.detail.maxZoom
|
|||
|
|
});
|
|||
|
|
this.initCanvas();
|
|||
|
|
if (!this.camera)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
console.log('重新初始化CameraDevice');
|
|||
|
|
const status = this.camera.getStatus();
|
|||
|
|
this.camera.dispose();
|
|||
|
|
this.camera = null;
|
|||
|
|
this.initVideo();
|
|||
|
|
if (status === 'running')
|
|||
|
|
this.camera.start();
|
|||
|
|
},
|
|||
|
|
onCameraError(e) {
|
|||
|
|
const err = e.detail.errMsg;
|
|||
|
|
if (err.includes('auth')) {
|
|||
|
|
this.openCameraAuth();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
wx.showModal({
|
|||
|
|
content: err,
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|