通过cordova访问android/ios/win设备摄像头

Posted 2023-03-15

【中文标题】通过cordova访问android/ios/win设备摄像头

【英文标题】：Access android/ios/win device camera via cordova

【发布时间】：2015-01-16 15:48:37

【问题描述】：

我想使用 cordova 创建 android/ios/Windows 应用程序。 我在访问相机时遇到问题。我用过getUserMedia，但这样我就无法访问平板电脑的摄像头。访问它的另一种方法是什么？我只能使用后置摄像头。非常感谢！

getUserMedia代码：

 navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia;

 var cam_video_id = "camsource"

window.addEventListener('DOMContentLoaded', function() 
// Assign the <video> element to a variable
var video = document.getElementById(cam_video_id);
var options = 
    "audio": false,
    "video": true
;
// Replace the source of the video element with the stream from the camera
if (navigator.getUserMedia) 
    navigator.getUserMedia(options, function(stream) 
        video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
    , function(error) 
        console.log(error)
    );
    // Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
    // navigator.getUserMedia(video: true, successCallback, errorCallback);
 else 
    $("#qr-value").text('Sorry, native web camera streaming (getUserMedia) is not supported by this browser...')
    return;

, false);

【问题讨论】：

使用科尔多瓦 media-capture 或 camera 插件。

【参考方案1】：

您显然应该使用 Cordova 的 Camera plugin。该文档可在链接上找到，您可以通过传递设置使用后置摄像头

cameraDirection: Camera.Direction.BACK

打开相机时的选项（来自文档）

navigator.camera.getPicture(onSuccess, onFail, 
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI,
  cameraDirection: Camera.Direction.FRONT
);

function onSuccess(imageURI) 
  var image = document.getElementById('myImage');
  image.src = imageURI;


function onFail(message) 
  alert('Failed because: ' + message);

【讨论】：

谢谢。我需要使用后置摄像头，我不必捕获图像。我必须扫描二维码。我在网上找不到任何示例。

@user3832184：对不起，我对相机方向的不好，没有引起足够的重视。如果只需要获取二维码数据，可以使用Barcode scanner plugin。

【参考方案2】：

你可以试试ionic（基于cordova），它有二维码阅读功能