【H5】 实现调用相机拍照功能

【H5】 实现调用相机拍照功能:

效果图如下:

【H5】 实现调用相机拍照功能_第1张图片

实现代码如下:


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>摄像头调用title>
  <style>
    * {margin: 0px;padding: 0px;}
    body {background: #4C5666;}
    #video {
      width: 610px;
      height: 510px;
      background-color: #fff;
      margin: 100px auto 0;
      border-radius: 10px;
    }
    .video_top {
      width: 100%;
      height: 50px;
      /* background-color: #0ff; */
      line-height: 50px;
    }
    .video_top a {
      float: left;
      text-decoration: none;
      color: #000;
      margin-left: 20px;
    }
    .video_top p {
      float: left;
      margin-left: 200px;
    }
    .video_con {
      height: 410px;
      background: #787878;
    }
    .video_bot {
      height: 50px;
      line-height: 50px;
      margin-left: 20px;
    }
    .video_bot a {
      color: #000;
      text-decoration: none;
    }
    #canvas {
      display: block;
      margin: auto;
    }
  style>
head>

<body>
  <div id="video">
    <div class="video_top">
      <a href="javascript:;" onclick="getPhoto()">拍照a>
      <p>相机p>
    div>
    <div class="video_con">
      <video id="v" width="610" height="410" autoplay>video>
    div>
  div>
  <canvas id="canvas" width="610" height="400">canvas>
  <script>

    var can, ctx;

    ~(function () {
      // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先,如果有getUserMedia的话,就获得它
          var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

          // 一些浏览器根本没实现它 - 那么就返回一个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);
          });
        }
      }
      const constraints = {
        video: true,  //打开摄像头
        audio: false  //打开录音
      };
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      promise.then(stream => {
        let v = document.getElementById('v');
        // 旧的浏览器可能没有srcObject
        if ("srcObject" in v) {
          v.srcObject = stream;
        } else {
          // 防止再新的浏览器里使用它,应为它已经不再支持了
          v.src = window.URL.createObjectURL(stream);
        }
        v.onloadedmetadata = function (e) {
          v.play();
        };
      }).catch(err => {
        console.error(err.name + ": " + err.message);
      })

      can = document.getElementById("canvas")
      ctx = can.getContext('2d');

    })();
    function getPhoto() {  //截图
      ctx.drawImage(v, 0, 0, 610, 410);
    }
  script>
body>

html>

你可能感兴趣的:(HTML5,H5)