js调取摄像头画面

html内容

        <div class="video_area">
            <button id="take">拍照</button>
            <br />
            <video id="v" style="width: 640px;height: 480px;"></video>
            <canvas id="canvas" style="display:none;"></canvas>
            <br />
            <img src="" id="photo" alt="photo">
        </div>

js内容

<script>
    !(function () {
        // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先,如果有getUserMedia的话,就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个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);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let videoPlaying = false;
        let v = document.getElementById('v');
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in v) {
            v.srcObject = stream;
        } else {
            // 防止再新的浏览器里使用它,应为它已经不再支持了
            v.src = window.URL.createObjectURL(stream);
        }
        v.onloadedmetadata = function (e) {
            v.play();
            videoPlaying = true;
        };
    }).catch(err => {
            console.error(err.name + ": " + err.message);
    })
        document.getElementById('take').addEventListener('click', function () {
            if (videoPlaying) {
                let canvas = document.getElementById('canvas');
                canvas.width = v.videoWidth;
                canvas.height = v.videoHeight;
                canvas.getContext('2d').drawImage(v, 0, 0);
                let data = canvas.toDataURL('image/png');
                console.log(data);
                document.getElementById('photo').setAttribute('src', data);
            }
        }, false);
    })();
</script>
### 如何在 Uniaap H5 应用中调用摄像头 API 及权限设置 #### 权限配置 对于在 Uniaap 平台中的 H5 页面要成功调用摄像头功能,在 APP 的 WebView 中使用此功能时,需确保 APP 端已在代码层面上授予了必要的权限(相机、相册、录音),缺少任何一个都可能导致页面加载失败或输入控件无响应的情况[^2]。 #### HTML5 调用方式 通过 `navigator.mediaDevices.getUserMedia` 方法可以请求访问用户的媒体设备,如摄像头。这是最新的标准 API 接口用于获取多媒体流数据[^3]: ```javascript // 定义约束条件对象,指定所需媒体类型及其参数 const constraints = { video: true, }; // 尝试获取用户授权并打开视频流 async function startVideo() { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); handleSuccess(stream); } catch (err) { console.error('Error accessing media devices.', err); } } function handleSuccess(stream) { const videoElement = document.getElementById('video'); videoElement.srcObject = stream; } ``` 上述 JavaScript 代码片段展示了如何利用现代浏览器支持的标准接口去尝试获得来自用户的许可以开启其摄像装置,并将捕获到的画面显示在一个 `<video>` 元素上。 #### Android 原生集成注意事项 当涉及到更深层次的操作比如直接控制Android系统的Camera组件,则需要借助于创建 Intent 启动系统自带或其他第三方提供的 Camera 应用来完成拍照动作;之后再接收由这些应用程序返回的数据以便进一步处理[^1]。不过这种方式通常适用于混合开发模式下的 Native 组件交互而非纯前端实现方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值