How to enable front camera in webview for android

Question

How do you enable the front camera on a Webview? I have enable the features in AndroidManifest.xml

 <uses-feature android:name="android.hardware.camera" android:required="true" />
 <uses-feature android:name="android.hardware.camera.front" android:required="true" />

The camera is not going to be used for taking photos or recording, just to switch on the front camera.

When I go to the website using the phone browser the phone camera works once allow the prompt message. How can this work with a webview?

In the html file has a Canvas and Video tag that displays webcam It doesn't record or take pictures it just shows you the camera view.

Here is the html code

 <canvas id="inCanvas"  width="500" height="500" style="display:none"></canvas>
 <video id="inputVideo" width="100" height="100" autoplay loop ></video>

It work with webcam but not with webview in android.

Naeem Shaikh · Answer 1 · 2015-01-25T20:36:06.787

4

I didnt quite understand, but i thing there could one of the following two, what you want.

1) access camera and just show the video on the screen(not capturing image):

html:

  <canvas id='canvas' width='100' height='100'></canvas>

js:

 var onFailSoHard = function(e)
    {
            console.log('failed',e);
    }

    window.URL = window.URL || window.webkitURL ;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    var video = document.querySelector('video');

    if(navigator.getUserMedia)
    {
        navigator.getUserMedia({video: true},function(stream) {
        video.src = window.URL.createObjectURL(stream);
        },onFailSoHard);
    }


        var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d');
setInterval(function(){ 
ctx.drawImage(video,0,0);
     }, 100);

        }

2) capture image from the camera:

here is the doc for that.

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
});

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

edited Jan 25 '15 at 20:36

answered Jan 19 '15 at 13:29

Naeem Shaikh

14,231
4
43
80

number 1 or 2. I just want to open camera no recording or photos – Nic Jan 25 '15 at 20:10
Number 1.. Just for opening camera and display it live on the screen.. No recording – Naeem Shaikh Jan 25 '15 at 20:11
Nothing appears on the phone. Are you trying it on web browser? – Nic Jan 25 '15 at 20:13
Works on both.. Web and android.. Your phones web should be html5 compliant.. Version above gingerbread would suffice – Naeem Shaikh Jan 25 '15 at 20:17
Yes it is. I'm building an APK and running it. Doo you think it a device problem? – Nic Jan 25 '15 at 20:27
Hold on.. My code contains a button which when clicked starts drawing video.. Did you add that. Let me update my code a little.. Then try – Naeem Shaikh Jan 25 '15 at 20:28
Thank you, That could be it. – Nic Jan 25 '15 at 20:31
did you add a button? – Nic Jan 25 '15 at 20:38
Canvas would be much better.. Anyways.. I ll let u know if i could create an app for demo couple of days later.. – Naeem Shaikh Jan 25 '15 at 20:54
Thanks I will be looking for a solution as well – Nic Jan 25 '15 at 20:58
I think versions of Android will play a role in whether or not this approach will work. – Max Worg Jan 25 '15 at 21:21
I'm using the latest version of android L and tried Kk – Nic Jan 25 '15 at 22:16
Sorry @nic.. I will soon notify you.. :) – Naeem Shaikh Jan 31 '15 at 15:53

score 0 · Answer 2 · answered Jan 19 '15 at 12:23

I would use something similar to the below as a script to access the phone camera.

<script>
  var errorCallback = function(e) {
    console.log('Rejected!', e);
  };

  // Not showing vendor prefixes.
  navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
    };
  }, errorCallback);
</script>

Used the following tutorial to help me. Hope it sets yuo on the right track :)

How to enable front camera in webview for android

2 Answers2