移动端 H5 实现自定义拍照界面

一、实现思路

手机端 H5 实现自定义拍照界面也可以使用 MediaDevices API 和标签来实现。

首先，使用 MediaDevices.getUserMedia() 方法获取摄像头媒体流，并将其传递给标签进行渲染。
接着，使用 HTML 的标签来截取当前摄像头的画面，通过上的 getContext('2d') 方法来绘制。
最后，使用 canvas.toDataURL() 方法将图像转换为 base64 格式，可以通过将其保存到本地或发送到服务器来存储照片。

但是需要注意的是，在手机端，调用摄像头需要在 HTTPS 或 localhost 下访问，还需要用户事先进行授权。

且在手机端可能会有些浏览器对于 getUserMedia 有所限制，需要额外兼容性处理。且手机端的实现需要考虑屏幕的方向，在绘制截图时需要根据不同的屏幕方向调整画布尺寸。在手机端，为了让用户能够在页面中手动切换摄像头，需要检测手机端设备是否有多个摄像头，在有多个摄像头时，提供给用户切换摄像头的选项。此外，需要进行一些兼容性处理，以便在不同浏览器和手机设备上正常工作。同时，需要考虑手机端的交互体验，例如提供给用户切换摄像头和调整照片尺寸的选项。对于一些高级功能，例如人脸检测和识别，美颜，以及其他高级图像处理功能可以使用第三方库，如 openCV.js，tracking.js，face-api.js 等来实现。

总之，通过使用 MediaDevices API 和标签在手机端实现自定义拍照界面是可行的，但是需要注意的点比桌面端多一些。虽然在手机端实现自定义拍照界面有一定的挑战，但是通过使用 MediaDevices API 和相关第三方库，还有经验丰富的开发人员在这个问题上是有解决方案的。

二、实现思路的框架示例代码

使用 MediaDevices.getUserMedia() 方法获取摄像头媒体流，并将其传递给标签进行渲染

// 调用摄像头
function invokingCamera() {
  // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

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

  // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
  // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
  if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先，如果有getUserMedia的话，就获得它
      const 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);
      });
    };
  }

  // 手机可视区域宽度（请通过相关API获取真实宽度）
  const windowWidth = 375;
  // 手机可视区域高度（请通过相关API获取真实高度）
  const windowHeight = 700;

  const constraints = {
    audio: false,
    video: {
      // 前置摄像头
      facingMode: "user",
      // 该属性相当于手机端的高
      width: Math.max(windowWidth, windowHeight) - 120, // 减去 120 用于在页面底部放置拍照等功能按钮
      // 该属性相当于手机端的宽
      height: Math.min(windowWidth, windowHeight),
    },
  };

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      const video = document.querySelector("camera");
      // 旧的浏览器可能没有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);
    });
}

使用 HTML 的标签来截取当前摄像头的画面，通过上的 getContext('2d') 方法来绘制

function takeSnapshot() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const video = document.querySelector("video");
  canvas.width = Math.min(video.videoWidth, video.videoHeight);
  canvas.height = Math.max(video.videoWidth, video.videoHeight);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // ****** 镜像处理 ******
  function getPixel(imageData, row, column) {
    const uint8ClampedArray = imageData.data;
    const width = imageData.width;
    const height = imageData.height;
    const pixel = [];
    for (let i = 0; i

最后，使用 canvas.toDataURL() 方法将图像转换为 base64 格式，可以通过将其保存到本地或发送到服务器来存储照片

三、完整实现代码（基于 uni-app，只适用于 H5 端，未做其它端的兼容）

注意，在手机上进行访问时，需要配置 HTTPS 协议访问，有两种方式：

1、将 H5 部署到 Web 服务器上，并配置 HTTPS 协议访问。
2、开发调试模式下，配置 HTTPS 访问。这种方式存在手机微信内置浏览器无效的情况，需要将访问地址复制到 Chrome 等浏览器上进行访问测试。

此外，还需要注意的是，有些 APP 的内置浏览器（Webview）不兼容 MediaDevices API，因此无法实现该功能。

布局代码：

JavaScript 代码：

export default {
  data() {
    return {
      // 背景透明的取景框图片
      qjkImgSrc: "/static/images/qjk.png",
      // 背景透明的头像框图片
      qjtxkImgSrc: "/static/images/qjtxk.png",
      imageUrl: "",
      // 媒体流，用于关闭摄像头
      mediaStreamTrack: null,
    };
  },
  onLoad() {
    this.invokingCamera();
  },
  onUnload() {
    this.handlePhotographCloseClick();
  },
  methods: {
    invokingCamera() {
      const self = this;
      // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

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

      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先，如果有getUserMedia的话，就获得它
          const 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);
          });
        };
      }

      uni.getSystemInfo({
        success: function (res) {
          const constraints = {
            audio: false,
            video: {
              // 前置摄像头
              facingMode: "user",
              // 手机端相当于高
              width: Math.max(res.windowWidth, res.windowHeight) - 120,
              // 手机端相当于宽
              height: Math.min(res.windowWidth, res.windowHeight),
            },
          };

          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function (stream) {
              self.mediaStreamTrack = stream;

              const 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);
            });
        },
      });
    },
    handlePhotographCloseClick() {
      if (this.mediaStreamTrack) {
        // 关闭摄像头
        this.mediaStreamTrack.getTracks().forEach(function (track) {
          track.stop();
        });
        this.mediaStreamTrack = null;
      }
    },
    handlePhotographClick() {
      const self = this;
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const video = document.querySelector("video");
      canvas.width = Math.min(video.videoWidth, video.videoHeight);
      canvas.height = Math.max(video.videoWidth, video.videoHeight);
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // ****** 镜像处理 ******
      function getPixel(imageData, row, column) {
        const uint8ClampedArray = imageData.data;
        const width = imageData.width;
        const height = imageData.height;
        const pixel = [];
        for (let i = 0; i  {
        const base64 = canvas.toDataURL("image/jpeg");
        self.imageUrl = base64;
        self.handlePhotographCloseClick();
      });
    },
    handleAddPhotographClick() {
      this.uploadImage();
    },
    uploadImage: function () {
      const self = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        success: function (res) {
          self.handlePhotographCloseClick();
          const file = res.tempFiles[0];

          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (e) {
            self.imageUrl = e.target.result;
          };
        },
      });
    },
  },
};

样式代码：

最终效果展示：