我正在使用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);
} );
}
我很难解决它。但没有运气。
答案 0 :(得分:0)
我认为我对使用移动设备时的摄像头偏好有解决方案。
不推荐使用navigator.getUserMedia
函数,而应使用较新的MediaDevices.getUserMedia
函数。文档的链接。
Threex.ArToolkitSource.js
文件中第143
行的更改为
var constraints = { video: {
facingMode: "environment"
mandatory: {
maxWidth: _this.parameters.sourceWidth,
maxHeight: _this.parameters.sourceHeight
}
};
如果有人想使用“自拍”相机,他们会将“环境”更改为“用户”。您甚至可以使按钮在两者之间进行选择。
但是,这可能会导致您可能更改很多代码