How to get started with WebRTC and iOS without wasting 10 hours of your life

转载自：http://ninjanetic.com/how-to-get-started-with-webrtc-and-ios-without-wasting-10-hours-of-your-life/

 

I recently had the chance to play around with the new WebRTC framework, a really cool new technology that will eventually allow for point-to-point real-time video chat without plug-ins or extra software. Ideally this technology will be built into all modern browsers (it’s already in Chrome and Firefox!) but Apple is definitely dragging their feet. If you want to incorporate this technology into an iOS application, you need to directly use the WebRTC libraries that implement the protocol. Fortunately, an Objective-C implementation of just about everything exists and is free to use.

That being said, incorporating the WebRTC libraries into your project is a total nightmare. The project is set up to support a large number of platforms simultaneously, so the build system is extremely complicated. Forget about opening Xcode and using interface builder, you are going to be doing everything from the command line if you want to work directly with the libraries.

Why not just take the compiled libraries and build on top of them? WebRTC is still on the bleeding edge of development, and the current example objective C code only supports audio. If you want to have audio AND video support (that’s the point of video chat!) you are going to have to get ready to do some work and finish the implementation yourself. There are a few people who have gone pretty far down this road, and have more traditional Xcode style projects set up. This one is a great starting point.  However, no one has a drop-in solution for iOS apps available at the moment.

If you are building a production application then you are going to need to get down in the guts and work directly with the libraries, and in order to compile them you need to jump through a bunch of hoops (especially if you are working with Xcode 5 and iOS 7). It took a surprising amount of effort to get this to build for the simulator, and then trying to get it to build for a device was even more work. In hopes of saving other people some time, here’s a compilation of all the steps I needed to do to get the example application building and then running on both the iOS simulator and a physical device.

 

Get the code base

Keep in mind that at the time of this writing, this is a project being very actively developed. It’s very likely the build process is going to change as time goes on. These instructions are based on syncing the code base at revision r5127.

Prerequisites:

• I’m doing this on a MacBook Pro running OS X Mountain Lion
• You have Git installed and working
• XCode 5.0+ with the Command Line Tools installed (Preferences -> Downloads -> Command Line Tools)
• If you’re using an actual iOS device, you will need a valid development code signing identity, and properly provisioned iOS device attached to your computer

1) Create a working directory

Make a new directory somewhere,  and get ready because you’re going to need in the ballpark of 1.7 GB of free space

2) Download the Chromium depot tools

Switch into your working directory and grab the Chromium depot_tools repository with git:

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

These are a bunch of tools used during the build process, and they will need to be in your path so you will need to modify your .bash_profile (or other shell file) and modify the PATH line like so:

export PATH=/a_bunch_of_stuff:/working_directory/depot_tools:$PATH

Next you will need to restart your terminal or re-run your bash profile so that the changes take effect:

source ~/.bash_profile

3) Download the WebRTC source

Back in your working directory, use the next few commands to download the massive source repository:

gclient config http://webrtc.googlecode.com/svn/trunk
gclient sync --force

Come back a few days later when it’s finished downloading, and then you can move on to setting up the build.

 

Building and running on the iOS 7 simulator

This source code is capable of building for a number of different platforms, and since we are only interested in building for iOS we are going to create our own build script that compiles and runs exclusively for the iOS simulator.  That’s right, forget about actually using Xcode we are going to be building everything from the command line. Oh yeah!

First, at the top level of your working directory create a new shell script file to kickoff the build:

touch makeall-iossim.sh
chmod +x makeall-iossim.sh

Open the file you just created, and paste in this:

makeall-iossim.sh

Shell

