浏览器端的机器学习 ml5js (2)

009.jpg

之前是通过对一张 bear 图进行识别为例，来演示如何使用训练好的模型来在 ml5js 中进行图像识别的。但是这样交互效果并不好，我们希望通过捕获摄像头中的图像来进行实时识别图像中内容。

首先获取摄像图像
···
video = createCapture(VIDEO)
···

这里有个问题，问题是我们在 window 端创建提供机器学习模型来识别图像的服务，但是如果使用 live-server 创建 http 服务，在 mac 可以访问该服务，因为不过我们服务是 http 而非 https，所以在 mac 端获取摄像头，因为 mac 认为 http 是不安全，需要一个 https 来让 mac 访问 window 上服务来实现今天分享。
本来想放开 mac 的权限，但是尝试许多方法来给该 http 释放权限。试了试好像行不通，选择 live-server-https 来实现

let mobilenet
console.log('hello')
let video;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
function modelReady() {
    console.log('Model Ready');
    // mobilenet.predict(puffin,getResults)
    
}

function getResults(err,results){
    console.log(results)
    let label = results[0].className;
    fill(0)
    textSize(64)
    text(label,10,height - 100)
}

// function imageReady(){
//     image(puffin,0,0,width,height);
// }

function setup(){
    createCanvas(640,480);
    video = createCapture(VIDEO)
    video.hide()
    background(0)
    // puffin = createImg('images/bear.jpg',imageReady)
    // puffin.hide()

    mobilenet = ml5.imageClassifier('MobileNet', modelReady);
}

function draw(){
    image(video,0,0)
}

在 draw 中绘制标签，使用 image 绘制 video 到 canvas。

let mobilenet

let video;
let label;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
function modelReady() {
    console.log('Model Ready');
    mobilenet.predict(getResults)
    
}

function getResults(err,results){
    console.log(results)
    label = results[0].className;
    
    mobilenet.predict(getResults)
}

// function imageReady(){
//     image(puffin,0,0,width,height);
// }

function setup(){
    createCanvas(640,480);
    video = createCapture(VIDEO)
    video.hide()
    
    // puffin = createImg('images/bear.jpg',imageReady)
    // puffin.hide()

    mobilenet = ml5.imageClassifier('MobileNet',video, modelReady);
}

function draw(){
    background(0)
    image(video,0,0)
    fill(255)
    textSize(64)
    text(label,10,height - 100)
    
}

最终看一看识别一下我们键盘，

图片