I've found a very simple yet working fine QRcode generator plugin that works in pure jQuery. The plugin's name is jquery.qrcode.
Here is how it works when given a url:
function showQR(url) {
$('#qrcode').qrcode({
"width": 100,
"height": 100,
"color": "#3a3",
"text": url
});
}
Quite simple, huh?
Now when I search the web for a similar html5 QRcode reader all I can find is references to Lazarsoft jsqrcode.js with accompanying getUserMedia which is not available on iPhone (AFAIK).
Besides there are lots of caveats explaining that it is not working properly, and so on...
What I need is a jq plugin that will smoothly acces the phone's camera, tune the focus to a QRcode and return the corresponding url, no fuss, no mess.
Any clue?
As Passerby pointed out, there is the picture from camera input method which works everywhere. You can use the getUserMedia on browsers supporting it, and fallback to this technique for iPhones. Once you got the pic, you can use the fileReader API (supported on iOS) to do your QR scanning
mebjas/html5-qrcode is open source, cross platform QR code & barcode reader. It can be used to easily integrate QR code scanning in web applications. It supports scanning using camera feed or selecting image from disk (on PC/Mac/Iphone/Android etc).
You can try a demo here: qrcode.minhazav.dev
You can find more info on this article: https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
PS: I am the author
Related
I'm using Whatsapp Click-to-chat functionality, without a phone number. It previously worked but with the new Chrome version 76.0.3809.132, both on iOS and Android is not working anymore. On Android, it's showing a Toast with Couldn't open link. Tried contacting Whatsapp Support but no answer as of yet. With the latest update their own documentation example is not working, link to docs. Any suggestions or experiences?
Link example:
<a target="_blank" href="https://wa.me/?text=Villa%20stone%20road%20piece%2015%20meters%20from%20the%20asphalt%20street" title="Share on WhatsApp">
Error picture Imgur: picture
A table with my tested devices and versions on Imgur
If you use https://api.whatsapp.com/send instead of https://wa.me/ you don't need to specify a phone number.
e.g
https://api.whatsapp.com/send?text=Your%20Custom%20Text
It seems that chrome does not accept click to chat without a number specified. Once there's a number in the URL it works just fine.
Unfortunately I did not find a hack to get around it. Neither of this worked:
https://wa.me//?text=Hello%20World
https://wa.me/0/?text=Hello%20World
only if a proper number is specified it will open WhatsApp, but has the recipient already pre selected (the number we provide).
I tested it for a client about 2 weeks ago, when it still worked. So the last update of Chrome (from Aug 26) seems to be the problem...
The best is to use the custom url scheme format. Universal links do not work well with native clients
whatsapp://send/?phone=&text&source&data
It will work without phone number also.
My issue on a recent breaking-change: Universal links stopped working
There was a great blog post about the issue, however it is already outdated and proposes a php specific solution (nevertheless might gives you a good idea, how to think about the problem)
const text = "Hello..."
const phoneNumber = "23400000000000"
Linking.openURL(`whatsapp://send?text=${text}&phone=${phoneNumber}`)
First: Official Whatsapp Sharing Documentation. One of the following URLs is recommended for WEB use...
https://api.whatsapp.com/send?text=YourShareTextHere
https://api.whatsapp.com/send?text=YourShareTextHere&phone=123
And these for MOBILE use...
whatsapp://send?text=YourShareTextHere
whatsapp://send?text=YourShareTextHere&phone=123
If you are interested in watching a project that keeps track of these URLs, then check us out!: https://github.com/bradvin/social-share-urls#whatsapp
When I switch from OpenLayers 2.12 to 2.13.1, all Google Maps layers stop working. When I use the layer switcher the map area just turns white.
I don't see any error messages in the development console of my browser at any point, and all files are loaded successfully.
I'm creating layers like this:
var layerGoogleMapsNormal = new OpenLayers.Layer.Google("Google Normal" , { type : google.maps.MapTypeId.ROADMAP, sphericalMercator : true });
var layerGoogleMapsPhysical = new OpenLayers.Layer.Google("Google Physical" , { type : google.maps.MapTypeId.TERRAIN, sphericalMercator : true });
Other layers (OSM, WMS) work fine.
While I was writing this, I found out that the example from OpenLayers doesn't work properly either.
http://dev.openlayers.org/examples/google.html
Could it be that Google made a breaking change?
Does anyone else have the same problem, and does anyone know a solution?
Remark:
I've looked at OpenLayers3, but its API is so different that I don't think we'll ever be able to port all of our code to that. We won't be able to convince our clients to pay for rewriting all of the mapping stuff to make use of OL3, so I guess this project is stuck with the 2.x branch forever...
I had the same problem as you.
In the link that includes the js file from Google, you must tell it to send you an older version, before the breaking change from 15 Sep.
Example:
Normal link: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
Solution link: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false&v=3.20"></script>
At the moment, the latest version is 3.22. What works best for me is 3.20 for the same Openlayers version as yours.
More info on the topic:
https://developers.google.com/maps/documentation/javascript/versions
Later Edit: As the comments mention, this fix no longer works. In the github issue thread somebody did a patch fix, but I couldn't find the file for direct download so I had to manually apply the fix to my project. To save the others from doing the same, I'll put here a link to the minified version with the fix included.
Download: OpenLayers 2.13.1 with google fix
The accepted answer now no longer works since, as #geocodezip mentioned, v3.20 has now been retired by Google. In order to make OpenLayers 2.13.x work with the current version of the Google Maps API you must monkey patch the OpenLayers.js file as specified in this comment on OpenLayers issue #1450.
First, I tried finding an option to prevent Swiffy from compressing/minifying all the data when doing an export to HTML5 from Adobe Flash Pro. But no dice.
Even if I was able to read the unminified Javascript that Swiffy exported, I don't think there would be a simple function call for the "clickTag".
It's likely defining the variable clickTag in the huge haystack of {index: #, type: #}, and then doing processing each operations to eventually call the window.open() method (or something similar).
This is how it currently outputs (minified)
Does anyone have any clue how Swiffy implements clickTag?
Or what would be the Javascript equivalent that does the same job?
Swiffy uses the core API of the environment where the ad is served. If it's a DoubleClick Rich Media ad, it does use Enabler.exit("url").
If you want to have a better control on your output file, I'd suggest having a look at Google Web Designer. The closest experience to flash development in the HTML5 - JS era.
Google instructions are here, for plain HTML5 (non-swiffy) click tags.
At the bottom of the file is a snippet of code like this:
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
Add this right before stage.start(); to mimic previous flash behavior. Ensure you use the proper capitalization.
stage.setFlashVars("clickTAG=http://stackoverflow.com");
**Note: Ensure to use url encoding if there are parameters...doesn't seem to like it otherwise
Right now I have a website that uses jPlayer to stream mp3s on. I also want to be able to add the functionality of letting SoundCloud stream directly on the player.
I know this is possible, because one of my favorite music blogs hillydilly does this. From looking at their code, I see their setup for their jPlayer has a few extra arguments, namely sc and sclink.
$(".play-music").each(function(){
myPlaylist.add({
title: $(this).attr('data-title'),
artist: $(this).attr('data-artist'),
mp3: $(this).attr('data-mp3'),
url: $(this).attr('data-url'),
sc: $(this).attr('data-sc'),
sclink: $(this).attr('data-sclink')
});
});
I tried looking through the rest of their code, but can't figure out how or where they implement sc and sclink. Any help?
If you look at their playlist they're linking to Soundcloud for the mp3 property of the track:
myPlaylist.setPlaylist([
{
title:"Close Enough ft. Noosa",
artist:"Ghost Beach",
mp3:"http://api.soundcloud.com/tracks/79031167/stream?client_id=db10c5086fe237d1718f7a5184f33b51",
url:"http://hillydilly.com/2012/12/top-20-songs/",
sc:"true"
},
{
title:"Always",
artist:"Jahan Lennon",
mp3:"http://api.soundcloud.com/tracks/80961874/stream?client_id=db10c5086fe237d1718f7a5184f33b51",
url:"http://hillydilly.com/2012/12/top-20-songs/",
sc:"true"
}
HTML5 'streams' are really just MP3s you currently can't protect them like you can with Flash, Silverlight, Quicktime etc. If you open one of those links directly (like http://api.soundcloud.com/tracks/79031167/stream?client_id=db10c5086fe237d1718f7a5184f33b51) it'll download the MP3. So I'm guessing it you set it up the same way it should just work.
If you open up Chrome and its Network inspector (in dev tools: View > Developer > Developer Tools, then click Network) and click next on Hilly's player you can see the track loading in the background.
Actually kreek's answer is only half the story.
If you want to stream soundcloud songs, you first of all need to register your website on the developer page developers.soundcloud.com.
Then use their super cool API with your own key. You can either load the json into your php and generate links there or you load the information with jquery $.getJSON.
When streaming sounds from soundcloud you also want to be sure to properly attribute. The people from soundcloud are very generous to let us use their database like that.
//sorry for the bad links (no credits)
How do I use external JSON...?
http://api.jquery.com/jQuery.getJSON/
http://developers.soundcloud.com/docs/api/buttons-logos
I have an IE tool bar application under the DocumentComplete Event of the Page , i was disabling the HTML links using Concept of BHO(Browser Helper Object) that is working well for some of the sites but when i browse some AJAX/JQUERY based sites ,where the data will be popuplated dynamically and more over source code is also not vsible for dynamic data,this link disabling feature is not working.....
How To Disable or Modify the Content Of Dynamic Data When We load into browser??
HTMLDocument document = (HTMLDocument)webBrowser.Document;
IHTMLElementCollection hh = ((IHTMLElementCollection)document.getElementsByTagName("a"));
foreach (IHTMLElement ht in hh)
{
((HTMLAnchorElement)ht).removeAttribute("href", 1);
((HTMLAnchorElement)ht).style.color = "#b9b0b0";
}
Any Help ?
It depends on your IE version. Till IE 8 there is no DOM Mutation event generated but there is an alternative approach as mentioned here. Although IE 9 supports some basic dom mutation events as mentioned in this IE blog. Also, see this MSDN entry for the supported interface in IE9.
A very crude approach is to use a timer event for monitoring any changes in the DOM content. But you have to take care of threading issues and have to keep per window text information (by window I mean tabs and also IFrame content).
Another approach is to use Asynchronous Pluggable Protocols for monitoring any Ajax request and then accordingly notifying the appropriate tab/window. This is harder then the previous crude approach.
I got answer for the above mentioned problem. The following are the resolution steps what I have followed for the issue.
I just read the whole page content into "MSHTML" object as mentioned in the question
HTMLDocument document = (HTMLDocument)webBrowser.Document;
and again I just loaded it into a Web Browser control.
From there I can read the data easily and I just removed "href" property.