|
|
@@ -4,22 +4,8 @@
|
|
|
<!-- <p>{{FaceisDetected}}</p> -->
|
|
|
<div class="content-cam">
|
|
|
<div class="camera-wrp sec">
|
|
|
- <video
|
|
|
- width="320"
|
|
|
- height="320"
|
|
|
- ref="videoDom"
|
|
|
- id="video_cam"
|
|
|
- preload
|
|
|
- autoplay
|
|
|
- loop
|
|
|
- muted
|
|
|
- ></video>
|
|
|
- <canvas
|
|
|
- width="320"
|
|
|
- height="320"
|
|
|
- ref="canvasDOM"
|
|
|
- id="face_detect"
|
|
|
- ></canvas>
|
|
|
+ <video width="320" height="320" ref="videoDom" id="video_cam" preload autoplay loop muted></video>
|
|
|
+ <canvas width="320" height="320" ref="canvasDOM" id="face_detect"></canvas>
|
|
|
<div class="control-btn"></div>
|
|
|
</div>
|
|
|
<div class="images-wrp sec">
|
|
|
@@ -57,32 +43,32 @@ export default {
|
|
|
width: {
|
|
|
min: 320,
|
|
|
ideal: 1280,
|
|
|
- max: 1920,
|
|
|
+ max: 1920
|
|
|
},
|
|
|
height: {
|
|
|
min: 240,
|
|
|
ideal: 720,
|
|
|
- max: 1080,
|
|
|
+ max: 1080
|
|
|
},
|
|
|
// frameRate受限带宽传输时，低帧率可能更适宜
|
|
|
frameRate: {
|
|
|
min: 15,
|
|
|
ideal: 30,
|
|
|
- max: 60,
|
|
|
+ max: 60
|
|
|
},
|
|
|
// 摄像头翻转
|
|
|
- facingMode: "user",
|
|
|
- },
|
|
|
- },
|
|
|
+ facingMode: "user"
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- // this.changeView();
|
|
|
+ this.changeView();
|
|
|
},
|
|
|
computed: {
|
|
|
FaceisDetected() {
|
|
|
return this.isdetected;
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
// The getUserMedia interface is used for handling camera input.
|
|
|
@@ -131,10 +117,10 @@ export default {
|
|
|
tracker.setStepSize(2);
|
|
|
tracker.setEdgesDensity(0.1);
|
|
|
window.tracking.track("#video_cam", tracker, { camera: true });
|
|
|
- tracker.on("track", function (event) {
|
|
|
+ tracker.on("track", function(event) {
|
|
|
const { autoCaptureTrackTraking } = context;
|
|
|
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- event.data.forEach(function ({ x, y, width, height }) {
|
|
|
+ event.data.forEach(function({ x, y, width, height }) {
|
|
|
canvasContext.strokeStyle = "#a64ceb";
|
|
|
canvasContext.strokeRect(x, y, width, height);
|
|
|
canvasContext.font = "11px Helvetica";
|
|
|
@@ -207,13 +193,13 @@ export default {
|
|
|
tracker.setStepSize(1.7);
|
|
|
tracking.track(image, tracker);
|
|
|
|
|
|
- tracker.on("track", function (event) {
|
|
|
- event.data.forEach(function (rect) {
|
|
|
+ tracker.on("track", function(event) {
|
|
|
+ event.data.forEach(function(rect) {
|
|
|
window.plot(rect.x, rect.y, rect.width, rect.height);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- window.plot = function (x, y, w, h) {
|
|
|
+ window.plot = function(x, y, w, h) {
|
|
|
const rect = document.createElement("div");
|
|
|
document.querySelector(`.img-item-${index}`).appendChild(rect);
|
|
|
rect.classList.add("rect");
|
|
|
@@ -242,9 +228,9 @@ export default {
|
|
|
if (typeof window.stream === "object") {
|
|
|
this.videoEl.srcObject = null;
|
|
|
//this.$store.commit('setVideoCanvasObject', '')
|
|
|
- window.stream.getTracks().forEach((track) => track.stop());
|
|
|
+ window.stream.getTracks().forEach(track => track.stop());
|
|
|
}
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
root