Category: Mobile App Development

Solved – Unable to retrieve audio/video file recorded and saved in Ionic 2 App

AgilizTech works on exciting web and mobile app projects for customers around the globe. We develop both native and hybrid apps for our customers.

Recently, while building a hybrid app on the Ionic 2 Framework, our developers encountered an issue in coding an audio/video file record and retrieval. The initial functionality seemed simple, but that’s where Cordova threw spanner in the works. We had researched extensively online and weren’t able to find any solution. So, when our developers toiled for a few hours, and successfully solved it, we decided to share the solution and let others benefit from it.

For this project, our team had used the Cordova plugin – cordova-plugin-media-capture. This plugin provides access to the device’s audio, image, and video capture capabilities.

It is super easy to use. So, to record a video, we used the code:


navigator.device.capture.captureVideo(
	(result) => {
		console.log(result);
		console.log(“Video captured Successfully”);
		// Your code goes here.
	} ,
	(error) => {
		console.log(error);
		console.log(“Video captured failed”);
	}
);

Everything looked pretty simple. The video was getting recorded using the device’s recording application. On Android, the code worked like a charm. However, the team ran into issues in the iOS device, as the saved file was not getting played.

While debugging the issue, we observed the Media Capture object in captureSuccess.
In Android, the file was getting stored in a persistent location, so the code worked fine when we tried to retrieve the saved file.

But in iOS device, the file got stored in a temporary location!
Result, we were unable to play the saved file in the application.

Solution?

Once we figured out the issue, the solution was simple. We just had to copy the file from this temporary location to a persistent location.

We chose a persistent location that covered both Android and iOS. The File plugin provided such an alias: cordova.file.dataDirectory

navigator.device.capture.captureVideo(
	(result) => {
	  console.log(“Video captured Successfully”);
	  var fileName = result[0].name;
	  var dir = result[0].localURL.split(“/”);
	  dir.pop();
	  var fromDirectory = dir.join(“/”);
	  var toDirectory = cordova.file.dataDirectory;
	  File.copyFile (fromDirectory , fileName , toDirectory , fileName).then( res =>{
			console.log(“File successfully copied”);
			// Your code goes here.
		});
     	  } ,
	(error) => {
		console.log(error);
		console.log(“Video captured failed”);
	}
);

Everything fell into place after that.

Summarising, to make the recording and retrieval possible, just save the file in a persistent location that’s common to both Android and iOS.

Have you faced a similar issue while building an app in Ionic 2? Do let us know in the comments!

AgilizTech is working on some pretty cool Hybrid Apps powered by Ionic 2. Would you like to know more?

Contact Us

Solved: Click Handler Reaction Delay in Ionic 2

I am happy to announce the solution for the click handler reaction delay in Ionic 2. As an Ionic developer, you would be familiar with the infamous 300 ms delay that occurs, when a user attempts to tap and register a click on the hybrid mobile app you painstakingly built with Ionic 2.

Cue in some dramatic visualization…
Click Handler Reaction Delay in Ionic 2

Moving on…

The delay in registering the tap is the time lag taken by the click handler in reacting. And this delay is specific to ion-col and ion-items.

In their blog and the official documentation, the Ionic team has discussed about the issue in detail. The reason for this delay is said to be the Ionic click blocker, that blocks any interaction until a transition is completely done. This is to recognize if the user wants a click event or double click event on touch devices.

How does this affect the user?

This makes the application slow, thus affecting user experience. The issue is more prominent on iOS devices.

Solved: Click Handler Reaction Delay in Ionic 2

The solution to this issue is quite simple. All you need to do is this:

Add the ‘tappable‘ directive to your element.

For example:

<ion-item tappable (click)=“myClickHandler()”>
    // Your code goes here
</ion-item>
Note: We recommend you add the ‘tappable‘ directive to the click handlers of elements which are not normally clickable.

Hope this post helped you overcome this rather frustrating issue in Ionic 2.

