H5 实现自定义拍照页面方案

方案不一定是最好的，但是能够节省时间

一、结论

• PC 上可以实现
• 移动端不能实现

二、方案

2.1 input 标签

input 可以解决选择文件的问题。在PC和移动表现有区别

• PC 上直接选择文件
• 移动端可以选择拍照和相册，选项随手机系统及版本变化，不可自定义（如只保留部分选项）

在手机端拍照是直接调用系统相机拍照，也是不能自定页面的。

2.2 自定义拍照页面方案

核心原理：自定义拍照效果（如拍摄身份证、银行卡、人像）是通过 CSS 布局叠加 HTML 标签实现。

获取视频流：
通过 navigator.mediaDevices.getUserMedia 获取到视频流，然后使用 video 播放视频流。

实现拍照：通过 canvas 获取 video 视频流的某一帧然后生成指定格式图片 base64 字符串数据，然后使用 img 或者 canvas 显示实现普通拍照效果。

自定义拍照效果：使用 img 或者 canvas 来显示蒙版，通过 CSS 布局 覆盖到 video 上面来实现蒙版效果。

参考：Navigator.mediaDevices、