Android设备上的HTML5 Access Camera失败

时间:2015-07-11 01:14:55

标签: android html5 html5-canvas html5-video

我正在尝试将相机输入打印到HTML5中的Canvas元素。在桌面上它工作正常,但使用cordova为Android设备构建它,我无法访问相机,我真的不知道我做错了什么。我也尝试过Crosswalk,在那里我没有错误,但是相机也没有显示。但我想用Cordova做,因为我必须使用一些Cordova插件。

这是我的代码:

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

   navigator.getUserMedia(options, onSuccess, onFail);

var options = {
     audio: false,
     video: {
      mandatory: {
       maxWidth: window.innerWidth,
       maxHeight: window.innerHeight
      },
      optional: [{ facingMode: "user" }]
 }
}

var onFail = function(e) {
  alert('Failed to get camera');
};

var onSuccess = function(stream) {
    var video = document.getElementById('my-webcam');
    if(navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
        console.log("videoWidth" + video.width);
    } else {
        var url = window.URL || window.webkitURL;
        video.src = url.createObjectURL(stream);
    }

    // Wait 1000 ms before starting the loop otherwise the videosize aren´t set, so the Canvas can´t get values from the video
    setTimeout(function(){
        setInterval(updateCanvas,30); //manipulating the canvas here
        // Make sure the canvas is the same size as the video
        var video = document.getElementById('my-webcam'); //invisible
        var canvas = document.getElementById('my-canvas'); //where the camera input should be shown
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight; //- $('#mainPage_ButtonPhoto').height();
    },1000);
};

但是,如果我构建这个,我总是得到onfail警告“无法获取相机”。

我发现它是一个“errorPermissionDeniedError”。我用xdk构建它。但是使用这个android.json,或用于构建android的应用程序清单,它仍然无法正常工作。

{
"prepare_queue": {
    "installed": [],
    "uninstalled": []
},
"config_munge": {
    "files": {}
},
"installed_plugins": {},
"dependent_plugins": {},
"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()",
      access: "readwrite"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()",
      access: "readwrite"
  }
}
}

0 个答案:

没有答案