html实现一个相机拍照功能，并将照片保存到本地

实现一个网页相机思路

• 抓取当前设备列表，选择一个摄像机；
• 相机的视频流在video标签中显示，进行预览；
• 点击拍照按钮，抓取video宽高，将图像保存的canvas，并下载canvas图像；

常见的获取媒体及用法

// 获取媒体设备列表
navigator.mediaDevices.enumerateDevices()

// 获取媒体流，并终止媒体流
function func(){
    let constraints = { video: true, audio: true }
    const stream = await navigator.mediaDevices.getUserMedia(constraints)
    stream.getTracks().forEach(trick => trick.stop())
}

// 获取当前媒体设备的音频输入、音频输出、视频输入
const devices = await navigator.mediaDevices.enumerateDevices()
devices.forEach(function (device) {
    let obj = { id: device.deviceId, kind: device.kind, label: device.label }
    if (device.kind === 'audioinput') {
        const media = _this.localDevice.audioIn
        if (media.filter(e => e.id === device.deviceId).length === 0) media.push(obj)
    } if (device.kind === 'audiooutput') {
        const media = _this.localDevice.audioOut
        if (media.filter(e => e.id === device.deviceId).length === 0) media.push(obj)
    } else if (device.kind === 'videoinput') {
        const media = _this.localDevice.videoIn
        if (media.filter(e => e.id === device.deviceId).length === 0) media.push(obj)
    }
});

获取媒体实现一个简单的相机功能

<!-- 首先我们需要准备一个相机成像的区域，一个拍照相片的显示区域，一个拍照按钮 -->
<video id="video" width="480" height="320" controls></video>
<div style="margin: 30px;">
  <button id="capture" style="width: 100px;height: 30px;">拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>

<script>
//访问用户媒体设备的兼容方法
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
//最新的标准       navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
//webkit核心浏览器 navigator.webkitGetUserMedia(constraints,success, error)
//firfox浏览器    navigator.mozGetUserMedia(constraints, success, error);
//旧版API         navigator.getUserMedia(constraints, success, error);
//调用用户媒体设备, 访问摄像头
navigator.mediaDevices.getUserMedia({ video: { width: 480, height: 320 } }).then((stream) => {
  let CompatibleURL = window.URL || window.webkitURL;
  video.srcObject = stream;
  video.play();
}).catch((error) => {
  console.error(error)
})
document.getElementById('capture').addEventListener('click', function () {
  // 将相机当前图像抓取绘制到canvas
  context.drawImage(video, 0, 0, 480, 320);
  // canvas保存到本地
  const link = document.createElement("a");
  const imgData = canvas.toDataURL({ format: 'png', quality: 1, width: 480, height: 320 });
  link.download = "拍照.png";
  link.href = URL.createObjectURL(dataURLtoBlob(imgData));
  link.click();
  // 格式转换
  function dataURLtoBlob(dataurl) {
    const arr = dataurl.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
})
</script>