You need to sign in to do that
Don't have an account?
Vadivel Murugan 9
Take Snap Shot Using getMediaUser for Javascript
Hi,
I am using javascript to take snapshot for through mobile camera. But when i have used dual camera mobile that time the rear camera is not working. it like display full block. the below code i have used.
<apex:page standardController="Service_Report__c" extensions="Photoupload1" showHeader="false" sidebar="false">
<html>
<head>
<apex:includeScript value="{!$Resource.Cordova}"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://github.com/apache/cordova-plugin-camera.git"></script>
<script type="text/javascript" src="https://rawgithub.com/jaysalvat/jquery.facedetection/master/js/jquery.facedetection.js"></script>
<script type="text/javascript" src="https://rawgithub.com/jaysalvat/jquery.facedetection/master/js/facedetection/ccv.js"></script>
<script type="text/javascript" src="https://rawgithub.com/jaysalvat/jquery.facedetection/master/js/facedetection/face.js"></script>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/js/jquery.js')}"></script>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/photobooth_min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/js/script.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/js/hijs.js')}"></script>
<link type="text/css" rel="stylesheet" media="screen" href="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/css/page.css')}" />
<style>
#wrapper {
width:1600px;
clear:both;
}
#first {
width:800px;
float:left;
}
#second {
width:800px;
float:left;
}
</style>
</head>
<div> <br/><br/>
<p style="font-size: 25px; font-weight: normal; margin-left: 40%;">System Photos Capture Page</p><br/>
</div>
<!-- <div id="wrapper" style="margin:0px">
<br/><br/><br/><br/>
<div id="example" ></div>
<div id="gallery" style="float:right;width:1%;margin-left: 250px;margin-right: -50px;margin-top: -300px;"></div>
<input type="button" value="Upload" id="submit" class="btn" style="margin-left: 40%;"/>
</div>-->
<!-- <style type="text/css">
.photobooth ul{
width: 50px ;
}
</style>-->
<div class="select" style="width:80%;display:none">
<label for="audioSource">Audio source: </label><select id="audioSource"></select>
</div><br/>
<div class="select" style="width:80%;">
<label for="videoSource">Camera source: </label><select id="videoSource"></select>
</div><br/>
<div id="wrapper">
<div id="first">
<video id="video" autoplay="autoplay" align="center" style="background-color: white;width:40%; height:40%;">
</video><br/><br/>
<button data-theme="d" id="screenshot" onclick="Capture()">Screen Shot</button>
<button data-theme="d" id="Upload" onclick="Upload()">Upload</button>
</div>
<div id="second">
<canvas id="tagCanvas" style="background-color: white;width:40%;height:40%;">
</canvas>
</div>
</div><br/><br/><br/>
<script>
var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function gotSources(sourceInfos) {
for (var i = 0; i !== sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
var option = document.createElement('option');
option.value = sourceInfo.id;
if (sourceInfo.kind === 'audio') {
option.text = sourceInfo.label || 'microphone ' +
(audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (sourceInfo.kind=== 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
}
if (typeof MediaStreamTrack === 'undefined' ||
typeof MediaStreamTrack.getSources === 'undefined') {
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome.');
} else {
MediaStreamTrack.getSources(gotSources);
}
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error) {
console.log('navigator.getUserMedia error: ', error);
}
function start() {
var audioSource = audioSelect.value;
var videoSource = videoSelect.value;
alert(videoSelect.value-1);
var constraints = {
audio: false,
video: {facingMode: "environment",
optional: [{
sourceId: videoSource
}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
audioSelect.onchange = start;
videoSelect.onchange = start;
start();
function Capture() {
var canvas = document.querySelector('#tagCanvas');
var ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
try {
var imageUrl = canvas.toDataURL();
} catch (e) {
alert("Error in getting canvas url");
}
}
function Upload(){
var canvas = document.querySelector('#tagCanvas');
var imageUrl = canvas.toDataURL();
saveImage(imageUrl);
}
</script>
<apex:form >
<apex:actionRegion >
<apex:actionFunction action="{!saveImage}" name="saveImage" rerender="dummy">
<apex:param name="imageBase" assignTo="{!imageBase}" value="" />
</apex:actionFunction>
<apex:outputPanel id="dummy"/>
</apex:actionRegion>
</apex:form>
</html>
</apex:page>
If any one kno how to use rear camera in snapshot for mobile. Kindly let me know
I am using javascript to take snapshot for through mobile camera. But when i have used dual camera mobile that time the rear camera is not working. it like display full block. the below code i have used.
<apex:page standardController="Service_Report__c" extensions="Photoupload1" showHeader="false" sidebar="false">
<html>
<head>
<apex:includeScript value="{!$Resource.Cordova}"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://github.com/apache/cordova-plugin-camera.git"></script>
<script type="text/javascript" src="https://rawgithub.com/jaysalvat/jquery.facedetection/master/js/jquery.facedetection.js"></script>
<script type="text/javascript" src="https://rawgithub.com/jaysalvat/jquery.facedetection/master/js/facedetection/ccv.js"></script>
<script type="text/javascript" src="https://rawgithub.com/jaysalvat/jquery.facedetection/master/js/facedetection/face.js"></script>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/js/jquery.js')}"></script>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/photobooth_min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/js/script.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/js/hijs.js')}"></script>
<link type="text/css" rel="stylesheet" media="screen" href="{!URLFOR($Resource.PhotoBooth, 'photobooth-js-gh-pages/website/css/page.css')}" />
<style>
#wrapper {
width:1600px;
clear:both;
}
#first {
width:800px;
float:left;
}
#second {
width:800px;
float:left;
}
</style>
</head>
<div> <br/><br/>
<p style="font-size: 25px; font-weight: normal; margin-left: 40%;">System Photos Capture Page</p><br/>
</div>
<!-- <div id="wrapper" style="margin:0px">
<br/><br/><br/><br/>
<div id="example" ></div>
<div id="gallery" style="float:right;width:1%;margin-left: 250px;margin-right: -50px;margin-top: -300px;"></div>
<input type="button" value="Upload" id="submit" class="btn" style="margin-left: 40%;"/>
</div>-->
<!-- <style type="text/css">
.photobooth ul{
width: 50px ;
}
</style>-->
<div class="select" style="width:80%;display:none">
<label for="audioSource">Audio source: </label><select id="audioSource"></select>
</div><br/>
<div class="select" style="width:80%;">
<label for="videoSource">Camera source: </label><select id="videoSource"></select>
</div><br/>
<div id="wrapper">
<div id="first">
<video id="video" autoplay="autoplay" align="center" style="background-color: white;width:40%; height:40%;">
</video><br/><br/>
<button data-theme="d" id="screenshot" onclick="Capture()">Screen Shot</button>
<button data-theme="d" id="Upload" onclick="Upload()">Upload</button>
</div>
<div id="second">
<canvas id="tagCanvas" style="background-color: white;width:40%;height:40%;">
</canvas>
</div>
</div><br/><br/><br/>
<script>
var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function gotSources(sourceInfos) {
for (var i = 0; i !== sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
var option = document.createElement('option');
option.value = sourceInfo.id;
if (sourceInfo.kind === 'audio') {
option.text = sourceInfo.label || 'microphone ' +
(audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (sourceInfo.kind=== 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
}
if (typeof MediaStreamTrack === 'undefined' ||
typeof MediaStreamTrack.getSources === 'undefined') {
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome.');
} else {
MediaStreamTrack.getSources(gotSources);
}
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error) {
console.log('navigator.getUserMedia error: ', error);
}
function start() {
var audioSource = audioSelect.value;
var videoSource = videoSelect.value;
alert(videoSelect.value-1);
var constraints = {
audio: false,
video: {facingMode: "environment",
optional: [{
sourceId: videoSource
}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
audioSelect.onchange = start;
videoSelect.onchange = start;
start();
function Capture() {
var canvas = document.querySelector('#tagCanvas');
var ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
try {
var imageUrl = canvas.toDataURL();
} catch (e) {
alert("Error in getting canvas url");
}
}
function Upload(){
var canvas = document.querySelector('#tagCanvas');
var imageUrl = canvas.toDataURL();
saveImage(imageUrl);
}
</script>
<apex:form >
<apex:actionRegion >
<apex:actionFunction action="{!saveImage}" name="saveImage" rerender="dummy">
<apex:param name="imageBase" assignTo="{!imageBase}" value="" />
</apex:actionFunction>
<apex:outputPanel id="dummy"/>
</apex:actionRegion>
</apex:form>
</html>
</apex:page>
If any one kno how to use rear camera in snapshot for mobile. Kindly let me know