12
Wed, Jun
4 New Articles

Mobile App Development: Do You Hear Me Now?

Development Tools / Utilities
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

What you’re hearing is the crowd cheering as you cross the finish line.

Looking back over the delivery of the requirements of your project, you’re beginning to think that maybe this mobile development stuff isn't quite as difficult as you once thought. So far, you have completed the first three requirements:

  • Real-time access to IBM i data and local storage when no mobile connectivity is available
  • Ability to take pictures, store them on the device, and upload them
  • Ability to retrieve and store geolocation information

All you have left is requirement #4:

  • Ability to record audio for taking “audio notes”

The sweet smell of victory wafts through the air! Smart programmers leverage what they know and try to follow DRY (Don't Repeat Yourself) principles (unless they’re being paid by the line of code!) so you think of the key components of the brilliant solutions you have delivered thus far:

  • Local storage of JSON formatted text
  • Use of Web RTC GetUserMedia methods

It's like Lex in Jurassic Park when he gets in front of that UNIX system: “I know this!” Yeah, we know this. Let's get started.

Capturing Audio

Capturing audio is a wee bit different than capturing an image. On the face of it, you'd think it would be more simple, but looks are deceiving! What made the image capture so slick was the HTML5 canvas object that the image was rendered to and then “exporting” that canvas image into a Base64 encoded string. Image to string...bada bing! But the audio capture has to be stored somewhere “as is” that we know what “is” is: an .ogg file on the local file system. Hmmm. More challenges.

Step 1: The Wizard of .ogg

Normally the “default” recording format for audio on digital devices is .wav. PCM (Pulse-code modulation) audio in a .wav container is the “standard” way to save audio on a computer, but a .wav file can be huge. Why? Compression algorithms, like those that compress audio into an MP3 (the most common container), are patented and licensed. Generally, that means that only the “spend money” command can wrest the code to compress the audio from the hands of the copyright holder. But MP3 is a published standard, and the patent trolls have slowly backed off to the point where non-commercial use isn't aggressively targeted. In any case, encoding a .wav into an MP3 container usually takes a third-party library (perhaps you have heard of LAME). So it looks like we need to stray outside of the “standard” browser toolkit if we want an MP3.

Several browsers have adopted the Vorbis/Opus format. This is a lossy format that performs well and is pretty ubiquitous across platforms and browsers. And, even though the format is covered by patents, the trolls look for other encroachments since the patents that might cover the Vorbis/Opus standard are royalty-free (the trolls lose!).

Capturing a Vorbis/Opus formatted audio stream in a “.ogg” container is as easy as capturing an image. It all starts with this:

navigator.getUserMedia(constraints, startRecording, errorCallback);

Constraints are typically something like {"audio": true, "video": "false" } and the two callbacks are for a successful initialization or/a failure.

Step 2: Save the Recording

If the API is successful in accessing the recording device, then the end user will be prompted to allow access, just like with the camera capture. The next step is...what is the next step? At this point, we need to do something with the captured audio. Unlike our camera capture, where we could use the canvas object to display the video until we captured the snapshot, we want to record the audio and then save it to a file for later playback and/or upload. Our canvas object had a canvas.toDataURL method we could call to render the data in the canvas object. What about our audio?

So a brief aside here to outline the journey taken to the solution. My original hope was that I could just record the audio to an object and then automatically save it to a file. So I naturally went to look for a file-writing API and easily found one that dates back to 2011 (2009 spec). So the steps were to get the BLOB that contained the audio and write it out to the local file system. The success callback takes a stream object as a parameter, and that can be written to the file system, right? Wrong! The very cool file system APIs were never formally adopted and, at least for file writing, died due to lack of implementation across browsers in 2014.

There are several third-party libraries that can help with the capture and storage of audio, but I wanted to avoid third-party libraries. Just before I was going to tuck my tail between my legs and crawl back into the boss's office to tell her I couldn't meet the last requirement (I promised, remember?), I discovered some bleeding-edge code that bailed me out. The Media Capture Task Force, a team populated by both WebRTC and Device API working groups, had proposed a standard that only Firefox had originally implemented. But within the last month, Chrome had also implemented the API in the latest version of the browser (well, version 49 and forward) in April 2016. The jury is still out on Safari, Opera, and Edge, but Chrome is the 800-pound gorilla in the browser space, so it’s just a matter of time. In any case, our Android smartphones use Chrome. “The crops are saved!”

So, the MediaRecorder API comes to the rescue:

var mediaRecorder = new MediaRecorder(stream); // Sweet! It takes the stream object from our callback function!

var chunks = []; // store our accumulated recording data in an array

mediaRecorder.ondataavailable = function(aud) {
      chunks.push(aud.data);
};

When we’re done recording, we'll want to create a BLOB so we can save the recording:

var blob = new Blob(chunks, {type: "audio/ogg"});
var audioURL = window.URL.createObjectURL(blob);

downloadLink.href = audioURL;
audioElement.src = audioURL;
downloadLink.innerHTML = 'Download the file';

At this point, we have a link we can click, and it, in turn, prompts the user to save the file locally. You could also push that file up to the server with a standard file transfer. Yet another approach would be to convert your BLOB to a Base64-encoded string and store it in local storage and then decode it when you retrieve it. The challenge is that the encoded audio, even in a lossy format like Vorbis, can still be pretty big (and you know how salespeople can talk!). You may exceed the 5mb limit on local storage.

Done!

Success! Your salespeople can record notes on their nifty web application. Your tasks are complete, and you can rest a bit…before your boss gives you the next big challenge.

Peter Helgren

Peter Helgren is programmer/team lead at Bible Study Fellowship International. Pete is an experienced programmer in the ILE RPG, PHP, Java, Ruby/Rails, C++, and C# languages with more than 25 years of system 3X/AS400/iSeries/IBM i experience. He holds certifications as a GIAC certified Secure Software Programmer-Java and as an MCSE. He is currently executive vice president on the COMMON Board of Directors and is active on several COMMON committees. His passion has always been in system integration, and he focuses on open-source applications and integration activities on IBM i. Pete is a speaker/trainer in RPG modernization, open-source integration, mobile application development, Java programming, and PHP and actively blogs at petesworkshop.com.


MC Press books written by Peter Helgren available now on the MC Press Bookstore.

Open Source Starter Guide for IBM i Developers Open Source Starter Guide for IBM i Developers
Check out this practical introduction to open-source development options, including XMLSERVICE, Ruby/Rails, PHP, Python, Node.js, and Apache Tomcat.
List Price $59.95

Now On Sale

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

Support MC Press Online

$0.00 Raised:
$

Book Reviews

Resource Center

  • SB Profound WC 5536 Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. You can find Part 1 here. In Part 2 of our free Node.js Webinar Series, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Brian will briefly discuss the different tools available, and demonstrate his preferred setup for Node development on IBM i or any platform. Attend this webinar to learn:

  • SB Profound WP 5539More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.

  • SB HelpSystems ROBOT Generic IBM announced the E1080 servers using the latest Power10 processor in September 2021. The most powerful processor from IBM to date, Power10 is designed to handle the demands of doing business in today’s high-tech atmosphere, including running cloud applications, supporting big data, and managing AI workloads. But what does Power10 mean for your data center? In this recorded webinar, IBMers Dan Sundt and Dylan Boday join IBM Power Champion Tom Huntington for a discussion on why Power10 technology is the right strategic investment if you run IBM i, AIX, or Linux. In this action-packed hour, Tom will share trends from the IBM i and AIX user communities while Dan and Dylan dive into the tech specs for key hardware, including:

  • Magic MarkTRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now!  Request Now.

  • SB HelpSystems ROBOT GenericForms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.

  • SB HelpSystems ROBOT GenericIT security is a top priority for businesses around the world, but most IBM i pros don’t know where to begin—and most cybersecurity experts don’t know IBM i. In this session, Robin Tatam explores the business impact of lax IBM i security, the top vulnerabilities putting IBM i at risk, and the steps you can take to protect your organization. If you’re looking to avoid unexpected downtime or corrupted data, you don’t want to miss this session.

  • SB HelpSystems ROBOT GenericCan you trust all of your users all of the time? A typical end user receives 16 malicious emails each month, but only 17 percent of these phishing campaigns are reported to IT. Once an attack is underway, most organizations won’t discover the breach until six months later. A staggering amount of damage can occur in that time. Despite these risks, 93 percent of organizations are leaving their IBM i systems vulnerable to cybercrime. In this on-demand webinar, IBM i security experts Robin Tatam and Sandi Moore will reveal:

  • FORTRA Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:

  • FORTRAManaging messages on your IBM i can be more than a full-time job if you have to do it manually. Messages need a response and resources must be monitored—often over multiple systems and across platforms. How can you be sure you won’t miss important system events? Automate your message center with the Robot Message Management Solution. Key features include:

  • FORTRAThe thought of printing, distributing, and storing iSeries reports manually may reduce you to tears. Paper and labor costs associated with report generation can spiral out of control. Mountains of paper threaten to swamp your files. Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing. Manage your reports with the Robot Report Management Solution. Key features include:

  • FORTRAFor over 30 years, Robot has been a leader in systems management for IBM i. With batch job creation and scheduling at its core, the Robot Job Scheduling Solution reduces the opportunity for human error and helps you maintain service levels, automating even the biggest, most complex runbooks. Manage your job schedule with the Robot Job Scheduling Solution. Key features include:

  • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

  • LANSAWhen it comes to creating your business applications, there are hundreds of coding platforms and programming languages to choose from. These options range from very complex traditional programming languages to Low-Code platforms where sometimes no traditional coding experience is needed. Download our whitepaper, The Power of Writing Code in a Low-Code Solution, and:

  • LANSASupply Chain is becoming increasingly complex and unpredictable. From raw materials for manufacturing to food supply chains, the journey from source to production to delivery to consumers is marred with inefficiencies, manual processes, shortages, recalls, counterfeits, and scandals. In this webinar, we discuss how:

  • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

  • Profound Logic Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

  • SB Profound WC 5536Join us for this hour-long webcast that will explore:

  • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: