I'm building a PWA and have the following hooked event
let isCompat = "onbeforeinstallprompt" in window,
isSamsung = /Samsung/i.test(_ua)
if (!window.matchMedia('(display-mode: fullscreen)').matches
&& !window.matchMedia('(display-mode: standalone)').matches
&& !screenfull.isFullscreen
) {
console.log(isCompat, isSamsung, screenfull)
if(isCompat) {
window.addEventListener('beforeinstallprompt', (event) => {
...
btn.addEventListener('click', () => {
let s = invite.prompt()
if(invite.userChoice) ...
}, { once: true })
event.preventDefault()
invite = event
})
} else {
if(isIDevice) {
....
} else if(screenfull.isEnabled) {
...
}
}
The logic executes successful on latest chrome for android on a Samsung J5 1st generation. But not on the latest updated of Samsung Internet Browser 16.2.1.56 regardless of the fact that isCompat and isSamsung is true
My research so far shows that is should be firing so I am not sure why. Is there a shim that can be implemented to make it work on Samsung Internet?
an example and be viewed at https://622f59ba2b54ab2a844cf515--goofy-jackson-e12a89.netlify.app/
I am trying to stream a video element via my phone camera and using WebRTC. I do this as follows (snippets):
<video id="yourVideo" autoplay muted playsinline></video>
var yourVideo = document.getElementById("yourVideo");
// ...
navigator.mediaDevices.getUserMedia({audio:false, video:true}).
then(function(stream){
console.log(stream)
yourVideo.srcObject = stream
pc.addStream(stream)
})
.catch(function(error){
console.log(error)
})
This works fine in the browser and my video/camera is displayed. However, on the phone it returns me the error DOMException. I cannot find any information that can explain this.
Running it Ionic V1.X
ionic cordova run android
When I run navigator.mediaDevices this is what I see:
Is it perhaps permission related? If so, how can I fix this?
You will have to first get the device source and then try for the stream, try this way
var videoElement = document.getElementById("yourVideo");
var videoSrc = undefined;
navigator.mediaDevices.enumerateDevices()
.then(getDevices).then(getStream).catch(handleError);
function getDevices(deviceInfos) {
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
if (deviceInfo.kind === 'videoinput') {
videoSrc = deviceInfo.deviceId;
break;
}
}
}
function getStream() {
navigator.mediaDevices.getUserMedia({
video: {
deviceId: {
exact: videoSrc
}
}
}).
then(gotStream).catch(handleError);
}
function gotStream(stream) {
videoElement.srcObject = stream;
}
function handleError(error) {
console.log('Error: ', error);
}
I make an apps using Appcelerator (Titanium SDK).
and I have a problem when open camera, I already set camera permission in tiapp.xml.
And I've try use a source from kitchen Sink titanium.
Here's my code
var win;
function fireUpTheCamera() {
if (Ti.Platform.osname === 'android'|| Ti.Platform.osname == "iphone" || Ti.Platform.osname == 'ipad') {
win.removeEventListener('focus', fireUpTheCamera);
}
Titanium.Media.showCamera({
success:function(event) {
var cropRect = event.cropRect;
var image = event.media;
Ti.API.debug('Our type was: '+event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
{
var imageView = Ti.UI.createImageView({
width:win.width,
height:win.height,
image:event.media
});
win.add(imageView);
}
else
{
alert("got the wrong type back ="+event.mediaType);
}
},
cancel:function() {
},
error:function(error) {
// create alert
var a = Titanium.UI.createAlertDialog({title:'Camera'});
// set message
if (error.code == Titanium.Media.NO_CAMERA)
{
a.setMessage('Please run this test on device');
}
else
{
a.setMessage('Unexpected error: ' + error.code);
}
// show alert
a.show();
},
saveToPhotoGallery:true,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
});
}
function cam_basic(_args) {
win = Titanium.UI.createWindow({
title:_args.title
});
if (Ti.Platform.osname === 'android'|| Ti.Platform.osname == "iphone" || Ti.Platform.osname == 'ipad') {
win.addEventListener('focus', fireUpTheCamera);
} else {
fireUpTheCamera();
}
return win;
};
module.exports = cam_basic;
when I finish capture picture and press the OK button, it's always restart application without any error message, also in the log.
I'm using SDK 6.0.0GA.
Please give me some help, and what's wrong with my code.
Before firing up the camera you have to ask the end user for permissions. I'm using this snippet and it works with Ti-5.4.0.
if(Ti.Media.hasCameraPermissions())
fireUpTheCamera();
else
{
Ti.Media.requestCameraPermissions(function(permission)
{
if(permission.success)
fireUpTheCamera();
else
alert('Please Provide permission first');
});
}
Since Titanium sdk 5.1 you need to request runtime permission as well to use the camera.
See here: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media-method-requestCameraPermissions
When I tap a textfield at the bottom of the screen, the keyboard appears and hides the active element. On iOS, it works perfect.
I'm able to scroll the form, so the textfield is in the visible area, but that's not nice at all. Am I doing something wrong or is this a known bug as I have the same behaviour in this example from Sencha Touch itself: docs.sencha.com/touch/2-1/touch-build/examples/forms/
If on this form:
I tap in the textfield of "Bio", the keyboard hides the textfield, instead of scrolling the textfield up to have it visible while typing:
This is definitively a known-issue, I've seen this many times on Android. The only thing you can try to do is listen for a focus event on the input field and then scroll to the element. You might have to play around with the right Y-value, which suits your situation best.
{
xtype: 'textareafield',
name: 'bio',
label: 'Bio',
maxRows: 10,
listeners: {
focus: function(comp, e, eopts) {
var ost = comp.element.dom.offsetTop;
this.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost);
}
}
},
This works for me. If you need any help implementing this, let me know!
Less intrusive solution:
on Application launch method add the following lines:
launch: function() {
if (Ext.os.is.Android) { //maybe target more specific android versions.
Ext.Viewport.on('painted', function() {
Ext.Viewport.setHeight(window.innerHeight);
});
}
// ... rest of the launch method here
}
This works just fine on many cases I have been testing on. Both Cordova and Chrome implementations. You just need to take care, in case of Cordova/Phonegap app, that the fullscreen is set to false. (Tested on Cordova 3.5)
The "Ext.Viewport.on('painted'"-solution gave me scrolling problem. The whole page could not be scrolled after orientation change, because viewport height would then be larger than window height.
(Ext.Viewport.getHeight() will not be the same as Ext.Viewport.getWindowHeight() after orientation change.)
Made a work around using overidden input:
Create a file app/overrides/field/Input.js
Ext.define('myApp.overrides.field.Input', {
override: 'Ext.field.Input',
initialize: function() {
var me = this;
// Solves problem that screen keyboard hides current textfield
if (Ext.os.is.Android) {
this.element.on({
scope : this,
tap : 'onTap',
});
}
me.callParent();
},
onResize: function(input) {
var me = input;
//if input is not within window
//defer so that resize is finished before scroll
if(me.element.getY() + me.element.getHeight() > window.innerHeight) {
Ext.Function.defer(function() {
me.element.dom.scrollIntoView(false);
}, 100);
}
},
// Solves problem that screen keyboard hides current textfield in e.g. MyTimeRowForm
//old solution with Viewport.on('painted', gave scroll problem when changeing orientation
onTap: function(e) {
me = this;
window.addEventListener( "resize", function resizeWindow () {
me.onResize(me);
window.removeEventListener( "resize", resizeWindow, true );
}, true );
},
});
And add it to app.js
requires: ['myApp.overrides.field.Input']
You may subscribe on show/hide events of keyboard and compensate input's offset. It's been tested on Android 4.2 & 4.4 (HTC One & Nexus 7).
if (Ext.os.is.Android4 && Ext.os.version.getMinor() >= 2) {
(function() {
var inputEl = null;
var onKeyboardShow = function() {
setTimeout(function() {
if (!inputEl) {
return;
}
var currentClientHeight = window.document.body.clientHeight;
var elRect = inputEl.getBoundingClientRect();
var elOffset = elRect.top + elRect.height;
if (elOffset <= currentClientHeight) {
return;
}
var offset = currentClientHeight - elOffset;
setOffset(offset);
}, 100);
};
var onKeyboardHide = function() {
setOffset(0);
};
var setOffset = function(offset) {
var el = Ext.Viewport.innerElement.dom.childNodes[0];
if (el) {
el.style.setProperty('top', offset + 'px');
}
};
document.addEventListener('deviceready', function() {
document.addEventListener("hidekeyboard", onKeyboardHide, false);
document.addEventListener("showkeyboard", onKeyboardShow, false);
}, false);
Ext.define('Ext.field.Input.override', {
override: 'Ext.field.Input',
onFocus: function(e){
inputEl = e.target;
this.callParent(arguments);
},
onBlur: function(e){
inputEl = null;
this.callParent(arguments);
}
})
})();
}
It worked better for me
{
xtype: 'passwordfield',
name: 'pass',
listeners: {
focus: function (comp, e, eopts) {
var contr = this;
setTimeout(function () {
if (Ext.os.is('Android')) {
var ost = comp.element.dom.offsetTop;
contr.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost, true);
}
}, 400);
}
}
}
I want to traverse through each file in the SD card inside all the directories and sub directories using the FILE API of phonegap (which is the w3c file api actually). I have to perform a certain set of operations on these files by looking at their nature. I donot want to search for specific types of files, but traverse through each file in a sequential manner.
Can someone please help me with this? Just a basic loop framework with the necessary requirements for the traversal would be a great help.
Thank You in advance.
I think the following code should work:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onRequestFileSystem, fail);
function onRequestFileSystem(fileSystem) {
var directoryReader = fileSystem.root.createReader();
directoryReader.readEntries(onReadEntries, fail);
}
function onReadEntries(entries) {
var i;
for (i = 0; i < entries.length; i++) {
if (entries[i].isFile == true) {
// ...
}
if (entries[i].isDirectory == true) {
var directoryReader = entries[i].fullPath.createReader();
directoryReader.readEntries(onReadEntries, fail);
}
}
}
http://www.c-sharpcorner.com/UploadFile/e83792/filesystem-directoryentry-objects-in-phonegap/
scan : function(url,fileType,callback)
{
var fileTypeCollection = [];
var defer = $q.defer();
url.forEach(function(element, index)
{
//requestLocalFileSystemURL
log(element);
window.resolveLocalFileSystemURL(element,onRequestFileSystem, fail);
log("Ends resolve");
});
function onRequestFileSystem(fileSystem)
{
var directoryReader = fileSystem.createReader();
directoryReader.readEntries(onReadEntries,fail);
} /*onRequestFile Ends*/
function onReadEntries(entries)
{
if(entries.length==0)
{
log("Entries Length....Resolving");
defer.resolve(fileTypeCollection);
}
else
{
entries.forEach( function(element, index)
{
if (element.isDirectory === true)
{
// Recursive -- call back into this subdirectory
onRequestFileSystem(element);
}
if(element.isFile == true)
{
fileType.forEach(function(type)
{
if(element.name.indexOf(type) != -1)
{
fileTypeCollection.push(element);
}
});
} /*is File ENds*/
}); /*Entries For Each Ends*/
}
} /*OnRead Ends*/
function fail(resp)
{
log(resp);
defer.reject();
} /*Fail Ends*/
return defer.promise;
} //Scan Function Ends
try this. remove the promises if u wish and use a callback.promises is kind of broken. if you can fix then its ok else use a callback after push for FileType