顔決済機能の実装をベースにしたHTML5+tracking.js

<input type="file" capture="camera" accept="image/*"/>

<input type="file" accept="img/*">

// Accessing user media devices
getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        // Latest standard API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit kernel browser
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia) {
        //Firefox browser
        navagator.mozGetUserMedia(constraints).then(success).catch(error);
    } else if (navigator.getUserMedia) {
        //Older version of API
        navigator.getUserMedia(constraints).then(success).catch(error);
    } else {
        this.scanTip = "Your browser does not support access to user media devices"
    }
}

success(stream) {
    this.streamIns = stream
    // Set the URL for playback, for webkit browsers
    this.URL = window.URL || window.webkitURL
    if ("srcObject" in this.$refs.refVideo) {
        this.$refs.refVideo.srcObject = stream
    } else {
        this.$refs.refVideo.src = this.URL.createObjectURL(stream)
    }
    this.$refs.refVideo.onloadedmetadata = e => {
        // Play the video
        this.$refs.refVideo.play()
        this.initTracker()
    }
},
error(e) {
    this.scanTip = "Access to user media failed" + e.name + "," + e.message
}

// Face capture
initTracker() {
    this.context = this.$refs.refCanvas.getContext("2d") // canvas
    this.tracker = new tracking.ObjectTracker(['face']) // tracker instance
    this.tracker.setStepSize(1.7) // set step size
    this.tracker.on('track', this.handleTracked) // bind the listener method
    try {
        tracking.track('#video', this.tracker) // start tracking
    } catch (e) {
        this.scanTip = "Access to user media failed, please retry"
    }
}

// The tracking event
handleTracked(e) {
    if (e.data.length === 0) {
        this.scanTip = 'No face detected'
    } else {
        if (!this.tipFlag) {
            this.scanTip = 'Detected successfully, taking a picture, please hold still for 2 seconds'
        }
        // take a picture after 1 second, only once
        if (!this.flag) {
            this.scanTip = 'Taking picture...'
            this.flag = true
            this.removePhotoID = setTimeout(() => {
                this.tackPhoto()
                this.tipFlag = true
            }, 2000)
        }
        e.data.forEach(this.plot)
    }
}

<div class="rect" v-for="item in profile"
             :style="{ width: item.width + 'px', height: item.height + 'px', left: item.left + 'px', top: item.top + 'px'}"></div>
// Plot the tracking box
plot({x, y, width: w, height: h}) {
    // Create the box object
    this.profile.push({ width: w, height: h, left: x, top: y })
}

// Take a photo
tackPhoto() {
    this.context.drawImage(this.$refs.refVideo, 0, 0, this.screenSize.width, this.screenSize.height)
    // Save as base64 format
    this.imgUrl = this.saveAsPNG(this.$refs.refCanvas)
    // this.compare(imgUrl)
    this.close()
},
// Base64 to file
getBlobBydataURI(dataURI, type) {
    var binary = window.atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {
        type: type
    });
},
// Save as a png,base64 image
saveAsPNG(c) {
    return c.toDataURL('image/png', 0.3)
}