uniapp webview如何调用camera实现拍照功能

在uniapp的webview中，如何调用设备的camera实现拍照功能？目前尝试了H5的input[type=file]和getUserMedia API，但在部分安卓机型上无法正常调起摄像头。是否有更稳定的解决方案或插件推荐？需要兼容iOS和主流安卓机型。

2 回复

在uniapp的webview中无法直接调用摄像头。建议使用uniapp原生API：uni.chooseImage实现拍照功能，或通过webview与原生页面的通信机制，由原生页面处理拍照后回传数据。


在 UniApp 的 WebView 中直接调用摄像头实现拍照功能，需要通过 UniApp 的 API 与原生应用交互，因为 WebView 本身无法直接访问设备硬件。以下是实现步骤和示例代码：

实现思路

  1. WebView 中触发拍照请求：通过 JavaScript 向 UniApp 发送消息。
  2. UniApp 调用原生摄像头：使用 uni.chooseImage API 或自定义原生插件。
  3. 返回照片到 WebView：将拍摄的照片数据传递回 WebView 显示或处理。

示例代码

1. WebView 页面（H5 端）

在 WebView 加载的 H5 页面中，通过 uni.postMessage 发送请求：

<!DOCTYPE html>
<html>
<head>
    <title>WebView Call Camera</title>
</head>
<body>
    <button onclick="takePhoto()">拍照</button>
    <img id="photo" src="" style="display:none; width: 100%;"/>
    
    <script>
        function takePhoto() {
            // 向 UniApp 发送消息，触发拍照
            if (window.uni && uni.postMessage) {
                uni.postMessage({ data: { action: 'takePhoto' } });
            } else {
                alert('UniApp 环境未就绪');
            }
        }

        // 监听 UniApp 返回的照片数据
        document.addEventListener('UniAppJSBridgeReady', function() {
            window.uni.onNativeEventReceive = function(event) {
                const data = event.data;
                if (data.action === 'photoTaken' && data.url) {
                    document.getElementById('photo').src = data.url;
                    document.getElementById('photo').style.display = 'block';
                }
            };
        });
    </script>
</body>
</html>

2. UniApp 页面（原生容器）

在 UniApp 的 Vue 页面中，监听 WebView 的消息并调用摄像头：

<template>
    <view>
        <web-view :webview-styles="webviewStyles" src="/static/webview-camera.html" @message="onMessage"></web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            webviewStyles: {
                progress: { color: '#FF0000' }
            }
        };
    },
    methods: {
        onMessage(event) {
            const data = event.detail.data[0];
            if (data.action === 'takePhoto') {
                this.takePhoto();
            }
        },
        takePhoto() {
            // 调用 UniApp 拍照 API
            uni.chooseImage({
                count: 1,
                sourceType: ['camera'],
                success: (res) => {
                    const tempFilePath = res.tempFilePaths[0];
                    // 将照片传递回 WebView（需通过 evalJS 执行 WebView 中的 JavaScript）
                    const currentWebview = this.$scope.$getAppWebview();
                    const webview = currentWebview.children()[0];
                    webview.evalJS(`window.uni.onNativeEventReceive(${JSON.stringify({
                        action: 'photoTaken',
                        url: tempFilePath
                    })})`);
                },
                fail: (err) => {
                    console.error('拍照失败:', err);
                }
            });
        }
    }
};
</script>

注意事项

  • 权限配置：在 manifest.json 中确保添加摄像头权限（如 Android 的 android.permission.CAMERA）。
  • 平台差异：Android 和 iOS 对 WebView 和文件路径的处理可能不同，需测试调整。
  • 安全性：仅在可信环境中使用，避免恶意代码注入。

通过以上步骤，即可在 UniApp 的 WebView 中实现调用摄像头拍照功能。

回到顶部