HTML怎么做小程序相机_html小程序相机拍照页面实现【经验分享】-html教程-PHP中文网

小程序中无法使用 html 的调用相机，必须使用原生 api：微信用 wx.choosemedia（推荐）、支付宝用 my.chooseimage，且需正确配置权限与参数。

html怎么做小程序相机_html小程序相机拍照页面实现【经验分享】

小程序里根本不能用 HTML 的 `<input type="file">` 调相机

直接说结论：在微信小程序、支付宝小程序等主流小程序环境里，<input type="file"> 标签完全无效，点不动、没反应、控制台也无报错。因为小程序运行在自研渲染层（不是 WebView），不支持原生 HTML 表单文件上传机制。你写的 HTML 页面如果直接丢进小程序的 web-view 组件里，也会被禁用摄像头权限——这是平台级限制，不是代码写错了。

必须用小程序原生 API：`wx.chooseMedia`（微信）或 `my.chooseImage`（支付宝）

微信小程序从基础库 2.25.0+ 开始推荐使用 wx.chooseMedia，它统一支持拍照、录像、相册选取，且能精确控制摄像头参数（如 sourceType: ['camera'] 强制调起相机）。支付宝小程序对应的是 my.chooseImage，传参 sourceType: 'camera' 即可。

微信示例（仅拍照）：

wx.chooseMedia({
  count: 1,
  mediaType: ['image'],
  sourceType: ['camera'],
  camera: 'front', // 可选 'front' | 'back'
  success(res) {
    const tempFile = res.tempFiles[0];
    console.log('照片临时路径：', tempFile.tempFilePath);
  }
});

支付宝注意：my.chooseImage 在 iOS 上若未声明 camera 权限，会静默失败；需在 app.json 中配置 "requiredPrivateInfos": ["camera"]，否则连授权弹窗都不出现。
别用 wx.chooseImage（旧 API）：它不支持指定前后置，且在 iOS 上可能默认走相册，用户感知是“没打开相机”。

web-view 里嵌 HTML 页面想调相机？几乎不可行

除非你用的是微信「小程序插件」或「开放标签」（如 <open-data></open-data>），否则 web-view 是沙箱环境，navigator.mediaDevices.getUserMedia 会被拒绝，错误信息通常是 NotAllowedError: The request is not allowed 或直接返回空流。即使你加了 camera 权限声明，微信也不认可 web-view 内部的权限申请链路。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

真要混合开发：把拍照逻辑全交给小程序原生层，HTML 页面只负责展示和触发 postMessage，由小程序调 chooseMedia 后把 base64 或临时路径发回 HTML。
不要尝试 iframe + getUserMedia：在小程序的 web-view 里，iframe 同样受制于同源策略和权限模型，基本必挂。
H5 页面独立访问（非嵌入小程序）可以正常调用相机，但这就脱离了“小程序内”的前提。

拍照后处理常见坑：临时路径生命周期极短

小程序所有 API 返回的 tempFilePath 都是临时路径，只在本次小程序会话中有效，退出再进来就 404。它也不能直接用于 <image src=""></image> 绑定（某些基础库版本会闪一下然后空白），更不能直接上传到后端（部分服务器拒绝接收临时路径）。

必须先用 wx.uploadFile 或 my.uploadFile 上传，或用 wx.getFileSystemManager().readFile 读成 base64（注意大小限制，iOS 上超过 10MB 容易卡死）。
微信中 tempFilePath 在安卓上有时带 file:// 前缀，iOS 是纯路径，但 <image></image> 组件内部已兼容，不用手动截断——乱截反而导致显示失败。
别存 tempFilePath 到 storage：存了也没用，下次启动时路径已失效。

最麻烦的其实是权限兜底：用户第一次拒掉相机权限后，chooseMedia 不会再弹窗，得引导他去系统设置手动打开。这个跳转逻辑各平台 API 不一致，微信用 wx.openSetting，支付宝用 my.openSetting，而且要提前 try...catch 捕获拒绝态，不然容易卡在白屏。