Message:

Subscribe rss
Blog categories
All | Backendless features
Developing an iOS Video Recorder and Player in 5 minutes
June 4, 2013 by markpiller
Spread the love

Video broadcasting and streaming is one of the coolest features of Backendless. Our Media Service API enables client-server functionality for working with live and on-demand audio and video content. An application using the Media Service API can broadcast audio and video from the devices cameras and microphone and Backendless automatically handles streaming to other clients as well recording of the content on the server. The API also supports the capability to stream the pre-recorded (on-demand) content managed by the Media Service. Details are available in the documentation.

This post describes how to build an iOS application which can record a video on the server and then subsequently play it back. To start, you will need to create a project in XCode:

  1. Goto File->New->Project
  2. Select Single View Application and click Next button
  3. Enter application name for e.g. SimpleVideoService
  4. Choose iPhone device and click next
  5. Choose a location for your project

Now you have a project with single view. A backendless application must be initialized with an ID and a secret key. It can be done in AppDelegate.m:

The values for the APP_ID and SECRET_KEY variables must be obtained from Backendless Console. Login to the console, create/select your application and click the Manage icon. The default subsection is App Settings:

appsettings - Developing an iOS Video Recorder and Player in 5 minutes

Use the “Copy” buttons to copy the application id value and the secret key for iOS into your code. The copied values must be assigned to the “APP_ID” and “SECRET_KEY” variables accordingly.

Drag and drop view component to your main view:

BaaS video service Screen 1 - Developing an iOS Video Recorder and Player in 5 minutes

Change the background for the view:

BaaS video service Screen 2 - Developing an iOS Video Recorder and Player in 5 minutes

Add buttons to control the video stream:

BaaS video service Screen 3 - Developing an iOS Video Recorder and Player in 5 minutes

Download the Backendless SDK for iOS from http://backendless.com/downloads, unzip it and drag and drop library to your project files:

BaaS video service Screen 4 - Developing an iOS Video Recorder and Player in 5 minutes

Also, you need to add the following standard libraries:

  • AudioToolbox.framework
  • AVFoundation.framework
  • CoreData.framework
  • CoreGraphics.framework
  • CoreMedia.framework
  • CoreVideo.framework
  • Libz.dylib
  • Security.framework

BaaS video service Screen 5 - Developing an iOS Video Recorder and Player in 5 minutes

Open ViewController.m and import backendless and define the constants as shown below:

Declare the following variables:

Open ViewController.h and declare the *preview property to view the picture from the camera and *playbackView to play the recorded video:

The *preview property needs to be associated with a View. In order to do this select the view component and drag and drop New Referencing Outlet to preview.

BaaS video service Screen 6 - Developing an iOS Video Recorder and Player in 5 minutes

This view will be used for the camera. Also we need a view to play the video. Add the “Image View” component and tie it with the *playbackView property.

Now we should create handlers for control the buttons add their signature to ViewController.h:

Add an implementation of the methods in ViewController.m:

Recording Video

On line 3 create an instance of MediaPublishOptions and reference a UI component that will show the video being recorded.

On line 4 we create a publisher. The publisher constructor accepts stream name, a tube name, options and a responder. When the user stops the recording, we check if we are currently publishing a video, then disconnect from the stream and set the publisher and player to nil.

Playing Recorded Video

On line 3 we create an instance of MediaPlaybackOptions and pass in the UI component that will show the recorded video.

On line 4 we create the media player. The constructor accepts a stream name, a tube name, options and the responder. Since the responder is set to self, the ViewController class must implement IMediaStreamerDelegate.

As we implement IMediaStreamerDelegate we should add the following code to handle stream state changes:

 Everything is almost ready, just link the buttons with the handlers:

BaaS video service Screen 7 - Developing an iOS Video Recorder and Player in 5 minutes

Repeat the same for other buttons.

That’s all, enjoy simple smile - Developing an iOS Video Recorder and Player in 5 minutes

You can download the sample code here.

Share this post
Tweet about this on TwitterShare on FacebookGoogle+