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

最新推荐文章于 2024-08-08 07:13:44 发布

Shopee_Rex

最新推荐文章于 2024-08-08 07:13:44 发布

阅读量3.3k

点赞数

分类专栏：一些学习的研究新手入门文章标签： JavaScript face++

本文链接：https://blog.csdn.net/gdutRex/article/details/80294447

版权

一些学习的研究同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

新手入门

23 篇文章 0 订阅

订阅专栏

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

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

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

我这里简单介绍下

首先在html添加标签 <video><audio>这2个标签分别代表视频和音频

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代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<script type="text/javascript" src="script/index.js"></script>
 </head>


<body><canvas width="200" height="150" id = "testImg"></canvas><p>    
<button id="snap" >截取图像</button>   
 <button id="save">保存图片</button>    
<button id="close">关闭摄像头</button>    
<button id = "cutPhoto" οnclick="cutPhoto()">换背景</button>
<form enctype="multipart/form-data">   
 <input type="file" id="upload" οnchange="uploadImage()">    　
<video width="200" height="150"></video></form></p>
<canvas id="uploaded" style="margin: 0;padding: 0;" ></canvas>
<div id = "background" ><canvas id ="img2" style="margin: 0;padding: 0;"></canvas>
</div>　<video width="200" height="150">
</video>
</body>
</html>

我们新建一个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);

};