function fetch() { echo "-- fetching webrtc" gclient config http://webrtc.googlecode.com/svn/trunk/ echo "target_os = ['mac']" >> .gclient gclient sync sed -i "" '$d' .gclient echo "target_os = ['ios', 'mac']" >> .gclient gclient sync echo "-- webrtc has been sucessfully fetched" } function wrbase() { export GYP_DEFINES="build_with_libjingle=1 build_with_chromium=0 libjingle_objc=1" export GYP_GENERATORS="ninja" } function wrsim() { wrbase export GYP_DEFINES="$GYP_DEFINES OS=ios target_arch=ia32" export GYP_GENERATOR_FLAGS="$GYP_GENERATOR_FLAGS output_dir=out_sim" export GYP_CROSSCOMPILE=1 } function wrmac() { wrbase export GYP_DEFINES="$GYP_DEFINES OS=mac target_arch=x64" export GYP_GENERATOR_FLAGS="$GYP_GENERATOR_FLAGS output_dir=out_mac" } function build() { echo "-- building webrtc" pushd trunk gclient runhooks ninja -C out_sim/Debug iossim AppRTCDemo popd echo "-- webrtc has been sucessfully built" } function run() { echo "-- running webrtc appdemo" pushd trunk ./out_sim/Debug/iossim out_sim/Debug/AppRTCDemo.app popd } function fail() { echo "*** webrtc build failed" exit 1 } fetch || fail wrsim || fail build || fail run || fail

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

function fetch ( ) { echo "-- fetching webrtc" gclient config http : //webrtc.googlecode.com/svn/trunk/ echo "target_os = ['mac']" >> .gclient gclient sync   sed - i "" '$d' .gclient echo "target_os = ['ios', 'mac']" >> .gclient gclient sync echo "-- webrtc has been sucessfully fetched"   }   function wrbase ( ) { export GYP_DEFINES = "build_with_libjingle=1 build_with_chromium=0 libjingle_objc=1" export GYP_GENERATORS = "ninja" }   function wrsim ( ) { wrbase export GYP_DEFINES = "$GYP_DEFINES OS=ios target_arch=ia32" export GYP_GENERATOR_FLAGS = "$GYP_GENERATOR_FLAGS output_dir=out_sim" export GYP_CROSSCOMPILE = 1 }   function wrmac ( ) { wrbase export GYP_DEFINES = "$GYP_DEFINES OS=mac target_arch=x64" export GYP_GENERATOR_FLAGS = "$GYP_GENERATOR_FLAGS output_dir=out_mac" }   function build ( ) { echo "-- building webrtc" pushd trunk gclient runhooks ninja - C out_sim / Debug iossim AppRTCDemo popd echo "-- webrtc has been sucessfully built" }   function run ( ) { echo "-- running webrtc appdemo" pushd trunk . / out_sim / Debug / iossim out_sim / Debug / AppRTCDemo .app popd }   function fail ( ) { echo "*** webrtc build failed" exit 1 }   fetch || fail wrsim || fail build || fail run || fail

At this point, all you need to do is run the script. It will create the proper projects and makefiles, build the source code and example application, and finally launch the iOS simulator and run the example application. FYI, after you’ve run the script at least one time successfully, you can comment out line 53 to save time in the future.

./makeall-iossim.sh

Your iOS 7 simulator should pop up automatically and launch the test application. At this point in time the demo application only supports audio and the connection quality is pretty flaky, so keep that in mind.  To give it a try, you’re going to have to create a video session that the test application can connect to. The easiest way to do this is:

1) Open a Chrome browser tab on your computer or Android device (I’ve had great success with the Google Nexus 7 and 10).

2) Go to http://apprtc.appspot.com

3) Give the browser permissions to access your camera, and wait for your smiling face to show up.

4)  Notice that the URL in your browser has changed. It will now look something like this:

http://apprtc.appspot.com?r=87514723

5) The number appended to the end of the URL is the room number. This is the key piece of information you need to get the test application to connect. Switch back to the iOS simulator, and type that number into the text box. Press the join button on the keyboard and away it will go. The test application has not been the most reliable thing in the world for me, see you might need to try a few times before it connects successfully. Also be careful with the volume on your computer, it’s super easy to get a feedback loop going.

