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

AgilizTech stirs a ‘racquet’ with the Passion League App

Techies by weekdays and racqueteers by weekends, that’s the Agilians for you! With our innate zeal for sports and passion for technology, we decided to combine the two and develop the best-ever app for sports management, Passion League. The journey flagged off last month and on Sunday, 18 Dec, we were able to put our web app to a pilot test, at the Bangalore Racqueteers tournament. The event was hosted by CoachDirect at Gopalan Sports Centre, Bangalore.

AgilizTech Passion League App

AgilizTech Passion League App

We decided that this was a prime opportunity to test our app in the real world, capture real-time data and get solid feedback from the tournament participants. And so, on Sunday, the AgilizTech team visited the arena armed with racquets, determination and, of course, the Passion League App.

Coach Direct had provided us with player information and seeding details previously, so we were set up pretty well to watch the action and quickly feed in the wins and losses. With our web app, the players could see the scores and the opponents’ details, right on their mobile screens.

Also, we gathered copious feedback.

While the participants were thrilled with our app, they suggested quite a few enhancements. We took extensive notes and will be working on them to improve our app, thus helping sportspersons manage their activities better with the PassionLeague app.

Our team had a great time at the court too. Agilians participated in large numbers at the Table Tennis and Badminton events. We made it to Round 2, but unfortunately couldn’t progress further. Nevertheless, what mattered is that we participated, learnt and had a whale of a time!

The A Team!

The A Team!

And you know what? We would love to meet you at the court. Game for a challenging duel of table tennis or badminton? Meet the Agilians in the next tournament then! You can find the details of all the upcoming tournaments here – http://passionleague.in/

Passion League Official Website

Passion League Official Website

Game on? See you at the court then!

AgilizTech Stepout2Play Hackathon 2016

Hacking the Agilian way, to build Stepout2Play

AgilizTech conducted a hackathon on 26 and 27 November 2016 to re-engineer the Stepout2Play site.

At AgilizTech, one of our initiatives is to combine our passion for sports and technology, and create new avenues for individuals to actively pursue their favorite sport. And our upcoming flagship product, Stepout2Play, is the one-stop shop for all things sport.

With this, individuals can stay tuned to the latest happenings in the world of sports, enroll into clubs and actively participate in sporting events.

The Stepout2Play Hackathon is one such event conducted by AgilizTech.

stepout2play-hackathon-2016-agiliztech-1

The Stepout2Play Hackathon 2016 Team

Over a two-day time-frame, our team of programmers, consisting of Shyam, Kishor, Agilan, Meghana, Smita, Guddu, Niraj and Gowtham, collaborated to re-visualize and rebuild the website. The event was conceptualized and presided by the MD & CEO, Ganesh Babu.

The Hackathon was immensely fruitful, as the team effectively strategized and achieved major milestones in development. Also, as the event stimulated the creative-thinking abilities of the team and enabled AgilizTech to actively pursue its innovation-based agenda, the Hackathon was an all-round success.