最近在开始接触网上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>            

   
     截取图像     保存图片     关闭摄像头     换背景 

我们新建一个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++的功能我们下一章讲解

原文出处