I am using the code below to capture video and display it on the app.
<!DOCTYPE html>
<html>
<head>
<title>Capture Video</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureVideo() {
// Launch device video recording application,
// allowing user to capture only 1 video clips with 10mins duration
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
// Called when capture operation is finished
// to display the captured video
function captureSuccess(s) {
console.log("Success");
console.dir(s[0]);
var v = "<video controls='controls'>";
v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
}
// This function is to upload the captured video when the user
// clicks upload video button
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
var options = new FileUploadOptions();
options.mimeType = "documents";
options.fileName = name;
options.chunkedMode = true;
ft.upload(path,
"http://www.example.com/upload.php",
function(result) {
alert('Upload success: ' + result.responseCode);
alert(result.bytesSent + ' bytes sent');
},
function(error) {
alert('Error uploading file ' + path + ': ' + error.code);
},
options);
}
</script>
</head>
<body>
<button onclick="captureVideo();">Capture Video</button> <br><br>
<div id="videoArea"></div><br><br>
<button id="uploadvid" onclick="uploadFile();">Upload Video</button>
</body>
</html>
After displaying the captured video, when the "Upload Video" button is clicked nothing happens. The video is not uploaded to the server. Meanwhile, if I replaced the captureSuccess(s) function with the following code;
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
the captured video is uploaded to the server successfully though without preview.
Please could somebody tell me what I'm doing wrong. I want the user to have a look at the captured video first before clicking the "Upload Video" button. Thanks.
The problem with your code is that the onclick="uploadFile();"is not accepting any argument but your function uploadFile(mediaFile) is expecting an argument.
<button id="uploadvid" onclick="uploadFile();">Upload Video</button>
My suggestion for solution is ,create the button element as
<button id="uploadvid" >Upload Video</button>
Write your function captureSuccess as
function captureSuccess(s) {
console.log("Success");
console.dir(s[0]);
var v = "<video controls='controls'>";
v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
//here you write logic when upload button is clicked
$("#uploadvid").on("click",function(){
uploadFile(s[0]);
});
}
Related
I am trying to open a new popup page after getting a result from the linked server, the alert does show correct values also the newpopup.html page does open, but it is empty, I am trying to display the result values in this newpopup.html page and eventually open the options.html page from there.
the request of result gets sent after clicking on a button on the first popup
popup.js
var values;
$(function () {
$('#keywordsubmit').click(function () {
$('#loadingDiv').show();
var search_topic = "test";
if (search_topic) {
chrome.runtime.sendMessage(
{ topic: search_topic },
function (response) {
result = response.farewell;
if ("raw" in result) { /** will return true if exist */
console.log('Exist!');
window.open(result.summary, '_newtab');
}
var pricesresult = result
values = result;
console.log('Passed0!');
nameofproduct = result.ProductName
console.log(nameofproduct);
console.log('Passed1!');
alert(pricesresult.Price + " " + pricesresult.ShopName);
if("Image" in result){
chrome.storage.local.set({nameofproduct: result }, function () {
console.log('Value is set');
});
window.location.href = "newpopup.html";}
});
}
$('#keyword').val('');
});
});
var img = document.createElement("img");
img.src = values.Image;
var src = document.getElementById("header");
src.appendChild(img);
var output = document.getElementById('output');
output.innerHTML = values.Price;
newpopup.html
<!DOCTYPE html>
<html>
<head>
<title>Price Comparator</title>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<h1>Price results</h1>
<div id="output"></div>
<div id="header"></div>
<div id="slideContainer"></div>
</body>
<script src="popup.js">
</script>
</html>
I am running qunit Test using html file in one file and that html file i am running from phantom js.
When I am running html file through browser i am getting output in console but when i am trying to run using phantom js i am not getting the console output in another js file from where i am calling html file.
I am providing both Files:
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JUnit reporter for QUnit</title>
<link rel="stylesheet" href="qunit.css">
<script src="qunit.js"></script>
<script>
QUnit.config.reorder = false;
</script>
<script src="qunit-reporter-junit.js"></script>
<script src=" http://requirejs.org/docs/release/2.2.0/minified/require.js"></script>
<script>
QUnit.jUnitDone(function(data) {
var console = window.console;
if (console) {
console.log(data.xml);
}
});
</script>
<script src="qunit-reporter-junit.test.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
Js file :
var system = require('system');
var fs = require('fs');
var page = require('webpage').create();
if (system.args.length === 1) {
console.log('Pass the path/to/testfile.js as argument to run the test.');
phantom.exit();
} else {
var url = "file:///C:/Users/Admin/Desktop/js/index.html"; // e.g. 'test/unit/tests.html'
console.log("Opening " + url);
}
page.open(url, function (status) {
console.log("Status: " + status);
if (status === "success") {
setTimeout(function () {
var path = 'results.xml';
var output = page.evaluate(function () {
// wants to take console output from html page
.....................................?
});
fs.write(path, output, 'w');
console.log("Wrote JUnit style output of QUnit tests into " + path);
console.log("Tests finished. Exiting.");
phantom.exit();
}, 3000);
} else {
console.log("Failure opening" + url + ". Exiting.");
phantom.exit();
}
});
can anyone suggest me how to take the console output from html file ?
Thanks In Advance.
If your test is similar to this example then to get test results you should request the contents of #qunit-testresult element.
var output = page.evaluate(function(){
return document.getElementById("qunit-testresult").innerText
});
I am trying to create an API using a local server for testing. The ROUTES are working and I can add data to the OBJ using the URL from the browser. The issue is when I try to 'POST' the data through the HTML. I am getting back a 404 error. I developing using node.js and Express. What am I doing wrong?
JS on the server side
app.get('/add/:word/:score?', addWord);
//Function to request and send back the data
function addWord(request, response) {
var data = request.params;
var word = data.word;
var score = Number(data.score);
var reply;
if (!score) {
var reply = {
msg: 'Score is required'
}
response.send(reply);
} else {
words[word] = score;
// Transforms javascript object into raw data correctly idented with null, 2
var data = JSON.stringify(words, null, 2);
fs.writeFile('words.json', data, finished);
function finished(err) {
console.log('Writting');
var reply = {
word: word,
score: score,
status: 'Success'
}
response.send(reply);
}
}
}
POST method JS
$('#submit').on('click', function submitWord() {
var word = $('#fieldWord').val();
var score = $('#fieldScore').val();
$.ajax({
type: 'POST',
url: '/add/' + word + "/" + score,
success: function (newOrder) {
$list.append('<li>name: ' + newOrder.word + newOrder.score + '</li>');
},
error: function (err) {
console.log('Error saving order', err);
}
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial API with node.js</title>
<script type="text/javascript" src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p>
Word: <input type="text" id="fieldWord"><br/>
Score:<input type="text" id="fieldScore"><br/>
<button type="button" id ="submit">Submit</button>
<ul id="list">
</ul>
</p>
</body>
<script type="text/javascript" src="sketch.js"></script>
</html>
Thank you in advance.
i have take google signin in my website :
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
//console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
//console.log('Image URL: ' + profile.getImageUrl());
//console.log('Name: ' + profile.getName());
//console.log('Email: ' + profile.getEmail());
var user_uname = profile.getName();
var user_email = profile.getEmail();
alert(user_uname);
}
</script>
and here is a button to login google:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
i want to give user google signin but the problem is whenever page is load onSignIn() function is called automatically.
i want it only on button click. can anybody help me?
Best solution is to render sign-in button only when user is not signed in.
<html>
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var user_name = profile.getName();
alert(user_name);
}
function onLoad() {
gapi.load('auth2,signin2', function() {
var auth2 = gapi.auth2.init();
auth2.then(function() {
// Current values
var isSignedIn = auth2.isSignedIn.get();
var currentUser = auth2.currentUser.get();
if (!isSignedIn) {
// Rendering g-signin2 button.
gapi.signin2.render('google-signin-button', {
'onsuccess': 'onSignIn'
});
}
});
});
}
</script>
<div id="google-signin-button"></div>
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</body>
</html>
I done it by declaring global js variable as false
var isFirstGoogle = 0;
Then to check this variable
if(isFirstGoogle)
{
//wont enter here first time
}
isFirstGoogle = 1;
So next time when I click on button the above method will be called as now isFirstGoogle = 1;
Hope this help!! It's a temporary thing I know but it's working for me.
Good pic by Tim Rosenberg that shows exactly how OAUTH2 work's:
I'm kind a lazy to even start looking on this 2 files and test
so I searched for easyest way to
1.get token
2.access with that token
with help of gwt-oauth2
put it into index.php head :
<script type="text/javascript" src="gwt-oauth2.js"></script>
and this in body
<script type="text/javascript">
(function() {
var GOOGLE_AUTH_URL = "https://accounts.google.com/o/oauth2/auth";
var GOOGLE_CLIENT_ID = "CLIENT_ID";
//var PLUS_ME_SCOPE = "https://www.googleapis.com/auth/plus.me";
//var FusionTable_SCOPE = "https://www.googleapis.com/auth/fusiontables";
var button = document.createElement("button");
button.innerText = "Authenticate with Google";
button.onclick = function() {
var req = {
'authUrl' : GOOGLE_AUTH_URL,
'clientId' : GOOGLE_CLIENT_ID,
'scopes': ['https://www.googleapis.com/auth/plus.me',
'https://www.googleapis.com/auth/fusiontables'
],
};
oauth2.login(req, function(token) {
alert('Got an OAuth token:\n'+ token +'\n'+ 'Token expires in '+ oauth2.expiresIn(req) +' ms\n');
}, function(error) {
alert("Error:\n" + error);
});
};
var dv = document.getElementById('admin-content');
dv.appendChild(button);
var clearTokens = document.createElement('button');
clearTokens.innerText = 'Clear all tokens'
clearTokens.onclick = oauth2.clearAllTokens;
dv.appendChild(clearTokens);
})();
</script>
OK,
Now you can see connection and redirection to oauthWindow.html in new window without errors. GET parameters now showing you access_token token_type expires_in. Check the access_token HERE
As you see access_token working great BUT
What you still don't get is first alert from that :
oauth2.login(req, function(token) {
alert('Got an OAuth token:\n' + token + '\n'
+ 'Token expires in ' + oauth2.expiresIn(req) + ' ms\n');
}, function(error) {
alert("Error:\n" + error);
});
Second alert works fine and when you try to Auth. again if oauthWindow.html still open it shows you an error alert(so it's working!)
Now let's add that little code to oauthWindow.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.opener && window.opener.oauth2 && window.opener.oauth2.__doLogin) {
window.opener.oauth2.__doLogin(location.hash);
} else {
document.body.innerText = "Your browser seems to be stopping this window from communicating with the main window.";
}
</script>
</head>
<body></body>
</html>
Perfect!
Now if you want to work with private tables all you need is to add an access_token to url.
Thanks for giving me the reason to answer myself!
Put this into oauthWindow.html file
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.opener && window.opener.oauth2 && window.opener.oauth2.__doLogin) {
window.opener.oauth2.__doLogin(location.hash);
} else {
document.body.innerText = "Your browser seems to be stopping this window from communicating with the main window.";
}
</script>
</head>
<body></body>
</html>