Menu
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" />
Phonegap version 3.1.0 API
650
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
};
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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
