모바일 앱의 캔버스에 카메라

Question

모바일 앱을 만들고 있는데 live image of back camera on canvas이 표시됩니다. 나는 이미 너무 많은 것을 시도했다 cordova plugin 그러나 모든 그 시스템 앱에서 사진이나 비디오를 찍기 위해 열린다.

back or front camera에서 캔버스에서 실시간으로 볼 수있는 플러그인 또는 코딩 방법이 있습니까?

감사합니다.

Answer 1

HTML 코드

<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas> 

JS 코드

// Put event listeners into place 
window.addEventListener("DOMContentLoaded", function() { 
    // Grab elements, create settings, etc. 
    var canvas = document.getElementById("canvas"), 
    context = canvas.getContext("2d"), 
    video = document.getElementById("video"), 
    videoObj = { "video": true }, 
    errBack = function (error) { 
     console.log("Video capture error: ", error.code); 
    }; 
    // Put video listeners into place 
    if (navigator.getUserMedia) { // Standard 
     navigator.getUserMedia(videoObj, function (stream) { 
      video.src = stream; 
      video.play(); 
     }, errBack); 
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed 
     navigator.webkitGetUserMedia(videoObj, function (stream) { 
      video.src = window.webkitURL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 
    else if (navigator.mozGetUserMedia) { // Firefox-prefixed 
     navigator.mozGetUserMedia(videoObj, function (stream) { 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 
}, false); 
document.getElementById("snap") 
.addEventListener("click", function() { 
setInterval(function(){ 
    context.drawImage(video, 0, 0, 640, 480); 
},1); 

}); 

API를 getUserMedia를 지원하는 브라우저가 귀하의 휴대 전화에서 모든 카메라를 호출 할 수 있습니다 의미하지 않는다는 통지, 단지 앞을 호출 할 수있다 아마 카메라.