Build React Native Apps: Demo by MEDL Mobile

App developer MEDL Mobile has built numerous custom apps for both Android and iOS devices. Its new open-source project uses React Native and Wowza GoCoder to build module-based custom mobile apps. From the 2017 NAB Show in Las Vegas, production manager Mike Gilmore and lead engineer Hugo Nagano lead this video demo on building an app with React Native:

Full Video Transcription

Mike Gilmore:

Hi, I'm Mike Gilmore. I'm a production manager with MEDL Mobile. We make custom apps and software, and do a lot of product design, product management. We built a lot of apps, started apps. Today, we're very excited to talk to you about a project that we open-source—this is one of our open-source pieces. It's utilizing React Native and Wowza GoCoder. So, before we get into the details of that, I'd like Hugo to introduce himself, and kind of his background, and a little bit more about GoCoder and React Native models.

Hugo Nagano:

All right. I'm Hugo; I work at MEDL Mobile, as well. I'm a lead engineer there. So, we're pushing forward to getting to the open-source developer community. We found one way, while we were working on a project when we were working with Wowza GoCoder. And that's where we started—that's where I started, I find a parity, found a parity of React Native would give us for—I’m sorry.

Mike Gilmore:

So, in general, what we were talking about is, we were using GoCoder to work on a multiple-platform client project. So Hugo came to us with the idea of, well, we should probably do a module so we could separate out the more complex development, and still allow for the user interface to be built out and to really tighten up the project. And then I think once we dove in to GoCoder itself and found out how powerful it was, we decided to isolate a small subset of the features.

Hugo Nagano:

Right.

Mike Gilmore:

So we get people up and going very quickly, and we wound up finding, it solved a lot of problems. It connects great to the Streaming Engine, and we were able to layer in many other features, and use this for other projects now. So it is available, it's open-sourced; I know there's well over 300 downloads already. And I think, just like with any open-source project—day one when we came out, we had a few comments, but other than that, it's very stable. And what we're going to do is, we are going to walk you through how to get this up and running.

Hugo Nagano:

Right.

Mike Gilmore:

All right. So.

Hugo Nagano:

The setup should be very simple. We have a GitHub page; we have a instructions under “read me.” Go ahead, sorry. Following these instructions, it should be very easy to get going and start, you know, broadcast, if you have a Streaming Engine going. And you can—if you scroll down a little bit—if you set up the configurations correctly, just using this package, you should be able to stream straight to the Streaming Engine on Wowza.

Mike Gilmore:

So, it is on GitHub; you can download it, it includes a sample project. And then on NPM, there is a page for that, as well. So this is the GoCoder—the documentation is exactly the same. But to kind of get things going, we're going to dive into React Native and assume that you have a little bit of experience with it. So we're not going to go through all the tutorials, but if you want to check it out, it's here for you. And again, what this is doing is, right now you can build a single code base that has support for iOS and Android utilizing GoCoder SDK—just a few instructions to go through.

So, what we're going to do now is, I'm going to create a React Native project, and while I'm doing that, Hugo is going to basically talk about some of the steps that you need to follow to get that up and going. And then we'll go from there.

Hugo Nagano:

Yeah, so for this demo, we're doing the iOS project, and for the iOS project, it should be—it's very simple. So to start with, you want to make sure you have all the licenses of Wowza set up for you. Streaming Engine, wherever you're hosting, that should also have that. And most importantly, the GoCoder SDK license, where you use, in this case, a bundle identifier that goes with it, and make sure you have that all downloaded. Once you have that, should be as simple as NPM install—and once you've done that, just bring the framework files to the project. And if you follow the example project that we have, you are ready to go.

Mike Gilmore:

Yeah, so some of our first steps here, I'm using the—I'll go ahead and use the NPM page, but again, right now what we have on my desktop, and what you'll see here is, after going through a lot of files, is I created this project. So this is what you get out of the gate. So once I went through the React Native install process, we have our Android project and we have our iOS project. And inside of there is some default files that get you up and going. And we'll dive into that in a little more detail, but let's go ahead and open this in an editor.

I'm going to use Atom for this particular purpose, but you can use any JavaScript editor of choice—it doesn't really matter. So to get things started, the package is really where kind of a lot of stuff is going to happen, and then on the Xcode side, just again for the iOS demo.

