CODEWITHSUNDEEP
javascriptandroidioscameraandroid-camera-intent
Gerasimos Pap
Gerasimos Pap

Reputation: 459

Use/Access Android and iOS (Mobile) Camera

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.)

Upvotes: 1

Views: 3725

Answers (1)

Matthew Frederick Duro Brown
Matthew Frederick Duro Brown

Reputation: 106

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

Upvotes: 1

Related Questions