时间戳

首页 > 解决方案 > Webcam.js 后置摄像头未正确旋转

webcam - Webcam.js 后置摄像头未正确旋转

问题描述

我正在使用 Webcam.min.js 库来捕获图像。当我水平使用平板电脑时，它工作正常。但是当我垂直做平板电脑时，相机不会旋转。

我的代码是：

<script type="text/javascript" src="../assets/webcam.min.js"></script>

<h4>Take picture</h4>
<div style="float:left;">
    <div id="my_camera"></div>
    <input type="button" id="snap" value="Take Snapshot" ng-click="ctrl.take_snapshot()">
</div>
<div style="display: inline-block;margin-top: -35px;;margin-left: 30%;;" id="results">Your captured image will appear here...</div>

脚本代码：

Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90,
        flip_horiz: true,
        constraints: {
            video: true,
            facingMode: "environment"
        }
});
Webcam.attach( '#my_camera' );

this.take_snapshot= function take_snapshot() {
        // take snapshot and get image data
        Webcam.snap( function(data_uri) {
            // display results in page
            document.getElementById('results').innerHTML = 
                '<h5>Captured on : '+new Date()+'</h5>' + 
                '<img src="'+data_uri+'"/>';
                alert(data_uri);
        } );
}

我费了很多力气来修复它。但没有运气。

标签： webcamwebcam-capturewebcam.js

解决方案

我想我在使用手机时有一个解决相机偏好的方法。

该navigator.getUserMedia功能已弃用，您应该改用较新的MediaDevices.getUserMedia功能。文档的链接。

在你的Threex.ArToolkitSource.js文件中的 line143然后应该更改为

var constraints = { video: { 
                   facingMode: "environment"  
                   mandatory: {
                                        maxWidth: _this.parameters.sourceWidth,
                               maxHeight: _this.parameters.sourceHeight
                    }
};

如果有人想改用“自拍”相机，他们会将“环境”更改为“用户”。您甚至可以制作一个按钮在两者之间进行选择。

但是，这可能会导致您更改大量代码

推荐阅读