Getting Started: Streaming from iOS to browser via webRTC

 With all the excitement going on with webRTC and iOS interoperability, I’m sure many are excited to get started. If you don’t have time to navigate through the docs, then you’ve come to the right place. In this article, I’m going to show you how to get started! If you didn’t know already, webRTC is a new HTML5 spec for interactive media streaming on the web.

Browser to Browser

This is very simple. All you have to do is go through our getting started tutorial. The basic idea behind OpenTok SDK is a publisher/subscriber model in a session. First you connect to a session, then you publish to a session. As other people publish to a session, you’ll get a streamCreated event, in which you’ll simply subscribe to their video stream. If you open up multiple tabs you’ll be able to see multiple videos. By default, the tutorial uses our flash stack. But we want WebRTC, so all we have to do is change our javascript library:

 <script src="http://static.opentok.com/webrtc/v2.0/js/TB.min.js" ></script> 

If you get an error, make sure that you put your HTML file in a server (localhost or upload). Files cannot stream data, but servers can (for security reasons).

iOS to Browser and vice Versa

As of this writing, webRTC on iOS only supports p2p, which means that there is a maximum of 2 connections to a session. When you generate a session, make sure p2p flag is turned on!

First, clone our iOS Hello World from github. Developers will usually type:

git clone https://github.com/opentok/OpenTok-iOS-Hello-World

Next, clone our WebRTC iOS SDK!

That’s all the ingredients we need. Let’s set up. Go into the iOS hello world and open xcodeProject in Xcode. In project navigator delete opentok.bundle in OpenTokHelloWorld folder and Opentok.framework in Frameworks folder. If presented with an option to remove reference or move to trash, MOVE TO TRASH! We are replacing these with the cooler WebRTC version.

Go into your OpenTok WebRTC folder. Drag opentok.framework into your xcode project navigator’s Frameworks folder.  Go back into your OpenTok WebRTC folder, and navigate into Opentok.framework -> Resources. You will see opentok.bundle. Drag it into xcode project navigator’s OpenTokHelloWorld folder. We just replaced what we recently deleted. Setup is done.

The last step here is to go to your ViewController.m, and replace key, sessionId, and token with your credentials. MAKE SURE that the sessionId is the same sessionId you are using in your browser, and MAKE SURE that you generated the sessionId with a p2p flag.

Change static bool subscribeToSelf = NO;

because in WebRTC you cannot subscribe to yourself.

That’s it! Run the iOS HelloWorld on your device (iOS simulator doesn’t really work because it does not have a camera), and watch the webRTC video stream from your browser! If your browser is also publishing, you should see the browser’s video feed on your iOS app too! Admire the lack of latency and witness the power of HTML5.

Look at yourself in the video stream and pat yourself in the back. Congratulations, and welcome to WebRTC.

Love,

Song

  • http://songz.me/ Song Zheng

    If you have any questions, email support@tokbox.com

    • Alfred

      Hi Song, I see this blog is a year old now. Does the same implementation and limitation of P2P tokens for Browser to iOS and vice versa hold true? Or have there been any latest updates that stream with an non P2P token and allow multiple connections.