Can WebApps access Device Camera ?

Hello guys,

I`m thinking for a project with WEB and I need to use different devices like iOS or Android, the idea is to scan some QRCodes, get the data and then do the processing on the server. WebApp was nice as it does not need to have an app for specific OS and until Android will come on the IDE will be long way so any ideas for that ? Thanks.

You can access the user camera but you need the user to authorise it.
Have a look at WebRTC, getUserMedia() and here to have a sample app:

This said, you’ll have to implement this in Xojo …

On iOS, it’s as simple as using an uploader Control. When the user clicks the Add button, they can choose to take a picture, which you would then upload and process.

Indeed but unfortunately iOS is an option the focus Is Android so I guess the Android should be native so in this case cannot doit in XOJO .

GraffitiSuite Web Edition has a QRReader class.
https://graffitisuite.com/

[quote=374900:@Anthony Cyphers]GraffitiSuite Web Edition has a QRReader class.
https://graffitisuite.com/[/quote]
Well they have to generate , I need to read , big difference . Thanks .

This may be a starter for you.

GraffitiSuite offers GraffitiWebQR to generate QR codes, and GraffitiWebQRReader to use the device’s camera to interpret QR codes.

Well I saw it but unfortunately the demo is absolutely a mess, on android screen its like after storm and when it loads the buttons are not working at all so something that I cannot test does not work for me.

Thanks .

[quote=375025:@Aurelian Negrea]Well I saw it but unfortunately the demo is absolutely a mess, on android screen its like after storm and when it loads the buttons are not working at all so something that I cannot test does not work for me.

Thanks .[/quote]
Thanks for letting me know! I’ve not seen any issues, but I will certainly take a look.

@Aurelian Negrea
I see what you’re saying about the demo on mobile. For a second or two, while Xojo initializes the views, some errant containers are visible when they shouldn’t be. Not sure what’s causing that, but I’m looking in to it. Other than that, on both Android and iOS, everything seems to work as expected. I’m sorry you’re having trouble, and thank you again for pointing this out with the demo on mobile.

Unfortunately i get this error:

Could not execute returned javascript: MediaStreamTrack.getSources is not a function
Source: var langdir = document.getElementsByTagName(‘body’)[0]; if(langdir) { langdir.removeAttribute(‘dir’); }
var langdir = document.getElementsByTagName(‘body’)[0]; if(langdir) { langdir.setAttribute(‘lang’,‘nl’); }
Xojo.createNamespace(“Axis.Snapshot”);
{
// Grab elements, create settings, etc.
var canvas = document.getElementById(“canvas”),
context = canvas.getContext(“2d”),
video = document.getElementById(“video”),
errBack = function(error) {
console.log("Video capture error: ", error.code);
};

MediaStreamTrack.getSources(function(sourceInfos) {
var audioSource = null;
var videoSource = null;

for (var i = 0; i != sourceInfos.length; ++i) {
	var sourceInfo = sourceInfos[i];
	if (sourceInfo.kind === 'audio') {
		
		audioSource = sourceInfo.id;
	} else if (sourceInfo.kind === 'video') {
		
		videoSource = sourceInfo.id;
	} else {
		console.log('Some other kind of source: ', sourceInfo);
	}
}

sourceSelected(audioSource, videoSource);
});

function sourceSelected(audioSource, videoSource) {
var constraints = {
	video: {
		optional: [{sourceId: videoSource}]
	}
};

// Put video listeners into place
if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(constraints, function(stream) {
		video.src = stream;
		video.play();
	}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(constraints, function(stream){
		video.src = window.webkitURL.createObjectURL(stream);
		video.play();
	}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
	navigator.mozGetUserMedia(constraints, function(stream){
		video.src = window.URL.createObjectURL(stream);
		video.play();
	}, errBack);
}

}}
new button(‘noMLCgxV’,[‘Action’]);
Xojo.controls[‘noMLCgxV’].setEnabled(true);
Xojo.controls.noMLCgxV.setAutoDisable(false);
new container(‘J8ubQHby’,[‘Close’,‘Open’,‘Shown’]);
Xojo.controls[‘J8ubQHby’].setEnabled(true);
new frameworkObject(‘j0TUBh9V’,[‘Close’,‘Open’,‘Shown’]);
Xojo.controls[‘j0TUBh9V’].setEnabled(true);
Xojo.view.showPage(‘j0TUBh9V’);
document.title = “Untitled”;
Xojo.view.dismissLoader();

Any idea what can cause this?

That was a project I last worked on as a proof of concept over 2 years ago. It never went to production and is offered only as a starting point.

That’s a pity, it looked so nice and clean programmed that i thought it was complete and working and would be an excelent example for how to work with the webSDK.
Anyway, thanks for sharing!

MediaStream is only available on Firefox, Chrome, just recently on Safari and not at all on IE or Edge:

https://caniuse.com/#search=MediaStream

I use Plupload by @Phillip Zedalis
https://forum.xojo.com/41644-open-source-upload-control-for-xojo-web

Works pretty well. It took a few hours to get going and you have to host your own php server. I’ve tested it with apache and lighttpd.