获取摄像头权限，并且在video元素上呈现出来

判断摄像头兼容问题

<video id="video"></video>

// 定义方法访问用户媒体设备的兼容方法

    function getUserMedia(constraints, success, error) {

      if (navigator.mediaDevices.getUserMedia) {

        console.log("最新的标准API");

        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

      } else if (navigator.webkitGetUserMedia) {

        console.log("webkit核心浏览器");

        navigator.webkitGetUserMedia(constraints, success, error)

      } else if (navigator.mozGetUserMedia) {

        console.log("firfox浏览器");

        navigator.mozGetUserMedia(constraints, success, error);

      } else if (navigator.getUserMedia) {

        console.log("旧版API");

        navigator.getUserMedia(constraints, success, error);

      }

    }

获取videoDOM元素，并且让video承接画面(注意：每次调用都需要重新获取权限)

// 获取元素节点

let video = document.getElementById("video");

let mode = "user"  // 设置使用environment后置摄像头,user为前置摄像头

// 封装开启摄像头方法

function getCamera() {

// 判断用户的兼容，并作出对应的处理

      if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {

        //调用用户媒体设备, 访问摄像头

        getUserMedia({

        // 获取摄像头

          video: {

            width: 400,  // 默认单位px

            height: 300,

            facingMode:  mode, 

          },

        // 获取麦克风

          audio: true

        }, success, error);       

      } else {

        console.log("不支持访问用户媒体");

      }

    }

    // 调用成功的回调

    function success(stream) {     

      //兼容webkit核心浏览器

      let CompatibleURL = window.URL || window.webkitURL;

      //将视频流设置为video元素的源

      mediaStreamTrack = stream.getTracks()[0];     

      video.srcObject = stream;

      video.play();

    }

    // 调用失败的回调

    function error(error) {

      console.log("error", error);

      console.log("访问用户媒体设备失败,请尝试更换浏览器");

    }

切换前后摄像头

function changeMode() {

      mode = mode == "user" ? "environment" : "user";

      mediaStreamTrack.stop();

      getCamera();

}

对当前video元素截图(拍照功能)需要配合canvas标签使用

<button id="getPhoto">拍照</button>

<canvas id="canvas" width="400" height="300"></canvas>

let canvas = document.getElementById('canvas');

let context = canvas.getContext('2d');

// 对按钮添加点击事件(通过DOM0级绑定方便之后事件的解绑-对事件置空即可)

document.getElementById('capture').onclick = function () {

      context.drawImage(video, 0, 0, 400, 300);

    }

点击下载照片

<button id="download">下载</button>

    document.getElementById('download').onclick = () => {

      let photoElement = document.createElement('a');

      photoElement.href = canvas.toDataURL('image/png');

      photoElement.download = '照片名称';

      document.body.append(photoElement);

      photoElement.click();

      document.body.removeChild(photoElement)

    };