I am using Zxing to scan barcode in Xamarin forms App ,
The problem is Autofocus works only once when the scanpage Appeared ,
I tried to add timer as below Code also not worked ,
and I noted when I change the application and return to it (in scan page ) Auto focus works perfect ,
I also added Button to Autofocus to overlay , it's fired but camera didn't focus
any advise ?
scanPage.AutoFocus();
TimeSpan ts = new TimeSpan(0, 0, 0, 10, 0);
Device.StartTimer(ts, () =>
{
if (scanPage.IsScanning)
{
scanPage.AutoFocus();
}
return true;
});
Don't use a ScannerPage.
Use their MobileBarcodeScanner.
var scanner = new ZXing.Mobile.MobileBarcodeScanner();
var result = await scanner.Scan();
From documentation: https://github.com/Redth/ZXing.Net.Mobile#usage
Related
I'm trying to load up a webpage which uses Stripe.js inside a WKWebView on iOS (using Xamarin.Forms).
Everything works fine (can take card payments), except for Apple Pay: paymentRequest.canMakePayment() always returns null.
The same webpage inside a SFSafariViewController works fine, so the issue seems to be related to restrictions inside WKWebView.
However, according to https://webkit.org/blog/9674/new-webkit-features-in-safari-13/ this should now be supported and indeed the same WKWebView also loads up the official Apple Pay demo page (https://applepaydemo.apple.com/) with no issues.
It would seem that the problem is eventually with how Stripe.js works under the hood (perhaps with regards to script injection).
My custom renderer in Xamarin looks like this:
WKWebView wkWebView;
protected override void OnElementChanged(ElementChangedEventArgs<NativeWebView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
var config = new WKWebViewConfiguration();
wkWebView = new WKWebView(Frame, config);
wkWebView.WeakNavigationDelegate = new WebNavigationDelegate();
SetNativeControl(wkWebView);
}
if (e.NewElement != null)
Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
}
And the JS in the webpage (taken from the Stripe Element samples):
//set up payment request
var paymentRequest = stripe.paymentRequest({
country: 'GB',
currency: 'gbp',
total: {
label: 'sample order',
amount: 100,
},
requestPayerName: true,
requestPayerEmail: true,
});
paymentRequest.canMakePayment().then(function (result) {
// result is always false!
...
});
Are there perhaps additional settings that can be added to the WKWebView to make this work?
This is no longer an issue. It was acknowledged by Stripe as a flaw in their JS wrapper and has been fixed in recent updates to the official library.
I have:
this.wavesurfer = WaveSurfer.create({
container: "#wavesurfer-player",
height: 60,
barWidth: 2,
barHeight: 1, // the height of the wave
barGap: null,
scrollParent: false
});
this.wavesurfer.load(this.url);
this.wavesurfer.on(
"loading",
progress => (this.loadingProgress = progress)
);
this.wavesurfer.on("ready", () => {
let progressBarContainer = document.querySelector(
".progress-bar-container"
);
progressBarContainer.classList.add("animated", "fadeOut");
this.loadingProgress = 100;
this.wavesurfer.un("ready");
progressBarContainer.addEventListener("animationend", () => {
this.hideProgressBar = true;
});
});
this.wavesurfer.on("audioprocess", this.audioprocess);
On iOS safari, this won't play. Apparently, I need to create an AudioContext AFTER a user action. So I can add a button with a click event to trigger this. But I want the waveform to show on load.
On IOS due to security reasons it will not allow to play onload. User will have to initiate the audio play through some user action.
Find an example where it plays the audio on safari browser below
https://code pen.io/entonbiba/pen/WRyxga
I'm working with the Youtube Javascript API (iframe version) and I'm using start and end parameters in order to play a portion only of a video. While everything works fine, once the end is reach, the player stop (normal behavior). However, when clicking again on play, the player does not seems to considering the start option. It always restart playing from the beginning of the video. It ends however at the defined end value, always.
<iframe frameborder="0" src="https://www.youtube.com/embed/5lGoQhFb4NM?autoplay=1&autohide=1&modestbranding=1&showinfo=0&controls=0&vq=hd720&rel=0&start=60&end=100" style="width: 100%; height: 400px;"></iframe>
Do you guys have any idea on why it is happening?
Here's how I was able to have the replay button start over at the original start time, as well as prevent users from scrolling outside the start/end bounds of the playerVars:
function onPlayerStateChange(event) {
var isClip = playerOptions.playerVars.start && playerOptions.playerVars.end;
var start = isClip ? playerOptions.playerVars.start : null;
var end = isClip ? playerOptions.playerVars.end : null;
if (event.data == YT.PlayerState.PLAYING) {
if (isClip) {
var currentTime = event.target.getCurrentTime();
if (currentTime < start || currentTime > end) {
event.target.seekTo(playerOptions.playerVars.start);
}
}
}
}
I've tried the above solution without succes (error console : "playerOptions is not defined")
But thx to this topic YouTube API - Loop video between set start and end times I've been able to successfully get the start/end parameters on replay :
<script>
// 5. The API calls this function when the player's state changes.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
var playButton = document.getElementById("play");
playButton.addEventListener("click", function() {
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});
});
document.getElementById("play").style.cssText = "visibility:visible";
}
}
</script>
Explanations : in my case, I'm using a button id="play" to start the video. When the video is ENDED, the button #play is set to visibility:visible and the click event uses the player.loadVideoById corresponding parameters.
If you don't use the click event, the video will auto loop with the desired start/end values.
From Youtube API reference = https://developers.google.com/youtube/iframe_api_reference?hl=fr#Getting_Started
I'm currently in the learning phase for how the Google JS Client SDK works, since my boss needs me to learn how to integrate a Sign In button to his site to enable people to Authenticate via Google. I am testing the code for the custom Sign In button, with a touch of added functionality (like a Sign Out button), and in the process I've practically copy/pasted the code from their website. Let me show you the code first and then explain the issue, so that you can understand where the code is failing:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
<script type="text/javascript">
var clientId = '{my client id here}'; // for web
var apiKey = '{my api key here}';
var scopes = 'profile email';
function SignOut() {
// I know, sloppy, but the signOut method from Google doesn't work.
window.location = 'https://accounts.google.com/logout';
// Additional code if necessary.
};
function makeApiCall() {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({ 'userId': 'me' });
request.execute(function (response) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = response.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(response.displayName));
document.getElementById('name').appendChild(heading);
alert('User logged in. makeApiCall() has executed.');
})
})
};
function init() {
gapi.client.setApiKey(this.apiKey);
window.setTimeout(checkAuth, 1);
console.log('Up and ready to go.');
};
function checkAuth() {
// Triggers when the page and the SDK loads.
gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult);
};
function handleAuthClick(event) {
// Triggers after a user click event to ensure no popup blockers interfere.
gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult);
return false;
};
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('SignInBtn');
var signoutButton = document.getElementById('SignOutBtn');
if (authResult && !authResult.error) {
var V = JSON.stringify(authResult);
localStorage.setItem('GoogleAuthResult', V);
console.log(V); // Just for testing...
var authTimeout = (authResult.expires_in - 5 * 60) * 1000; setTimeout(checkAuth, authTimeout); // As recommended by a Google employee in a video, so that the token refreshes.
authorizeButton.style.display = 'none'; // Switching between Sign In and Out buttons.
signoutButton.style.display = 'inline-block';
makeApiCall();
} else {
// Immediate:true failed so user is NOT signed in.
// Make the Sign In button the one visible and prep it
// so that it executes the Immediate:false after user click:
authorizeButton.style.visibility = 'inline-block';
authorizeButton.onclick = handleAuthClick;
signoutButton.style.visibility = 'none';
}
};
</script>
The handleAuthClick function does run on the button click, but after taking the user to the Google Sign In page, when that page brings me back, the browser kinda flickers and the handleAuthResult function does not execute. Therefore, nothing changes in the page after the successful sign in; the button displayed is the Sign In button (Sign Out button not visible) and no information is displayed on the 'name' textNode. This happens on Internet Explorer (11), Firefox (39) and Chrome (44). Also, it happens at home on my laptop (straight connection to the web via Cable broadband) and at work (on Windows 8.1 behind an Active Directory).
I began wondering so I started refreshing the browser page and after a couple of refreshes, since the script runs from the beginning, the immediate:true fires again and voilá: user is connected and API call triggers.
So, on my laptop, I changed the function being called back, in the immediate:false line's callback parameter, to the init() function and that fixed the problem: everything runs smoothly from beginning to end. Yet, this is not the way it is supposed to work. I still don't know what is going on with that line.
This morning, on my computer at work (behind Active Directory), that fix didn't work. I have to refresh the page a couple of times so that the script runs from the beginning and the immediate:true triggers recognizing the user's Signed In state and displaying the proper button on screen.
Any ideas on why does this callback fail?
You need to define your apiKey in the first section of your code
var clientId = '{my client id here}'; // for web
var apiKey = '{my api key here}'
Maybe thats the problem.
Google ApiKeys
Bar Code Scanner and Keyboard.
NOTE: My Bar Code Scanner is USB Type.
Then...
What function must be use to trigger the keyboard if i'm at auto.aspx page?
I tried this code but no success:
var barcode = document.getElementById('barcodenum');
barcode.addEventListener("keypress", function() { alert("Please use Barcode Scanner!"); document.getElementById('barcodenum').value = "";}, true);
I'm afraid you can't do that through JavaScript. If you were developing desktop app, it could be done.
EDIT:
The only one solution in JavaScript is measure the time between the keypress events. Barcode scanner is faster then human, so if you set the - experimentally invented - time limet for gaps between two keypresses, you may cope with this problem. (Source of this idea.)
As pointed out by #Robert Skarzycki above, i doubt you can integrate with the scanner using a web page.
On the keypress intercept issue.
Add this to the head section of you page.
<script type="text/javascript">
window.onload = function() {
var barcode = document.getElementById('barcodenum');
barcode.addEventListener("keyup", function() {
alert("Please use Barcode Scanner!");
document.getElementById('barcodenum').value = "";
}, true);
};
</script>
Try this code. I assum that you know about the Jquery. Run this code and type anything from the keyboard while focusing the web page and hit enter key. If this works barcode reader do the same. Configure your barcode reader to pass enter key at the end of code reading. Jquery library
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
Jquery
$(document).ready(function() {
var barcode="";
$(document).keydown(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code==13)// Enter key hit
{
alert(barcode);
}
else if(code==9)// Tab key hit
{
alert(barcode);
}
else
{
barcode=barcode+String.fromCharCode(code);
}
});
});