I am using the library https://github.com/felipenmoura/qr-code-scanner to implement scanning of the QR codes. I am facing two problems -
Google chrome throws the following error whenever I click the button to trigger. The library works fine on Safari.
Uncaught (in promise) OverconstrainedError {name: "OverconstrainedError", message: "", constraint: "facingMode"}constraint: "facingMode"message: ""name: "OverconstrainedError"__proto__: OverconstrainedError
The camera feed doesn't work for mobile phones (both safari and chrome). It opens the camera, and doesn't show the live feed, instead it keeps on showing a static image
I am not sure if this is the best library for QR code scanning. My aim is to implement a button that triggers the camera, scans QR,enter image description here and puts the scanned string into the input field.
My code is -
<script src='../scanner.js'></script>
<script>
function tryIt () {
window.QRScanner.initiate({
match: /^[a-zA-Z0-9]{16,18}$/,
onResult: function (result) {
console.info('DONE: ', result);
document.getElementById("memberno").value = result;
},
onError: function (err) { console.error('ERR :::: ', err); },
onTimeout: function () { console.warn('TIMEDOUT'); },
});
}
</script>
and the button is -
<button class="btn btn-outline-info" value='Scan QR' onclick='tryIt()' type="button" id="button-addon1">Scan QR</button>
For anyone who is still looking for an answer to the best library for QR code scanning-
I found this library ScanThng to be pretty decent in terms of image scanning, camera feed scanning, etc.
Related
There is an API for download handling for google chrome:
https://developer.chrome.com/docs/extensions/reference/downloads/
This is great and it works. But I would love to add a listener for whenever a user triggers an <input type="file /> as well. This can be done with some client side script in content_scripts, but I need to do this with the API and not custom logic
There are two APIs that sounds right but only works for ChromeOS: fileBrowserHandler and fileSystemProvider
// WORKS
chrome.downloads.onCreated.addListener((item) => {
alert(1)
})
// Doesn't work
chrome.fileBrowserHandler.onExecute.addListener((id, details) => {
alert(2)
})
// Doesn't work
chrome.fileSystemProvider.onOpenFileRequested.addListener(() => {
alert(3)
})
I am very new to web programming. I took an online course covering html, css, js and node, now I started to build an online calendar application. In my calendar page each day of the year is represented by a text input. So there are 365 inputs in the page. What I am trying to do is; when an input lost focus, the value of the input must be stored in a mongo database. I assume that I should send a post request to my index.js file from the calendar.ejs file when the input lost focus. But all the examples I could find so far use form tag. Is it possible to send a post request when the onfocusout event of a text input is triggered?
Have you tried jQuery $.ajax?
http://api.jquery.com/jquery.ajax/
var request = $.ajax({
url: "http://www.your-url.com",
type: "POST",
data: { ... } // payload to the api
}).done(function (response, textStatus, jqXHR) {
//your code
}).fail(function (jqXHR, textStatus, errorThrown) {
console.error(
"The following error occurred: " +
textStatus, errorThrown
);
}).always(function () {
// your code
});
Just started with PubNub, and seems that I fail to understand even the simplest possible scenario. I created the following test page:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.15.1.js"></script>
<script>
const pubnub = new PubNub({
publishKey : '<guid>',
subscribeKey : '<one more guid>'
});
pubnub.subscribe({channels: ['3']});
pubnub.addListener({
message: v => {
console.log("on message", v);
},
});
function onClick() {
pubnub.publish({channel: '3', message: 'foo'});
}
</script>
</head>
<body>
<button onclick="onClick()">start</button>
</body>
</html>
Opening it with latest Chrome and clicking "start" button will result in test message being received endlessly over and over. I was under impression that after single client receives a message from a bus, this client will not receive it again. why such behaviour? I understand that I can read all the docs and most probably answer is somewhere deep inside, but tutorial + quickstart gives no clues, and rest of docs are quite huge.
Your example code works perfectly for me. The message published is received one time on the channel "3". One way to validate this is to simultaneously have the PubNub Console open (https://www.pubnub.com/docs/console). Make sure you enter your Publish and Subscribe keys into the console, along with the channel "3". After clicking the "Subscribe" button in the PubNub Console, you should see your test message "foo" appearing once in the "messages" section at the bottom each time you click the "start" button on your test page.
I can see that you're using the latest SDK-JS V4 (perfect starting point)
Your code works!
I would like to point you to a bit of a diff way to init PubNub and few functionalities.
(which are available in their docs)
Please look at the attached link to view my PubNub demo
<script type="text/javascript">
console.log('init PubNub.');
pubnub = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo',
uuid: 'myDemo'
})
console.log("addListener..");
pubnub.addListener({
status: function(statusEvent) {
if (statusEvent.category === "PNConnectedCategory") {
console.log("PNConnectedCategory..");
publishSampleMessage();
}
},
message: function(message) {
console.log("New Message!!", message.message);
},
presence: function(presenceEvent) {
//handle presence
}
})
console.log("Subscribing..");
pubnub.subscribe({
channels: ['myDemo']
});
function publishSampleMessage() {
console.log("Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish.");
var publishConfig = {
channel: "myDemo",
message: "I'm here, I'm alive!!"
}
pubnub.publish(publishConfig, function(status, response) {
console.log(status, response);
})
}
function onClick() {
publishSampleMessage();
}
</script>
I am very new to JavascriptFFI and will very much appreciate help here.
I have a working javascript code to grab image as FILE URI from camera (via cordova camera plugin). Now, it can return either error or file uri on success. We want to map them to Left Int Text and Right GHCJS.DOM.Types.File (not sure if I got the type of FILE URI right).
Here is the javascript code (untested since I modified it off the tested one to return just fileuri or error, instead of displaying it in the browser).
<script type="text/javascript" charset="utf-8">
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
console.log("success");
return imageURI;
}
// A button will call this function for testing
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as binary data
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.FILE_URI });
}
// Called if something bad happens.
//
function onFail(message) {
console.log("failure");
return[1, message];
}
</script>
I will appreciate pointers on how to do the FFI to navigator.camera.getPicture with ghcjs-dom-0.2.3.1 (I am using it with Reflex) such that returned result is in Either.
I can then wrap the File URI in ByteString (I think through Cordova file api to convert it first to arraybuffer) and send it off to remove server for persistence.
I'm trying to build an iOS Webapp that uses audio. While it has been a very fickle endeavor, I finally managed to get it to work in Safari Mobile (interestingly enough it worked in chrome mobile a long time before, I don't know why…). Yet when I save it as a webapp on the home screen, the audio stops working mysteriously…
Here is the audio code. window.helpers.gongis a base64 encoded mp3 file.
I checked the console output in the webapp via the desktop safari, yet there are no errors thrown.
Any ideas what might be going wrong?
window.helpers.audio = {
myAudioContext: null,
mySource: null,
myBuffer: null,
init: function() {
if ('AudioContext' in window) {
this.myAudioContext = new AudioContext();
} else if ('webkitAudioContext' in window) {
this.myAudioContext = new webkitAudioContext();
} else {
alert('Your browser does not support yet Web Audio API');
}
var self = this;
var load = (function (url) {
var arrayBuff = window.helpers.Base64Binary.decodeArrayBuffer(window.helpers.gong);
self.myAudioContext.decodeAudioData(arrayBuff, function(audioData) {
self.myBuffer = audioData;
});
}());
},
play: function() {
this.mySource = this.myAudioContext.createBufferSource();
this.mySource.buffer = this.myBuffer;
this.mySource.connect(this.myAudioContext.destination);
if ('AudioContext' in window) {
this.mySource.start(0);
} else if ('webkitAudioContext' in window) {
this.mySource.noteOn(0);
}
}
};
The code is called like this on load:
window.helpers.audio.init();
And later it is triggered through user action:
...
$('#canvas').click(function() {
if(this.playing == false) {
window.helpers.audio.play();
}
}.bind(this));
...
Ouch, the answer was blindingly simple:
I had the mute switch on the side of the iPhone set to mute the whole time.
So it turns out that safari plays audio even when the switch is on mute, yet when you save it as a web app, it doesn't work anymore.
If I understand correctly the audio works on desktop Safari, and not on mobile Safari?
This could be a result of a limitation placed on mobile Safari that requires any sound that is played to be a triggered in a user action (for example, a click).
Read more here:
http://buildingwebapps.blogspot.com/2012/04/state-of-html5-audio-in-mobile-safari.html