Its been while, please i know greetings but i can’t help it. greetings to all. I have a little problem for my gurus to help out with i have webcam plugin that uses js usermedia API to take cam shot of users the plugin is fine very well. But i am having problems with its initialiazation. it get fired up on window load but i want fire it from an onclick event. I have tried my best which is obviously no good enongh. I use the onclick event handler it didnt work i also use ajax to load to my page from a different page it will not work that is because the window did not load. So below are my codes.
This first file is the file to be loaded by ajax
[code]
PLEASE UPLOAD PROFILE PICs
<?php echo $user_data["username"];?>
<input type="button" class="red" id="pseudobutton" value="Select An Image">
<input type="file" class="file" >
<!-- Configure a few settings and attach camera -->
<div id="my_photo_booth">
<div id="my_camera"></div>
<script language="JavaScript">
Webcam.set({
// live preview size
width: 320,
height: 240,
// device capture size
dest_width: 640,
dest_height: 480,
// final cropped size
crop_width: 380,
crop_height: 300,
// format and quality
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<div id="pre_take_buttons">
<!-- This button is shown before the user takes a snapshot -->
<input type=button value="Take Snapshot" onClick="preview_snapshot()">
</div>
<div id="post_take_buttons" style="display:none">
<!-- These buttons are shown after a snapshot is taken -->
<input type=button value="< Take Another" onClick="cancel_preview()">
<input type=button value="Save Photo >" onClick="save_photo()" style="font-weight:bold;">
</div>
</form>
</div>
<div id="results" style="display:none">
<!-- Your captured image will appear here... -->
</div>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
// preload shutter audio clip
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
function preview_snapshot() {
// play sound effect
shutter.currentTime = 0;
shutter.play();
// freeze camera so user can preview current frame
Webcam.freeze();
// swap button sets
document.getElementById('pre_take_buttons').style.display = 'none';
document.getElementById('post_take_buttons').style.display = '';
}
function cancel_preview() {
// cancel preview freeze and return to live camera view
Webcam.unfreeze();
// swap buttons back to first set
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
}
function save_photo() {
// actually snap photo (from preview freeze) and display it
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h4>YOUR HAS BEEN CAPTURED CORRECTLY:</h4>' +
'<img id="fina" src="'+data_uri+'"/><br/></br>';
// shut down camera, stop capturing
Webcam.reset();
// show results, hide photo booth
document.getElementById('results').style.display = '';
document.getElementById('my_photo_booth').style.display = 'none';
} );
}
</script>
</div>
</div></div>
<div class="cf pfooter">
<a href="#" class="btn">Close</a>
</div>
</div>
<div class="overlay"></div>[/code]
next is the page where i want it to work
<a href="#img" onclick="web();"><img src="images/p.png"><br><span id="tools" data-tips="CLICK TO CHANGE YOUR PROFILE IMAGE"></span></a>
the javascript that runs the ajax request
function web() {
var capture = document.getElementById("img"),
ajax = new XMLHttpRequest();
if(window.ajax){
ajax = new XMLHttpRequest();
}
else{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
};
ajax.open ("POST","includes/camera.php",true);
ajax.onreadystatechange= function(){
if(ajax.status === 200 && ajax.readyState ===4){
capture.innerHTML =ajax.responseText;
}
}
ajax.send();
};
And finally the webcam.js plugin which i attach to this message
Am sorry for wasting your reading time with that long code. Actually i think the main bone is the last line Webcam.init();
and this other code
[code]init: function() {
// initialize, check for getUserMedia support
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
this.userMedia = this.userMedia && !!navigator.getUserMedia && !!window.URL;
// Older versions of firefox (< 21) apparently claim support but user media does not actually work
if (navigator.userAgent.match(/Firefox\D+(\d+)/)) {
if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null;
}
},
[/code]
Please help me out fire from an event click the request for it to share user camera will happen after the user click on the link that says CLICK TO CHANGE YOUR PROFILE IMAGE
webcam.zip (6.31 KB)