I am trying to use photobooth.js on a webpage. It works in JsFiddle, but not locally. What do?
Question
The link to the JSfiddle is here: http://jsfiddle.net/dyx9jsxa/
I am just trying to run the same thing locally as this example shows, but it seems that photobooth.js is never loading. What am I doing wrong? Any help would be greatly appreciated.
Here is the code in our HTML file locally:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript' src="http://wolframhempel.github.io/photobooth-js/photobooth_min.js"></script>
<style type='text/css'>
#photo {
height: 300px;
width: 380px;
}
#gallery {
margin: 5px 0;
background: #f6f6f6;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
var file = null;
$('#photo').photobooth().on("image", function (event, dataUrl) {
file = dataURLtoBlob(dataUrl);
var size = file.size;
alert("Picture size: " + size);
uploadImage(file);
$("#gallery").append('<img src="' + dataUrl + '" >');
});
});
// (Commented out due to not having this file)
// $(function() {
// var coords = $('.photobooth.T').faceDetection();
// console.log(coords);
// });
function dataURLtoBlob(dataUrl) {
// Decode the dataURL
var binary = atob(dataUrl.split(',')[1]);
// Create 8-bit unsigned array
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
// Return our Blob object
return new Blob([new Uint8Array(array)], {
type: 'image/png'
});
}
function uploadImage(file) {
var fd = new FormData();
// Append our Canvas image file to the form data
fd.append("files", file);
fd.append("album", $("#album").val());
fd.append("albumkey", $("#albumkey").val());
// And send it
$.ajax({
url: "https://lambda-face-recognition.p.mashape.com/recognize",
type: "POST",
data: fd,
processData: false,
contentType: false,
beforeSend: function (xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", $("#mashapeKey").val());
}
}).done(function (result) {
alert("Received response..");
var resultObject = JSON.stringify(result);
alert(resultObject);
});
}
});//]]>
</script>
</head>
<body>
<div id="photo"></div>
<h3>Sample Code for Face Recognition in Javascript (Mashape)</h3>
<h4>Tutorial link <a target="_blank" href="http://blog.mashape.com/post/45712257463/face-recognition-using-javascript-and-mashape">here</a>. Look at the top, the app is requesting access to your webcam.</h4>
1. Mashape key:
<br/>
<input type="text" id="mashapeKey" value="wEaHZBmxkZsQAcXjyPd8koe1vWzqgkjC" />
<br/>2. album:
<br/>
<input type="text" id="album" value="apitraveler" />
<br/>3.albumkey:
<br/>
<input type="text" id="albumkey" value="c2de7705a8dfd6056fe0cfb9e486e55ca62bde9ba41fd5990f0d0d8b87aa193f" />
<div id="gallery"></div>
</body>
</html>
2 answers
solution1
0 2015-07-15 22:13:39
the problem is with
src='//code.jquery.com/jquery-1.9.1.js'
add http: before // and you will be sweet
The reason using the so called "recommended" method doesn't work for locall files is that excluding the protocol in a src/href results in the protocol used to load the containing page to be used for the src/href
Therefore //code.jquery.com/jquery-1.9.1.js on a page such as file:///stuff.html will be attempted to be fetched using the URL file://code.jquery.com/jquery-1.9.1.js - at least that's what chrome attempts to do - I can't see what Firefox is attempting to do, if anything, except to say it isn't even attempting to load jquery-1.9.1.js from anywhere at all
solution2
0 2016-03-30 16:23:41
If you are working with photobooth.js Must include the following files in the following order
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryIntegration.js"></script>
<script type="text/javascript" src="js/Photobooth.js"></script>
<script type="text/javascript" src="js/Tools.js"></script>
<script type="text/javascript" src="js/Drag.js"></script>
<script type="text/javascript" src="js/Slider.js"></script>
<script type="text/javascript" src="js/ResizeHandle.js"></script>
And then define
<script type='text/javascript'>
$( '#example' ).photobooth().on( "image", function( event, dataUrl ){
$( "#gallery" ).show().html( '<img src="' + dataUrl + '" >');
});
/**
* Tab boxes
*/
$( '.tab_container' ).each(function( i, elem ){
$( elem ).find( ".tabs li" ).click(function(){
$( elem ).find( ".tabs li.selected" ).removeClass( "selected" );
$( this ).addClass( "selected" );
$( elem ).find( ".tab_content" ).hide();
$( elem ).find( ".tab_content." + $(this).attr( "calls" ) ).show();
});
});
/**
* Link highlighting
*/
$( "a" ).click(function(){
$( "#nav a.selected" ).removeClass( "selected" );
$( "#nav a[href=" + $(this).attr( "href" ) + "]" ).addClass( "selected" );
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.