So, right now what we're going to do is, first, we're going to go back to our page here. I'm going to go ahead and install this node module, which is the wrapper that we wrote—go here, and make sure we're in the directory, which was “wrndemo.” And now what this is doing is, this is bringing in the native module and frameworks and wrapper, right?

Hugo Nagano:

Right. It's bringing our package to the project.

Mike Gilmore:

And then, now we're going to go back to the code itself here, and really work out of this iOS folder. So, if we go in here and open—we'll just use Finder—basically, you're going to go in iOS, open up your Xcode project, and you'll get something like this. And then again, following the instructions here, we want to make sure we do a link—and linking just means it's going to take a node module and assign it to your React Native project. So, right here, we’re going to add that in, and so now we're good to go.

The only other thing that we need is, we need to get our SDKs in place—and so we took the time earlier to download the latest one so we'd have them on hand, just in case there might be an issue. So, you should've already downloaded this. But, you're going to have this iOS SDK from GoCoder, get your license and all that stuff—you can skip the manual installation part, but you definitely need to follow this post-installation section.

So, it's telling you here, after you download the Wowza GoCoder SDK, you're going to need to add in the .lib static “wowzastatic-lib,” and of course, the SDK to the root directory to the projects. So that just means the iOS folder itself. So we're going to take this, and both these files—copy them over, and then inside of our little demo here, we're going to take and go inside of the iOS folder and paste them right in, so now those are accessible to us. And again, this is a little bit of back and forth, but that's kind of the fun of React Native.

Once you're in the project root here, you're going to bring in this SDK framework—just bring that right into the project, and again, for demo purposes, we're not going to worry about how it's organized, we're just going to bring it right in. Another thing we're going to do is—not necessarily in the instructions, but again, this is for a demo—is we're going to dump all these test files, and of course the tvOS; that's just because the dependencies are going to cause unnecessary build-time errors that we don't really want to play with.

And now, going back to our instructions, we want to make sure that we add it to our build phases—so we want to link these to our build phases in iOS, and we also want to make sure that there's a copy phase. This is just going to make sure that the SDK is included when it creates a binary.

Hugo Nagano:

Right, it's the same instructions as if you were doing just Wowza for iOS.

Mike Gilmore:

So, inside of the project, again, link the binary—it's already in there, it was dropped in, but we still need to create that copy path. So, we're going to create a new copy script, and inside of there, we're going to go ahead and we're going to say the destination is “Frameworks,” because it is. And then we're going to go ahead and add that Wowza GoCoder SDK framework.

And so now, everything should be up and running, but you won't really be able to tell. The only thing I'm stressing here is, at this point, it's probably a good idea to make an attempt to just run your project, on the phone. One small step—you want to make sure that you're using the proper provisioning bundle ID, because this is linked in your trial. So, just going to copy this one from the other project so that we have it. And this just will make sure that we don't have any errors when we try to test and run this. So you definitely need this for iOS. So get rid of the one that's auto-generated, and we'll go ahead and create a Team for it—which we already have it signed here, MEDL Mobile.

And then we're going to run this demo and when we do, nothing is actually going to happen—other than, we just want to make sure that the project compiles, and that there's no errors, and that's simply just to smoke-test everything; make sure we're safe. So, while I'm testing this out and getting this simulator up and running, I'm going to do a little bit more work and go back to that.

So at this point, we're done with integrating the module; we're done with getting the SDK in place. You can skip past the Android section for now, because that's where we're at. And really, you want to get in this usage part. So, if you know, when you get Wowza Streaming Engine all set up, there's certain parameters that you have to pass to it, in order to create a stream. So this would be—

Hugo Nagano:

Right, so this the configuration of your server.

Mike Gilmore:

Mm-hmm. So, I already have a lot of this copied over—so, to save ourselves time, and to really dive into broadcasting our own little test instance for this project, I'm going to go ahead and just modify my file with the other project. So again, this just gets us going.

Hugo Nagano:

You want to change this one.

Mike Gilmore:

Right. Alright, so let's test this simulator. It's loading—again, if everything goes off without a hitch, we should be fine here. And I know I'm switching screens a lot, but trust me, this is par for the course with React Native.