Happy Coding!!

 

AgilizTech is working on some pretty cool Hybrid Apps powered by Ionic 2.

Would you like to know more?

Contact Us

Features of Android Nougat

Test driving the latest from the Android stable – Android Nougat

To say that Android has been a smashing success is an understatement. Emerging as the winner among stiff competition, from the likes of Symbian Anna, Windows OS, and Blackberry, Android has been giving iOS a run for its money since it first launched in Sep 2008. So much so that, as of Nov 2016, Android has hit a market share record, with 9 in every 10 smartphones using it. Android’s dream run is supported by cheap smartphones and wide developers’ base that populate Google’s Play Store with multiple apps.  And 2017 is expected to further raise the market share, with Android Nougat being rolled out to select devices.

Android Nougat Highlights

Android Nougat comes packed with exciting new features. And we at AgilizTech, decided to take it for a little test-drive after its April debut on Samsung S7 device.

Split-screen mode

The split-screen mode is a great option for the multi-taskers, as it allows you to open two apps side-by-side. How far it helps to boost productivity is yet to be discovered, but it sure is better than continuously toggling two app windows.

Android Nougat - Split screen

App quick switch

This is another cool feature from Nougat, where you can quickly switch between more than two apps by double tapping the Recents key. This is even more helpful as certain apps do not support the Split-screen feature.

Android Nougat - Quick App Switch

Notification redesign

Now alerts and notifications from apps can be responded to straight from the home-screen. For example, you can now respond to WhatsApp messages without being redirected to the WhatsApp screen.

Android Nougat - Notification redesign

 

Multi-language support

By enabling multiple languages, you can toggle between languages while using keyboards. This means, you can type in English UK and Español while sending a message.

Android Nougat - Multi language support

Doze on the go

Doze was introduced with Marshmallow and has now evolved into an even better feature in Nougat, allowing users to squeeze till the last drop of battery power. Using the Battery Optimization feature in Settings, Doze can control the battery usage of each app and modify them to suit your battery saving strategy.

Android Nougat - Doze on the go

Data saver

Some apps consume tons of data by running in the background, thus burning a hole in your pocket. With Data Saver’s granular controls, you can permit/restrict individual apps from accessing data while running in the background.

Android Nougat - Data saver

Improved security

Aren’t we all suspicious of those pesky apps that require permissions to umpteen folders in which they have no business? Nougat has been armoured for such apps, with the scoped folder access feature, that permits apps to use only select folders. Facial recognition too has arrived in Android, with the Trusted Face screen unlock feature made available in select devices.

Android Nougat - App Permissions

Improved graphics

This one is for the gamers, as your in-game graphics get a solid boost, with Nougat supporting the Vulkan API. Be ready for high-performance 3D graphics right on your phone.

Android Nougat - Graphics

Nougat Reception

Nougat has been receiving increasingly positive reviews from industry observers. Engadget and PCAdvisor have lauded Nougat, calling it an efficient OS that’s pro-multi-tasking. Market adoption too seems to be decent – Nougat’s adoption is on a hike with 7.6% of devices that access Google Play running Nougat as of May 2017.

Android Nougat - Market Share

Source: App Brain

In the last 30 days, a 37% surge has been seen in Nougat adoption, but we might have to wait for a few more months for the roll-out to complete, before seeing massive traction in adoption rates.

What’s on the cards, Google?

With the Nougat roll-out initiated in April-May, Google has moved on to Android O (suspected to be Oreo) and is working towards its announcement in the impending Google I/O 2017 summit in the US. Also, rumours have surfaced on the Magenta-microkernel based real-time operating system,

Despite these developments, it is safe to say that Nougat is going to stick around for a while given its rich features. As more new phone models come out in 2017, enabling the VR and Daydream features of Nougat, it is poised to be the most-preferred Android OS version ever.

 

Transform your mobile app with AgilizTech!

Contact us

 

Close Bitnami banner
Bitnami