I'm trying to put a QR barcode scanner in my website using Quagga after lots of trying I finally succeeded to put the live reader, its ask for permission to use in the pc but when I'm trying to access it through my phone it doesn't work, and by doesn't work I mean doesn't even ask for permission to open the camera
I am rendering the script tag on the ejs file and it looks something like this:
<script src="js/quagga.min.js"></script>
<script>
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
target: document.querySelector('#camera')
},
decoder : {
readers : ["code_128_reader"]
}
}, function(err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
Quagga.onDetected(function(data){
document.body.appendChild("<h1>"+data.codeResult.code +"</h1>")
});
</script>
Thanks in advance!
SOLVED!
for the chrome version that is 47+, it seems like you don't have permission to use the camera on unsecure website, and mine was on the localhost.
so I got into the chrome flags and inside of that I searched "Insecure origin treated as secure" and then I added my laptop IP and the opened port and it worked!
the "Yahha Udin" question answered by "Kartik Sharma" (link below) helped me solve it.
link: "unsafely-treat-insecure-origin-as-secure" flag is not working on Chrome
Related
I'm trying to get Web NFC to work through the Web NFC API, but I can't get it past an error message of NotAllowedError: NFC permission request denied.
I'm using this on Chrome 89 Dev on a Windows 10 computer, and the source code is being run locally.
I have tried the examples posted on the Internet also, including the Google sample but it returns the same error. I'm not concerned with it being experimental at this point as referring to this does show it has successfully passed the necessary tests, including permissions.
The HTML/JS code I'm using is below, and I've read the specification point 9.3, but I can't make sense of it to write it as code, so is there a guideline algorithm that would be helpful here to resolve this?
async function readTag() {
if ("NDEFReader" in window) {
const reader = new NDEFReader();
try {
await reader.scan();
reader.onreading = event => {
const decoder = new TextDecoder();
for (const record of event.message.records) {
consoleLog("Record type: " + record.recordType);
consoleLog("MIME type: " + record.mediaType);
consoleLog("=== data ===\n" + decoder.decode(record.data));
}
}
} catch(error) {
consoleLog(error);
}
} else {
consoleLog("Web NFC is not supported.");
}
}
async function writeTag() {
if ("NDEFWriter" in window) {
const writer = new NDEFWriter();
try {
await writer.write("helloworld");
consoleLog("NDEF message written!");
} catch(error) {
consoleLog(error);
}
} else {
consoleLog("Web NFC is not supported.");
}
}
function consoleLog(data) {
var logElement = document.getElementById('log');
logElement.innerHTML += data + '\n';
};
<!DOCTYPE html>
<html>
<head>
<script src="webnfc.js"></script>
</head>
<body>
<p>
<button onclick="readTag()">Test NFC Read</button>
<button onclick="writeTag()">Test NFC Write</button>
</p>
<pre id="log"></pre>
</body>
</html>
From https://web.dev/nfc/#security-and-permissions
Web NFC is only available to top-level frames and secure browsing contexts (HTTPS only). Origins must first request the "nfc" permission while handling a user gesture (e.g a button click). The NDEFReader scan() and write() methods trigger a user prompt, if access was not previously granted.
I guess you are running from a file:// URL as you said "locally" which is not supported.
You need to host it from a local web server using a https:// URL
Once in the right scope trying to scan or write should trigger a user prompt.
You can also check permissions see https://web.dev/nfc/#check-for-permission
Update:
So I tried the sample page https://googlechrome.github.io/samples/web-nfc/
And this works for me on Android Chrome 87 with "Experimental Web Platform features" enabled
When you hit the scan button A dialog asking for permission pops up.
Comparing the code in this sample to yours I notice that does:-
ndef.addEventListener("reading" , ({ message, serialNumber }) => { ...
Where as yours does:-
ndef.onreading = event => { ...
I don't know if it is the style setting what happens on the Event or something else (Hey this is all experimental)
Update2
To answer the question from the comments of Desktop support.
So you should be some of the desktop/browser combinations at the moment and may be in the future there will be wider support as this is no longer experimental standards. Obviously as your test link suggest Chrome on a Linux Desktop should work as this is really similar to Android Support, with all the NFC device handling done by libnfc and the browser just has to know about this library instead of every type usb or other device than can do NFC.
From what seen of NFC support on Windows, most of this is focussed on direct controlling the NFC reader via USB as just another USB device, while there is a libnfc equivalent in Windows.Networking.Proximity API's I've not come across any NFC reader saying they support this or anybody using it.
For Mac Deskstop, given that Apple are behind the curve with NFC support in iOS, I feel their desktop support will be even further behind even though it could be similar to Linux.
As you can read at https://web.dev/nfc/#browser-support, Web NFC only supports Android for now which is why you get "NotAllowedError: NFC permission request denied." error on Windows.
Im trying to read NFC tags from chrome 81 on andriod with the following code:
<html>
<head>
<title>NFC</title>
</head>
<body>
<button onclick="reader()">Scan</button>
<script>
function reader(){
const reader = new NDEFReader();
reader.scan().then(() => {
alert("Scan started successfully.");
reader.onerror = () => {
alert("Cannot read data from the NFC tag. Try another one?");
};
reader.onreading = event => {
alert("NDEF message read.");
};
}).catch(error => {
alert(`Error! Scan failed to start: ${error}.`);
});
}
</script>
</body>
the problem im having with it is that it reads the entry from the nfc tag but doesnt give alerts like the code suggests, instead it trys to direct me to installed apps on my phone. However, when i use https://googlechrome.github.io/samples/web-nfc/ that is using the full API it works and displays in the webpage as data. The main difference is that im using the Enabling via chrome://flags method to allow the NFC API.
out of reading the tag, my only aim is to save the content to sessionStorage as a variable to be used by other parts of the website.
Thanks in advance
One difference between https://googlechrome.github.io/samples/web-nfc/ and your code that would matter is the fact this demo used to have an origin trial token in its web page.
For now, to experiment with Web NFC on Android, enable the #experimental-web-platform-features flag in chrome://flags as described in https://web.dev/nfc/#use
Hopefully this flag won't be required once it is shipped to the web platform.
I'm new to Cordova, any help would be appreciated.
I created a new Cordova Project in VS2015 and added the Cordova SMS plugin to my project (https://www.npmjs.com/package/cordova-sms-plugin).
I added this code to /www/scripts/index.js function onDeviceReady (as per documentiation for plugin):
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
var numberString = "aoeuaeu";
var bypassAppChooser = true;
//CONFIGURATION
var options = {
replaceLineBreaks: false,
android: {
intent: 'INTENT' // send SMS with the native android SMS messaging
}
};
var successSMS = function () { alert('Message sent successfully'); };
var errorSMS = function (e) { alert('Message Failed:' + e); };
sms.send("0811231234", "Testing123", options, successSMS, errorSMS);
I debug the project using Debug, Android, Ripple - Nexus (Galaxy) selected options. When I place a breakpoint on the sms.send line of code and I add a watch for 'sms.send', I can see the object exists.
When I single step, this line in sms.js seems to be the last line that executes:
// fire
exec(
success,
failure,
'Sms',
'send', [phone, message, androidIntent, replaceLineBreaks]
);
I then get the following error message in Ripple:
'Sms.send We seem to be missing some stuff :( What is kinda cool though you can fill in the textarea to pass a json object to the callback you want to execute).'
I can see that all of the objects in that line is defined (success, failure, phone, message, androidIntent, replaceLineBreaks). When I 'step into' this line, it continues to execute code in ripple.js, but it becomes hard to follow for a person, since there are no line breaks in this file.
What am I doing wrong? I've read through all the documentation I can find & searched stackoverflow questions and can't seem to find any solutions to the problem.
I've uploaded this entire project (zipped), which can be downloaded at:
https://drive.google.com/file/d/0BwWgTMh-JLbfNHV0MlE5Yk5IZ3M/view?usp=sharing
Thanks in advance
Thank you Cordova team at Microsoft for helping me with an answer:
"Ripple has the ability to emulate some but not all plugins. SMS is not one of the plugins that it can fully emulate. However, in the message that pops up, you do have the ability to hit the Success or Fail buttons which will report back to the app that it was successful or not in sending the SMS. While that doesn’t actually send a message, it does let you test your app to see how it behaves for different results.
I tried the bit of sample code you included in the first email. In Ripple, I was able to change the alert by hitting the different buttons.
Trying other deployment methods, in both the VS Android Emulator and the Google Emulator they showed failure alert messages that they don’t support SMS messages. I then launched it on an Android phone device and it said it was successful.
So I believe your options are mainly using Ripple to fake sending of messages or using a device for testing."
Im using the fabric javascript library to create a custom image. All the data is saved in a canvas and is shown using canvas tag. After displaying the image, I would like to give the user the option to save it locally. Anyone has any idea how to do that? The solution should work for IOs and Android, I've tried several alternatives but still no luck.
[Update 1]
I tried using the Canvas2ImagePlugin but for some reason my app restarts when running the window.canvas2ImagePlugin.saveImageDataToLibrary command.
My code (I want to save the image when the users touches the saveButton):
$(document).on('click', '#saveButton', function(e){
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('c')
);
});
This is shown in the browser logs after the app restarts:
deviceready has not fired after 5 seconds. (13:09:28:529)
at file:///android_asset/www/cordova.js:1169
Channel not fired: onPluginsReady (13:09:28:542)
at file:///android_asset/www/cordova.js:1162
Channel not fired: onCordovaReady (13:09:28:550)
at file:///android_asset/www/cordova.js:1162
Channel not fired: onDOMContentLoaded (13:09:28:557)
at file:///android_asset/www/cordova.js:1162
I also noticed that when Netbeans builds my app, for some reason it deletes the plugin. This is part of the build output:
update-plugins:
cordova.cmd plugins
cordova.cmd -d plugin remove org.devgeeks.Canvas2ImagePlugin
Calling plugman.uninstall on plugin "org.devgeeks.Canvas2ImagePlugin" for platform "android"
Uninstalling org.devgeeks.Canvas2ImagePlugin from android
[Update 2]
After some research I found out that I had to add the plugin manually in the file \nbproject\plugin.properties. Now its working perfectly. Thank you AtanuCSE
try this plugin
Canvas2ImagePlugin
<canvas id="myCanvas" width="165px" height="145px"></canvas>
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
}
With Canvas2ImagePlugin now u can choose either to save as jpg/png, set quality and set outputfolder
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg); //msg is the filename path (for android and iOS)
},
function(err){
console.log(err);
},
document.getElementById('myCanvas'),
'.jpg', // save as jpg
80, // image quality
'cunvaspluginfolder' //folder name
);
}
Credit to wbt11a because make this plugin more configurable from original author.
Please download the new plugin here Github source
I am trying to redirect my users when they are installing my chrome extension.
this is the code given by google:
chrome.webstore.install(string url, function successCallback, function failureCallback)
But i cant get it to work, it installs the extension, but nothing happens afterwards.
This is what i just tryed:
onclick="chrome.webstore.install('https://chrome.google.com/webstore/detail/migmokkneocggfbfkklboandoijmbnmn',successCallback(e){alert('bitch');};"
Can you please help me? i have searched for hours now.
Add code like this in your background file:
if(!localStorage.first){
chrome.tabs.create({
url : "http://whatever.com/welcome.html"
});
localStorage.first = "true";
}
from redirect to page.html after chrome extension installs
I just ran into this. For some reason, that signature doesn't accept function references. So you'll have to make a call like:
chrome.webstore.install(
'webstore-path',
function() {
console.log('w00t');
}
);
instead of
chrome.webstore.install('webstore-path', callbackRef);
Hope that helps!