index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script
      type="text/javascript"
      src="https://cdn-1253641951.cosgz.myqcloud.com/plugin/vconsole/3.2.0/vconsole.min.js"
    ></script>
    <script>
      new VConsole()
    </script>
  </head>
  <body>
    <div
      style="width: 100%; position: fixed; left: 0; bottom: 0; top: 0; right: 0"
    >
      <button
        id="snap"
        style="
          z-index: 2;
          width: 50px;
          height: 50px;
          background: #fff;
          box-shadow: 0 0 5px #fff;
          border-radius: 50px;
          position: fixed;
          bottom: 20px;
          left: 50%;
          margin-left: -25px;
        "
      ></button>
      <video style="width: 100%; height: 100%"></video>
      <canvas id="mycanvas"></canvas>
      <img
        class="img-out-put"
        style="
          position: fixed;
          display: none;
          width: 10rem;
          top: 0;
          left: 0;
          z-index: 3;
        "
      />
    </div>
    <script>
      // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
      // 设置事件监听器
      $(function () {
        console.log('navigator.mediaDevices', navigator.mediaDevices)
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
          alert('1')
        }

        console.log('navigator.mediaDevices.getUserMedia', navigator.mediaDevices.getUserMedia)

        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            alert('2')
            // 首先，如果有getUserMedia的话，就获得它
            var getUserMedia =
              navigator.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)
            })
          }
        }

        var constraints = {
          audio: false,
          video: {
            facingMode: {
              exact: 'environment',
            },
          },
        }
        var windowStream = null
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function (stream) {
            windowStream = 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.error(err)
            // alert(err.name + ': ' + err.message)
          })

        // 点击拍照
        var snap = document.querySelector('#snap')
        if (snap !== null) {
          snap.onclick = function () {
            var canvas = document.querySelector('#mycanvas')
            var ctx = canvas.getContext('2d')
            var video = document.querySelector('video')
            canvas.width = video.videoWidth
            canvas.height = video.videoHeight
            canvas.getContext('2d').drawImage(video, 0, 0)
            var imageUrl = canvas.toDataURL('image/jpg')
            $('.img-out-put').attr('src', imageUrl)
            $('.img-out-put').show()
          }
        }
      })
    </script>
  </body>
</html>