1.2 Use Crosswalk With Ionic
In this lesson, I’ll show you how to build a small WebRTC app for Ionic. I’ll show you how to set up a project, how to access the WebRTC library from your app, and how to build and compile to a
.apk file. At first, this app won’t work, since its features are not supported by the default WebView, but I’ll show you how to add Crosswalk and create a working app.
The following command is all that’s needed to install the Crosswalk WebView to your Ionic project.
ionic plugin add cordova-plugin-crosswalk-webview
1.2 Use Crosswalk With Ionic
[SOUND] Hello everyone, this is Reggie Dawson. Welcome to the Use Crosswalk with Ionic coffee break course for Tuts Plus. Ionic is a hybrid app development platform that uses web views as the container for our apps. For the most part with ionic, we can build any type of that we can think of, although sometimes certain features remain beyond ionic's capabilities. For example, Web RTC is a technology that allows us to just use the browser to make and receive audio and video calls. You can even pass data between peers with this free technology, that is relatively easy to implement. The only thing you need to use Web R.T.C. is a browser that supports it. With the web view that ionic uses we do not have the ability to use Web RTC. Fortunately cross-walk exists as an alternative. Crosswalk replaces the stock web view in your app with one that supports many advanced browser features. Cross-walk also allows us to debug our apps while running on a connected mobile device. Now although cross- walk offers all these features. There's a drawback the use of cross walk crease the size of your app considerably. This may scare off potential users of your app if you intend to release it although most users may not notice the increase size cross-walk exists as a Cordova plugin that we can install into an ionic project. Since ionic is built on top of Cordova we can install any plugins that work with Cordova. In this video, we're going to build a small mobile app that uses Web RTC to grab local video from the devices microphone and camera. This will not work by default and ionic, but after we install cross-walk the app will work. First let's install ionic. All we need is nodeJS installed, after that we can use MPM to install ionic. Once we have ionic installed, we create our project by navigating to the folder where we want to save our project. Ionic start crossDemo blank will create a folder name crossDemo from the blank ionic template. Then we will go into the www folder of our project and open the index.html file. First we will add a meta tag to this file. This make sure that the white list plugin doesn't give an error preventing your app from running. Then we'll add a script reference for controllers.js file. This file is where we will do all the heavy lifting of this small app. Then we will change the name of the NG app to match what we will name our app in a moment. Then we will change the title to crosswalk demo. Next, we will add NG controller to our ion content tag. This specifies that the crossController will be attached to index.html. After that we can add a button to initiate the capture from our camera. This button uses ng-click, which is the way we attach a vid listeners for our click handlers in angular. Finally, we will add a video element to hold our video stream. This video element has the autoplay attribute in order to make the video stream live. If we didn't add this, all we would see is a still image. You may also notice that we haven't added a source for our video, as we will add this from our controller. After that, our index.html page is done. Next, we'll to go to app.js inside of our JS folder. All we will do in this file is create a variable to hold our angular module. This is not necessary and just avoids having to write the angular module definition repeatedly, then we will add our module to our run block. Next we will create our controllers dot JS file inside of our JS folder. The first thing we will do on this file is create our cross controller. This is a standard Angular controller with scope added as a dependency. Next we will add a constraint object. This object let you pass options to the Web RTC connection, such as if there is audio or video or even allowing us to set the resolution of our video. In this case, we will just enable audio and video then we will grab our video element. After that we will add our success call back. The get user media method will return to stream, which we will deal with in our success callback, there we will set the video element source to our stream. An interesting thing to note is that our browser was Firefox or Opera, we could set the source directly. Since the default web view as well as cross walk are chrome based, we have to use the window URL to create object URL method to apply our source. Then we will add our error call back. The error callback gets past the error code returned, if there is a problem. If there is, we are going to log the error. Finally, we shall add our grabVid function that executes when we click the button. This function uses the GetUserMedia method to grab a stream from our microphone and camera. Normally I would use a shim to address the inconsistencies in the method across browsers, but I am just building for Android. As a result, I'm just using the prefix for Chrome. After that our project is done for now. Save all of the files, and then run ionic serve from inside your project folder to preview the app in a browser. Before we run ionic serve make sure you're in your project folder. If you click on the get video button in the browser should as you do allow access to a camera microphone, if you have them. I couldn't really talk while the app was running, I would have got a feedback loop, but as you can see the app does work. Now I'm gonna connect my phone through USB, and we're going to use Ionic Run. You'll need to install the Android development kit for this to work properly. I've included a link on how to do this as it can be a little tricky to install everything. After we add the Android platform, I will use Ionic Run. Now using a quote plug in called visor, this is actually mirroring my mobile device where the app is running on. Now I'm going to try to use this app to get video. As you can see it does not work. There are actually two problems that are causing this app to fail. One is that we don't have the permissions to use the camera microphone. The second is that Web R.T.C. is not supported by the default web view. The first thing we're going to do is install a cross-walk, ionic plugin add Cordova plugin cross-walk web view. Now the one last thing we need to do before we can use our app is add permissions for our hardware. Navigate to the platforms folder and then to the Android folder. Open up the Android manifest file. First we will add permissions for recording. This will allow us to use the microphone to capture audio. Then we add our permissions to modify audio settings. And then finally, we have permission to use the camera. All of these permissions are needed to make the Web RTC app work. After that we can save all the files in our project folder, and then we can run ionic build in our project folder. This time the cross-walk web view was downloaded and installed in our project. It also generated two APK's, one for ARM processors the other for X86. The last thing to take note of is that your APK will now be much larger due to the added web view. After that we can use ionic run again. Now, as you can see we got an error here, and that is because this application is already installed on our mobile device. I went ahead and uninstalled the app for my device, and now run the ionic run command again. As you can see, it takes a long time for the app to be pushed to the device, because of the increased size. Now that we have cross walk, if you press the get video button it should work. As you can see it work I just had to set it down, because it would create a endless echo loop. After that we now have a basic web RTC app that will run on our device. This has been a very simple example, but should give you plenty of ideas of how you can use Crosswalk in your own projects.