当前位置：首页 > HTML

h5调用原生实现相机

2026-01-13 23:33:34HTML

调用原生相机的方法

在H5页面中调用原生相机功能，通常需要通过JavaScript与原生应用（如iOS/Android）的WebView进行交互。以下是常见的实现方式：

使用<input type="file">触发相机

<input type="file" accept="image/*" capture="camera">

accept="image/*"限制文件类型为图片
capture="camera"指定直接调用摄像头而非相册（部分浏览器支持）

通过WebView桥接调用原生API

// 判断环境后调用原生方法
if (isIOS) {
  window.webkit.messageHandlers.openCamera.postMessage({});
} else if (isAndroid) {
  AndroidInterface.openCamera();
}

需原生端实现对应接口：

h5调用原生实现相机

iOS：通过WKUserContentController注册handler
Android：通过@JavascriptInterface注解暴露方法

兼容性处理方案

特征检测判断是否支持直接调用

const isCameraSupported = () => {
  return 'mediaDevices' in navigator && 
         !!navigator.mediaDevices.getUserMedia;
};

备用方案（相册上传）

<input type="file" accept="image/*" id="fallbackUpload">

权限请求最佳实践

动态请求摄像头权限

h5调用原生实现相机

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    // 成功获取视频流
  })
  .catch(err => {
    console.error('摄像头访问被拒绝:', err);
  });

移动端特殊配置要求

iOS 11+：需要https环境或localhost
Android：需在Manifest声明CAMERA权限

图片处理与回传

接收拍摄的图片

document.getElementById('cameraInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const imgUrl = URL.createObjectURL(file);
  // 显示预览图
  document.getElementById('preview').src = imgUrl;
});

压缩图片上传

function compressImage(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        // 按比例缩小尺寸
        const MAX_WIDTH = 800;
        const scale = MAX_WIDTH / img.width;
        canvas.width = MAX_WIDTH;
        canvas.height = img.height * scale;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(resolve, 'image/jpeg', 0.7);
      };
    };
    reader.readAsDataURL(file);
  });
}