H5实现调用摄像头_进行拍照、摄像、录音等功能

h5调用摄像头进行拍照，目前主要有2种方式，一种是常规的利用form表单的type="file"，另一种则是通过html5的getUserMedia api的方式。

方式一：getUserMedia API

HTML 5 的getUserMedia API提供了访问媒体的能力, 用于捕获音频和视频。基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备。

语法：

getUserMedia(constraints).then(successCallback).catch(errorCallback)

getUserMedia() 的第一个参数用于指定您要访问的媒体类型。

由于安全问题，浏览器在调用 getUserMedia() 时可能会弹出信息栏，让用户选择授予还是拒绝对其相机/麦克风的访问权限。

拍照/摄影：

拍摄视频到video中显示，点击拍照获取当前帧视频截取为图片。

<div class="button" onclick="getMedia()">开启摄像头</div>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<script>
function getMedia() {
	let constraints = {
	      video: {width: 500,height: 500},
	      audio: true
	};
	let video = document.getElementById("video");
	let promise = navigator.mediaDevices.getUserMedia(constraints);
	promise.then(function (MediaStream) {
		video.srcObject = MediaStream;
		video.play();
	});
}
function takePhoto() {
	let video = document.getElementById("video");
	let canvas = document.getElementById("canvas");
	let ctx = canvas.getContext('2d');
	ctx.drawImage(video, 0, 0, 500, 500);
}
</script>

录音：

<div class="button" onclick="getMedia()">录音</div>
<script>
function getMedia() {
	navigator.mediaDevices.getUserMedia({
	    audio: true
	}).then( (MediaStream)=> {
		let audioContext=new AudioContext
		let audioNode=audioContext.createMediaStreamSource(MediaStream)
		audioNode.connect(audioContext.destination)
	});
}
</script>

浏览器兼容

需要注意的是：在旧的浏览器中是不支持Promise这种方式的，它只支持回调函数的形式，语法如下：

getUserMedia(constraints, successCallback, errorCallback);

如果要保证兼容性，可以使用如下方式（推荐使用polyfill ）：

// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    // 首先，如果有getUserMedia的话，就获得它
    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }
    // 否则，为老的navigator.getUserMedia方法包裹一个Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) {
  var video = document.querySelector('video');
  // 旧的浏览器可能没有srcObject
  if ("srcObject" in video) {
    video.srcObject = stream;
  } else {
    // 防止在新的浏览器里使用它，应为它已经不再支持了
    video.src = window.URL.createObjectURL(stream);
  }
  video.onloadedmetadata = function(e) {
    video.play();
  };
}).catch(function(err) {
  console.log(err.name + ": " + err.message);
});

方式二：input表单

<input> type 类型为 file 的标签，可以选择一个或多个文件，通过表单上传到服务器。当accept为image时候，代表选择了图片文件，如果设备有拍照功能，它会提供：相册和拍照的选择，利用它就能实现拍照功能。

<input type="file" accept="image/*" capture="camera">

说明：

capture="camera"是为了兼容部分安卓机型。这里使用accept="image/*"而不使用accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"是因为经测试华为部分机型在不使用”image/*”的时候无法调起摄像头，而是打开了文件管理器。

需要支持多选的时候还需要设置属性为：multiple="multiple"

拍照：

<img style="width:500px;height:500px;" id="img">
<input type="file" id='imgIpt' style="display:none" accept="image/*" capture='camera' onchange="change()">
<p><button onclick="imgIpt.click();">点击拍照</button></p>
<script>
    function change(){  
       let file= document.getElementById("imgIpt").files[0]; 
       let reads = new FileReader();
       reads.readAsDataURL(file);
       reads.onload = (e)=> {
             document.getElementById('img').src = this.result;
       };
    } 
</script>

摄像：

<video id="video" controls width="500" height="5000">
    <source type="video/mp4" />
    <source type="video/webm" />
    <source type="video/ogg" />
</video>
<input type="file" id='videoIpt' accept="video/*" capture="camcorder" style="display:none" onchange="change()">
<button onclick="videoIpt.click()">点击摄像</button>
<script>
  function change(){
    let file = document.getElementById('videoIpt').files[0]; 
    let url = URL.createObjectURL(file); 
    let videos =document.getElementById("video")
    videos.src = url; 
  }
</script>

录音：

<audio id="audio" controls>
	<source type="audio/ogg">
	<source type="audio/mpeg">
	<source type="audio/wav">
</audio>
<input type="file" accept="audio/*" id="audioIpt" capture="microphone" style="display:none" onchange="change()">
<p><button onclick="audioIpt.click();">点击录音</button></p>
<script>
function change(){
    let file = document.getElementById('audioIpt').files[0]; 
    let url = URL.createObjectURL(file); 
    let audio =document.getElementById("audio")
    audio.src = url; 
}
</script>

链接: https://www.fly63.com/article/detial/12519