JavaScript face++ 人体识别API 与 人体抠像功能（一）

最近在开始接触网上API调用 完成了一个关于face++人体识别API，并通过这个API实现人体抠像功能。

既然要实现人体抠像，我们顺便学习下，JavaScript调用摄像头的方法吧。

有个博客写的很好 大家可以去看这个 我摄像头主要是参考他写的博客。

我这里简单介绍下

首先在html添加标签

1.打开摄像头

有2个版本的方法，区别不是很大。我这里介绍新版本的，如果严谨点，是需要2个版本都要兼容的，但我这里是简单的demo所以简单地调用摄像头即可

新版本位于 navigator.mediaDevices 对象下

        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(function(stream) {
            console.log(stream);

            mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];

            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        }).catch(function(err) {
            console.log(err);
        })
    

第一个参数代表着标签是否打开 video是视频，audio是音频，true代表着申请打开。video和audio代表着标签位置

第二个参数是调用成功之后的回调函数

第三个参数是调用失败回调的函数

这是html代码

html>
lang="en">

    charset="UTF-8">
    

 


width="200" height="150" id = "testImg">
    
id="snap" >截取图像   
 id="save">保存图片    
id="close">关闭摄像头    
id = "cutPhoto" οnclick="cutPhoto()">换背景
enctype="multipart/form-data">   
 type="file" id="upload" οnchange="uploadImage()">    　

id="uploaded" style="margin: 0;padding: 0;" >
id = "background" >id ="img2" style="margin: 0;padding: 0;">
　

 

我们新建一个JavaScript文件保存代码，命名为index.js

window.onload = function () {

    function $(elem) {
        return document.querySelector(elem);
    }
    var canvas = $('canvas'),
        context = canvas.getContext('2d'),
        video = $('video'),
        snap = $('#snap'),
        close = $('#close'),
        upload = $('#upload'),
        uploaded = $('#uploaded'),
        mediaStreamTrack;
    navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
// 获取媒体方法（新方法）
// 使用新方法打开摄像头
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true,

        }).then(function(stream) {
            console.log(stream);
            mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        }).catch(function(err) {
            console.log(err);
        })
    }
// 使用旧方法打开摄像头
    else if (navigator.getMedia) {
        navigator.getMedia({
            video: true
        }, function(stream) {
            mediaStreamTrack = stream.getTracks()[0];

            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        }, function(err) {
            console.log(err);
        });
    }




// 截取图像
    snap.addEventListener('click', function() {
        alert("dd");
        context.drawImage(video, 0, 0, 200, 150);
    }, false);

// 关闭摄像头
    close.addEventListener('click', function() {
        mediaStreamTrack && mediaStreamTrack.stop();
    }, false);

};

这个index.js主要是完成视频截图和保存的功能

调用face++的功能我们下一章讲解