So, I don't want to delay things further, so I'm just going to just continue to let it run, another thing that—there we go, there. So, our splash screen's in place, our project is running—and again, this is just showing you that things are working, which is a good sign. So, we're going to close this out. And what this is doing here, is it's just packaging all the files that we have right now, which aren't much. So, again, I'm just going to kill the project right now, because we don't need it running. And then we're going to go back to our main code, and inside of our index.ios.js, you'll notice that they both have different names. These little Android and iOS are the platform-specific entry points; you want to make sure you have those configured properly.

So again, inside of our main project, we're going to have a configuration file—again, this is all stuff from our test server, along with the GoCoder trial license. And then the next part of it is, when we go back into the instructions, you're going to need these methods, and these are really for just observing the state of broadcasting, right?

Hugo Nagano:

Right.

Mike Gilmore:

Yeah, so these helpers will allow us to have access to GoCoder. You want to put those in right after your class implementation, so these are, again, just helper files. And then, on the next part of instructions, is you just want to bring in this broadcast view. And, of course, some styling. So, this is a React Native component; this is really the heart of it all. These funky tags here are what they call JSX—they basically translate down, or transpile down, to JavaScript code.

Hugo Nagano:

And those props from this component, that's where it controls the actual Wowza GoCoder on the Native side.

Mike Gilmore:

Mm-hmm. So, on our end, we've got almost everything we need in place. We just need one last thing, which is, you need absolute positioning on your video container. Because it won't show up right.

Hugo Nagano:

Right.

Mike Gilmore:

And then, on—so now that we have this video container, and all the code we've copied over, we now have kind of a bare-bones view for showing the GoCoder SDK. This comes with no design, or any of that, because you can customize it as you see fit. So, one last little piece is—

Hugo Nagano:

Oh wait, to turn on broadcasting.

Mike Gilmore:

Yeah—so, how might we go about turning that on? Inside of our BroadcastStart callback?

Hugo Nagano:

No, you—actually, we're using the broadcasting prop for that, switching that to either “true” or “false.” That's when the broadcast will start or pause.

Mike Gilmore:

Right here—so this property is basically what's going to pass in data to allow the phone to start broadcasting.

Hugo Nagano:

Right.

Mike Gilmore:

Okay. And so, with React Native, you can do it all sorts of ways, but I think on our end, we'll probably just make it dead simple, and we'll create state—which is just an object, but it's something that they use to observe user interaction within apps, or event changes, things like that. It’s very similar to web. So we're going to start broadcasting, and this is just going to be set to “false,” because we don't want to start broadcasting as soon as the view loads.

Hugo Nagano:

Right.

Mike Gilmore:

Because that's not good. So inside of here, simply replace this Boolean with your state—and then, we're still not there; we're still not done. We still need something to interact with. We need something to touch, basically. Well that's cool, React Native gives us what they call a “touchable”—we're going to do a highlight here. And this is their answer to a button—and Hugo's checking me, because I might've typed that incorrectly. Alright, so a Touchable Highlight is a component that basically acts as a button. So, simply type out “TouchableHighlight,” and then inside of here, we're going to need something to touch, so we're just going to add some text for now. And we're going to put, “start broadcasting.” We're going to close that off, like so. And then we're going to use an onPress event, and this is going to allow for us to control the state of our button. So, basically what's going on is, I'm writing a function that will …

Hugo Nagano:

Just flip the state of the broadcasting, so you can start and stop.

Mike Gilmore:

So, again, broadcasting—and again, this is more of a developer thing. And this is a slight little way of hotwiring state. So we're going to say, anytime that the broadcast button is tapped, it's just going to switch it from “true” or “false,” so each tap it's going to do it. It’s not going to be very intuitive, but it's enough to get our project up and going rapidly.

Alright, so I think I've got everything else in place. I think the only thing I want to do now is set a style; and I'm going to set a very terrible-looking style, and I'm going to set a background color, and I'm going to make it… red. Cool, all right, so if we did everything correctly—which we'll have to use the phone now for—then we should be able to broadcast. And I'll tell you, if I start this up right now, there's going to be one last missing piece, which is permissions—because, remember, on iPhones, you've got to get permissions to the camera, to any of the hardware. They have a lot of rules here, so we're going to go ahead and add in privacy—this is in your Info.plist, by the way.

