CODEWITHSUNDEEP
javascriptandroidhtmlcordovacamera
user3210416
user3210416

Reputation: 804

How to enable front camera in Phonegap

Opening webcam on a website using HTML5 & Js with the following code.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="headBoxingStyle.css"/>
  </head>
  <body style="overflow: hidden">
    <div id="headtrack"></div>
    <canvas id='canvas' width='100' height='100'></canvas>
    <video width="100" height="100"></video>
  </body>
</html>

<script type="text/javascript">
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);
}

document.getElementById('snapshot').onclick = function() { 
  var canvas = document.getElementById('canvas'); 
  var ctx = canvas.getContext('2d'); 
  ctx.drawImage(video,0,0); 
} 
</script>

But how do you open device front camera via Phonegap. No pictures or video recorder is going to be taken but just display the front camera view. At the moment Phonegap camera plugin is installed, permissions are added and tested the example code on Phonegap that works fine but the code above only shows a Play symbol like in the picture.

Here are the permissions 

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera"android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Image that shows on device with the above code

Phonegap version 3.1.0 API

Upvotes: 4

Views: 6558

Answers (4)

Moinkhan
Moinkhan

Reputation: 61

@RoopeHakulinen : I have used getusermedia in Cordova android apps without using Crosswalk too. I had too add the following in my config.xml though, in order for camera permissions to work. 

 xmlns:android="http://schemas.android.com/apk/res/android" in the widget tag.

and then 

<config-file mode="merge" parent="/*" target="app/src/main/AndroidManifest.xml">
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-feature android:name="android.hardware.camera" />
        <uses-feature android:name="android.hardware.camera.autofocus" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />           
</config-file>

I also used permissions plugin, to authorize camera permission in the begining (on launch) itself instead of asking for permission later.

<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />

Upvotes: 0

Sachin G S
Sachin G S

Reputation: 1318

  • List item

Set this for ANDROID : 

(in app/res/xml/config.xml)
<feature name="Camera">
    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>


(in app/AndroidManifest)
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, cameraDirection:1, destinationType:        destinationType.DATA_URL}); }

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

  • Camera direction :

    Camera.Direction = { BACK : 0, // Use the back-facing camera FRONT : 1 // Use the front-facing camera };

Upvotes: -1

Roope Hakulinen
Roope Hakulinen

Reputation: 7405

On Cordova (formerly PhoneGap), you can't get the image via navigator.getUserMedia (as far as I know and neither was I able to find it from the Camera plugins source JavaScript). Instead you need to use the Camera plugins API. With that you use camera to retrieve a image as follows (from the documentation of the plugin)

navigator.camera.getPicture(onSuccess, onFail, { 
  destinationType: Camera.DestinationType.FILE_URI
  cameraDirection: Camera.Direction.FRONT // or Camera.Direction.BACK for back camera
});

function onSuccess(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}

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

where parameter destinationType is used to determine whether the the success callback is called with Base64 encoded data or with URI of the image. As there is also stated in the options section, you can select the camera direction with cameraDirection option as shown in example.

However, you should notice that the Camera plugin tells in its Android quirks that

Any cameraDirection value results in a back-facing photo.

So unfortunately with this plugin, it isn't possible to programmatically set the camera to be the front one.

Upvotes: 3

Murtaza Khursheed Hussain
Murtaza Khursheed Hussain

Reputation: 15336

As per the Phonegap documentation, you can specify which camera to open or provide a button to switch between front and back camera hardware

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

here cameraOptions have many attributes, but what you need is Camera Direction

 {cameraDirection:1};

Where

Camera.Direction = {
    BACK : 0,      // Use the back-facing camera
    FRONT : 1      // Use the front-facing camera
};

Upvotes: 6

Related Questions