JavaScript face++ 人体识别API 与人体抠像功能（一）-原创手记-慕课网

最近在开始接触网上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" onclick="cutPhoto()">换背景</button> <form enctype="multipart/form-data">     <input type="file" id="upload" onchange="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);  };

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

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

原文出处

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

1.打开摄像头

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