CODEWITHSUNDEEP
androidfacebookwebview
Carlos Alves Jorge
Carlos Alves Jorge

Reputation: 1995

How to use camera as a source from a file input inside Facebook Android Webview

We have a HTML5 page with a file input:

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

Now in Chrome, Safari, Firefox (both Android or iOS) and inside the webview of Facebook iOS this will allow selecting an image from the camera roll or the camera.

Yet when using this on an Android inside the Facebook Webview it will only give options like Images / Recent / Google Drive / Photos but no camera.

Is this a bug or a Facebook conscious option? Is there any way of using the phone camera as a source for the image inside the webview of Facebook Android?

Upvotes: 5

Views: 1414

Answers (2)

Carlos Alves Jorge
Carlos Alves Jorge

Reputation: 1995

In the end my solution for this issue was to create a video element with a localstream:

var videoCamera = document.createElement('video');
videoCamera.setAttribute("id", "video");
videoCamera.setAttribute("height", 320);
videoCamera.setAttribute("width", 480);
videoCamera.setAttribute("video", true);
videoCamera.autoPlay = true;
$('#video-container').prepend(videoCamera);


if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
     video.src = window.URL.createObjectURL(stream);
     video.play();
     localStream = stream;
  });
}

Then I'll have a button that will basically get the current frame and put it on a canvas:

 var canv = document.createElement('canvas');
 canv.width = $('#video').width();
 canv.height = $('#video').height();

 var ctx=canv.getContext("2d");

 ctx.drawImage(video, 0, 0,$('#video').width(), $('#video').height());
 ctx.restore();
 localStream.getVideoTracks()[0].stop();

Once you can get the snapshot on a canvas then you can just export it to Base64:

canv.toDataURL();

Upvotes: 2

Munir
Munir

Reputation: 2558

Not sure but Try to add capture="camera"

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

Upvotes: 0

Related Questions