So, you need to access the microphone. And don't write descriptions like these, by the way—these are things people see, they'll probably be turned off and never give you permission for anything. Alright, so, there we go there. Alright, now we're good. If you're storing anything locally on the phone, like thumbnails, you might want to also enable the media library, or any of those sort of things. Alright, so, now that we have all of the permissions, I don't need to run the simulator anymore, because in iOS, you don't have access to the camera, so you wouldn't know if it was working or not. I'm going to go ahead and switch this out to my device. I have my reliable, futuristic iPhone 6—this thing is bad to the bone, you should really get one of these if you haven't got one yet. I heard about them two years ago. Alright, so now that the phone is up and running, I want to test our little demo here. I'm simply just going to, like I said, switch out to the device, hit “run,” and if I did everything correctly, it's going to fire up the packager, which is going to serve up all these files, these files I wrote here that are going to present this view. And it should show it on the phone, and to save battery life, I'll kill that simulator.

And the best part about building iOS apps natively is this long wait for it compile everything. The good news is, once it's up and running, with React Native, you can actually fast-refresh your views, or hot reload—that's kind of a nice feature, it doesn't make it necessarily better than the others, but I personally like it. Alright, so now our packager is running, and this is bundling all the files up, sending it over to my phone—and if I did everything right, it should show up, and I should be able to try and start a broadcast.

Usually with these live demos, too, or at least demonstrating the stuff doesn’t work. The first try never works, so if it doesn't work, we'll try again; that's what we do. My arm might get tired from holding the phone up—ah, there we go, build succeeded. It’s amazing. Yeah, again, this is a very interesting thing. It's my argument, but it's really nice to have hot reloading, because recompiling a binary every time because you want to see a button move is sort of a terrible experience.

So, if you look now, again, same thing you saw on the screen—it's bundling up all those JavaScript files, and it should present a view that's dark in color with some buttons on it, or the back of my hand, because the camera’s right over here. I'm just waiting for it to load up.

Hugo Nagano:

There you go, you forgot to—

Mike Gilmore:

Oh, yeah, one last thing, it's telling me—it's intuitive, it’s saying, you forgot to import the broadcast view. No problem; so, here, import; BroadcastView; from, and I believe Crystal knew I forgot that, right Crystal? Is it Wowza GoCoder, right?

Hugo Nagano:

Yes.

Mike Gilmore:

That's a mouthful; all right, cool. You do this little thing where you shake your phone, and then you can just reload your code on the fly, so I didn't have to recompile this time. Isn't that nice? Alright, so there it is, 2CU—so this is the part where it wants access to my camera, it wants access to my microphone, and of course, you're seeing my hand. See, it's amazing, right? Yeah, so the last little of it, again, is we put in that red button—

Hugo Nagano:

It's right at the top.

Mike Gilmore:

You can see it’s smashed the top of the screen—I'm actually not recording, that's actually a button, and it's terribly small, and I have giant fingers, so if I want to fix that, this will be our last little thing to do here. I think we can just do a quick-and-dirty side setting. So we're going to make that button 200 wide, and height—we'll make it 60, because I have big fingers. Alright, and then “align:Self”—we'll do it center, or “cetner,” if I learn how to spell—there you go, hit that. Alright, shake the phone—there's so many phones shaking in our office these days, it's amazing. Alright, so hopefully the button shows up in the right spot. There we go—so now we've got a big button. See, if I tap that button right now, things are going to go nuts, but I think what I'm going to do is, I'm going to let Hugo tap the button—

Hugo Nagano:

Okay, are you ready for this?

Mike Gilmore:

—and then I'm going to go ahead and load up our page. So point it somewhere into the—there you go, and then hit the button, and then what we should see, a leading indicator that things are going nuts, is your terminal inside of Xcode will start going crazy. This is a good sign; this means that things are firing on all cylinders. Alright.

Hugo Nagano:

We have the log level debug on Wowza GoCoder.

Mike Gilmore:

And then again, if everything's working, we should see a thumbnail of our broadcast here, right?

Hugo Nagano:

We should. It could take a while to get up there, though.

Mike Gilmore:

I just reset it. Well, I think the last thing we can do here is—just to let you know, something is definitely going on, because you can see the connections and performance, so, certainly it’s working, and once we get to a more stable connection, we'll be able to show you some results. But again, it should be enough to get you up and going with GoCoder. And like I said, we're certainly excited about it, and hope it'll get you interested in working with React Native, and also trying out our tool and leaving some feedback. Thank you.