We have a demo! Now let’s see if we can get this thing to work on an actual iOS device.

 

Building and running directly on an iOS 6/7 device

We need a slightly different build script to run the test application on a device. This also makes it easy to switch back and forth between the simulator and an actual device when you need to.

touch makeall-iosdevice.sh
chmod +x makeall-iosdevice.sh

Open the file you just created, and paste in this:

makeall-iosdevice.sh

Shell

function fetch() { echo "-- fetching webrtc" gclient config http://webrtc.googlecode.com/svn/trunk/ echo "target_os = ['mac']" >> .gclient gclient sync sed -i "" '$d' .gclient echo "target_os = ['ios', 'mac']" >> .gclient gclient sync echo "-- webrtc has been sucessfully fetched" } function wrbase() { export GYP_DEFINES="build_with_libjinglth_chromium=0 libjingle_objc=1" export GYP_GENERATORS="ninja" } function wrios() { wrbase export GYP_DEFINES="$GYP_DEFINES OS=ios target_arch=armv7" export GYP_GENERATOR_FLAGS="$GYP_GENERATOR_FLAGS output_dir=out_ios" export GYP_CROSSCOMPILE=1 } function wrmac() { wrbase export GYP_DEFINES="$GYP_DEFINES OS=mac target_arch=x64" export GYP_GENERATOR_FLAGS="$GYP_GENERATOR_FLAGS output_dir=out_mac" } function buildios() { echo "-- building webrtc ios" pushd trunk wrios && gclient runhooks && ninja -C out_ios/Debug-iphoneos AppRTCDemo popd echo "-- webrtc has been sucessfully built" } function launch() { echo "-- launching on device" ideviceinstaller -i trunk/out_ios/Debug-iphoneos/AppRTCDemo.app echo "-- launch complete" } function fail() { echo "*** webrtc build failed" exit 1 } #fetch || fail wrios || fail buildios || fail launch || fail

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

function fetch ( ) { echo "-- fetching webrtc" gclient config http : //webrtc.googlecode.com/svn/trunk/ echo "target_os = ['mac']" >> .gclient gclient sync   sed - i "" '$d' .gclient echo "target_os = ['ios', 'mac']" >> .gclient gclient sync echo "-- webrtc has been sucessfully fetched"   }   function wrbase ( ) { export GYP_DEFINES = "build_with_libjinglth_chromium=0 libjingle_objc=1" export GYP_GENERATORS = "ninja" }   function wrios ( ) { wrbase export GYP_DEFINES = "$GYP_DEFINES OS=ios target_arch=armv7" export GYP_GENERATOR_FLAGS = "$GYP_GENERATOR_FLAGS output_dir=out_ios" export GYP_CROSSCOMPILE = 1 }   function wrmac ( ) { wrbase export GYP_DEFINES = "$GYP_DEFINES OS=mac target_arch=x64" export GYP_GENERATOR_FLAGS = "$GYP_GENERATOR_FLAGS output_dir=out_mac" }   function buildios ( ) { echo "-- building webrtc ios" pushd trunk wrios && gclient runhooks && ninja - C out_ios / Debug - iphoneos AppRTCDemo popd echo "-- webrtc has been sucessfully built" }   function launch ( ) { echo "-- launching on device" ideviceinstaller - i trunk / out_ios / Debug - iphoneos / AppRTCDemo .app echo "-- launch complete" }   function fail ( ) { echo "*** webrtc build failed" exit 1 }   #fetch || fail wrios || fail buildios || fail launch || fail

This script will switch the architecture to armv7, codesign the application, and eventually upload it to an attached iOS device.

To get that last step to work, we need to install an additional tool called ideviceinstaller.  Its super-easy to install using homebrew (although it takes a while to build).

brew install ideviceinstaller --HEAD

Curveball: IOS 7

The build scripts were designed with iOS 6 in mind, and include an obsolete framework not available in the iOS 7 SDK.  Building the code for an actual iOS device will spit out an error that reads something like “ld: framework not found IOKit”. Fortunately, fixing this problem is as easy as deleting a few lines. Open trunk/talk/libjingle.gyp and search for:

framework IOKit

There should be 2 instances of that in the file, just delete both of those lines.

Curveball: Codesigning

The build scripts will look through your keychain and use the code signing identity associated with “iPhone developer”. If you have a single identity registered (i.e. you only ever work with one team or developer account) everything should be fine.  If this is you, skip down to the “finally” section below.

If you do not have a valid code signing identity set up & a provisioned iOS device attached to your computer, it’s not going to work.  Follow Apple’s guides on how to create an identity and provisioning profile.

If you are an iOS developer that works with multiple clients, odds are that you have multiple code signing identities for the identity “iPhone developer”. The WebRTC build scripts do not have proper handling for this situation, and will throw assertions if you have more than one code signing identity. Fortunately with the help of a few other people it’s possible to get around this issue by commenting out a few lines of the build scripts. This of course assumes that it doesn’t matter which code signing identity is used to compile the code.

To fix the build for multiple identities, we will need to modify 2 files. Open trunk/talk/libjingle_examples.gyp  and change line 271 from this:

'key_id%': '<!(security find-identity -p codesigning -v | grep "iPhone Developer" | awk \'{print $2}\')',

1	'key_id%' : '<!(security find-identity -p codesigning -v | grep "iPhone Developer" | awk \'{print $2}\')' ,

to this:

'key_id%': '<!(security find-identity -p codesigning -v | grep "iPhone Developer" | awk \'{print $2}\' | head -1 )',

1	'key_id%' : '<!(security find-identity -p codesigning -v | grep "iPhone Developer" | awk \'{print $2}\' | head -1 )' ,

Otherwise, the build will fail with an error similar to “key_id gyp variable needs to be set explicitly because there are multiple codesigning keys, or none”.

Next, open trunk/tools/gyp/pylib/gyp/xcode_emulation.py and change lines 793-795 from this:

for item in output.split("\n"): if identity in item: assert key == None, ( "Multiple codesigning identities for identity: %s" % identity) key = item.split(' ')[1]

1 2 3 4 5 6

for item in output . split ( "\n" ) :          if identity in item :            assert key == None , (                "Multiple codesigning identities for identity: %s" %                identity )            key = item . split ( ' ' ) [ 1 ]

to this:

for item in output.split("\n"): if identity in item: # assert key == None, ( # "Multiple codesigning identities for identity: %s" % # identity) key = item.split(' ')[1]

1 2 3 4 5 6

for item in output . split ( "\n" ) :          if identity in item : #          assert key == None, ( #              "Multiple codesigning identities for identity: %s" % #              identity)            key = item . split ( ' ' ) [ 1 ]

Otherwise, the build will fail with an error similar to “AssertionError: Multiple codesigning identities for identity: iPhone Developer”.

Finally!

Run the script next to build and launch the application:

./makeall-iosdevice.sh

If everything goes well, the upload will succeed and you’ll notice a new demo application icon show up on your device. The build script will not automatically launch the application, so just click on the icon to run the demo. From there follow the same instructions to join a chat room as we did with the simulator.

 

Making Code Changes

There is a ton of code here, but there’s really only a small amount that you need to worry about as an iOS developer. Here are the 2 key locations to start exploring:

AppRTCDemo test project - trunk/talk/examples/ios

This is the demo application with the high level communication logic and UI

Objective-C WebRTC libraries – trunk/talk/app/webortc/objc

These are the Objective-C wrappers to the core communication libraries.

As long as you modify the code in place, the build scripts will automatically tie everything together and compile the finished demo application. Enjoy playing around with the project, and definitely let me know if you learn any other tips or tricks.