最近在开始接触网上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++的功能我们下一章讲解