使用/访问Android和iOS（移动）相机

Question

I make an HTML5-CSS-JS Android (and iOS) Application and i try to get access to the mobile device camera.

I tried two ways to get access to camera and both ways work fine when i use them from a Browser, but when i build my .APK file and i open my App none of them is working the same way as from a Browser:

First 1) I tried Input Tag and when i click to choose/browse it allows me only to select an Existing file NOT to capture or record a new one:

 <input type="file" accept="image/*" capture="camera"/> 

Then 2) I found (navigator.getUserMedia) this code on web that works also from a browser but when i open my App it seems like no working and not requesting for device hardware access at all:

 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("The following error occured: " + err.name); } ); } else { console.log("getUserMedia not supported"); } /*****************************************************************/ function init() { if(navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia({video:true}, onSuccess, onFail); } else { alert('webRTC not available'); } } function onSuccess(stream) { document.getElementById('camFeed').src = webkitURL.createObjectURL(stream); } function onFail() { alert('could not connect stream'); } function takePhoto() { var c = document.getElementById('photo'); var v = document.getElementById('camFeed'); c.getContext('2d').drawImage(v, 0, 0, 320, 240); } 

 <div style="width:352px; height:625px; margin:0 auto; background-color:#fff;" > <div> <video id="camFeed" width="320" height="240" autoplay> </video> </div> <div> <canvas id="photo" width="320" height="240"> </canvas> </div> <div style="margin:0 auto; width:82px;"> <input type="button" value="Take Photo" onclick="takePhoto();"> </div> </div> 

Anyone has an idea of how can I access camera on Android or iOS? I tried it with and without camera permissions but this was not the problem.

Help... Thank you in Advance. (If my question is not clear comment please.)

Answer 1

Here is the basic code, it will allow you to record/capture the file.

HTML:

<input id="reviewVideoCapture" type="file" accept="video/*"/>

JS (Using JQuery):

var videoFile = $('#reviewVideoCapture').get(0).files[0];

Use this if you want to upload the video somewhere:

<form enctype="multipart/form-data" action="/api/photo" method="POST" >
  <input id="reviewVideoCapture" type="file" accept="video/*"/>
  <input id="submitFormButton" type="submit">
</form>   

Even though this works, I would still not recommend doing it this way. The results on mobile are buggy and hard to work with. The better way is to use cordova/ionic. A good example on how to do this can be found here: https://github.com/yafraorg/ionictests