Пишем iOS видео-плеер и рекодер за 5 минут

Под катом пошаговая инструкция как создать свое приложение с потоковым видео под iOS. Понадобится XCode, СДК с клиентским АПИ, ровные руки (в принципе необязательно) и чашечка кофе.

Сегодня мы покажем как просто и быстро с помощью BaaS платформы Backendless написать iOS приложение, которое может записывать видео на сервере и впоследствии проигрывать его.

(Кто пропустил первый пост русскоязычного обзора всех АПИ нашей платформы, может найти его здесь.)

Дополнительную информацию и алгоритм работы АПИ медиа сервиса можно узнать из документации.

Итак, чтобы начать запустите «XCode»

Идем File->New->Project
-> Выберите «Single View Application» и кликните кнопку «Next»
-> Введите название приложения, на пр. «SimpleVideoService»
-> Выберите «iPhone» как устройство и нажмите «Next»
-> Выберите место для хранения вашего проекта

Теперь у вас есть проект с single view.
Приложению, подключаемому к платформе Backendless, нужно присвоить ID и прописать секретный ключ. Это делается в AppDelegate.m:

1 #import "AppDelegate.h" 2 #import "Backendless.h" 3  4 // *** ВАМ НУЖНО НАСТРОИТЬ ЭТО ЧТОБЫ ВАШЕ ПРИЛОЖЕНИЕ БЫЛО ЗАРЕГЕСТРИРОВАНО*** 5  6 static NSString *APP_ID = @""; 7 static NSString *SECRET_KEY = @""; 8 static NSString *VERSION_NUM = @"v1"; 9  10 @implementation AppDelegate 11  12 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 13 { 14 [backendless initApp:APP_ID secret:SECRET_KEY version:VERSION_NUM]; 15 return YES; 16 } 17  18 ..... 

Значения для APP_ID и SECRET_KEY нужно получить в веб-консоли разработчика. Залогиньтесь в консоль, «create/select» (выбор или создание нового приложения) и кликните иконку «Manage». Подраздел по умолчанию — App Settings:

Используйте кнопки “Copy” для копирования значений ID и секретного ключа приложения для iOS в ваш код. Скопированные значения присвоить к “APP_ID” и “SECRET_KEY” соответсвенно.

Перетяните и бросьте компонент «View» в ваше главное окно

Для удобства измените цвет фона рабочей области

Добавьте кнопки для управления видео потоком

Загрузите СДК для iOS http://backendless.com/downloads, распакуйте и перетяните библиотеку на файлы вашего проекта:

Также нам потребуются следующие стандартные библиотеки:

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

Откройте ViewController.m, импортируйте backendless и определите константы как показано ниже:

1 #import "Backendless.h" 2 3 #define VIDEO_TUBE @"videoTube" 4 #define STREAM_NAME @"defaultStreamName" 

Присвойте следующие переменные:

1 @interface ViewController () 2 { 3    MediaPublisher *_publisher; 4    MediaPlayer *_player; 5 }  

Откройте ViewController.h и объявите *preview свойство для получения картинки с камеры и *playbackView для проигрывания записанного видео:

1 @property (strong, nonatomic) IBOutlet UIView *preview; 2 @property (strong, nonatomic) IBOutlet UIImageView *playbackView; 

Свойство *preview нужно связать с «View». Для того чтобы сделать это выберите компонент «view», перетяните и бросьте «New Referencing Outlet» на «preview».

Данный «view» будет использоваться для камеры. Также нам нужен «view» для проигрывания видео. Добавьте “Image View” и свяжите его с *playbackView.

Теперь нам нужно создать хэндлеры управления кнопками и добавить их сигнатуру в ViewController.h:

1 -(IBAction ) onStopBtn:(id)sender; 2 -(IBAction)onPlayBtn:(id)sender; 3 -(IBAction)onRecordBtn:(id)sender; 

Добавьте реализацию методов в ViewController.m.

Запись Видео

1 - (void)onRecordBtn:(id)sender 2 { 3  MediaPublishOptions *options = [MediaPublishOptions recordStream:self.preview]; 4 _publisher =[backendless.mediaService publishStream: STREAM_NAME tube:VIDEO_TUBE options:options responder:self]; 5 } 

В строке 3 создаем инстанс MediaPublishOptions и привязываем компонент UI, который покажет записываемое видео.

В строке 4 мы создаем publisher. Конструктор паблишера принимает название потока, название канала, опции и респондер. Когда пользователь останавливает запись, мы проверяем или в данный момент паблишим (транслируем) видео, затем отсоединяемся от потока и присваиваем паблишеру и плееру nil.

1 -(void)onStopBtn:(id)sender 2 { 3     if (_publisher) 4     { 5         [_publisher disconnect]; 6         _publisher = nil; 7     } 8       9     if (_player) 10  { 11        [_player disconnect]; 12        _player = nil; 13    } 14 } 

Проигрывание Записанного Видео

1 - (void)onPlayBtn:(id)sender 2 { 3   MediaPlaybackOptions *options = [MediaPlaybackOptions recordStream:self.playbackView]; 4    _player = [backendless.mediaService playbackStream:STREAM_NAME tube:VIDEO_TUBE: options:options responder:self]; 5} 

В строке 3 мы создаем инстанс MediaPlaybackOptions и передаем на компонент UI, который покажет записанное видео.

В строке 4 мы создаем медиа плеер. Конструктор принимает название потока, название канала, опции и респондер. Так как респонедр указывает на себя, то класс ViewController должен реализовывать IMediaStreamerDelegate.

Так как мы реализуем IMediaStreamerDelegate нам нужно добавить следующий код, чтобы реагировать на изменения в потоке:

1 -(void) streamStateChanged:(id)sender code:(int)code description:(NSString *)description 2 { 3    switch (code) { 4              5        case MEDIASTREAM_DISCONNECTED: { 6              7            [self onStopBtn:sender]; 8            break; 9        } 10              11        case MEDIASTREAM_PAUSED: { 12              13            [self onStopBtn:sender]; 14            break; 15        } 16             17        case MEDIASTREAM_PLAYING: { 18              19            // PUBLISHER 20            if (_publisher) { 21                  22                if (![description isEqualToString:@"NetStream.Publish.Start"]) { 23                    [self onStopBtn:sender]; 24                    break; 25                } 26            } 27              28            // PLAYER 29            if (_player) { 30                  31                if (![description isEqualToString:@"NetStream.Play.Start"]) { 32                    UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"Error:" message:[NSString stringWithString:description] delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil]; 33                    [av show]; 34                    break; 35                } 36                  37                self.playbackView.hidden = NO; 38            } 39            break; 40        } 41              42        default: 43            break; 44    } 45 } 46 -(void) streamConnectFailed:(id)sender state:(StateMediaStream)state description:(NSString *)description 47 { 48    [self onStopBtn:sender]; 49      50    NSString *message = (state == -1) ? 51     @"Unable to connect to the server. Make sure the hostname/IP address and port number are valid\n" : 52     [NSString stringWithFormat:@"connectFailedEvent: %@ \n", description]; 53    UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"Error:" message:message delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil]; 54    [av show]; 55 } 

Почти все готово, осталось связать кнопки с хэндлерами.

Повторите то же самое для остальных кнопок.

Все :). Кофе допито, плеер работает. Код проекта можно скачать здесь.