Configurar um cliente iOS básico (Objective-C)

Este tutorial irá guiá-lo pelas etapas de configuração de um cliente iOS básico que utiliza a Video API da Vonage.

Visão geral

Todas as aplicações que utilizam a Video API da Vonage exigem tanto um cliente e um servidor componente. O código do lado do cliente é o que é carregado no dispositivo iOS do usuário final e lida com a maior parte das funcionalidades do OpenTok, incluindo conectando para o sessão, publicação áudio e vídeo correntes para a sessão, e assinando para os fluxos de outros clientes. Para obter mais informações sobre clientes, servidores e sessões, consulte Noções básicas sobre a Video API.

Neste tutorial, você utilizará o SDK do OpenTok para iOS, a biblioteca do lado do cliente da OpenTok para dispositivos iOS, para criar de forma rápida e fácil um aplicativo de vídeo interativo em tempo real.

Observação: O código deste tutorial está escrito em Objective-C. Há também um tutorial com o código escrito em Swift.

Aqui estão os tópicos que serão abordados neste tutorial:

Tempo estimado de conclusão: 25 minutos

Quer pular este tutorial? Você pode acessar o código completo do cliente em Objective-C para iOS na Bate-papo por vídeo básico pasta da nossa Repositório do aplicativo de exemplo para iOS no GitHub. O repositório inclui um arquivo README com documentação sobre como executar e explorar o código.

Requisitos

Para concluir este tutorial, você precisará de:

Etapa 1: Criação de um novo projeto

  1. Abra o Xcode e crie um novo projeto.

  2. Selecionar Aplicativo de Visualização Única como modelo.

  3. Selecionar Objective-C como linguagem de programação do aplicativo.

Etapa 2: Adicionando a biblioteca OpenTok

Siga as etapas abaixo para usar o CocoaPods e adicionar a biblioteca OpenTok e suas dependências ao seu aplicativo. Se preferir não usar o CocoaPods, siga estas instruções para o uso do SDK.

  1. No Terminal, acesse o diretório raiz do seu projeto e digite o seguinte:

    pod init

    Isso cria um arquivo Podfile na raiz do diretório do seu projeto.

  2. Edite o arquivo Podfile e adicione a seguinte linha após o comentário que diz # Pods for [YourProjectName] (O arquivo podfile não estará visível no seu projeto do XCode; portanto, você precisará abri-lo diretamente da pasta do projeto):

    pod 'OpenTok'

  3. Salve as alterações no Podfile.

  4. No Terminal, no diretório raiz do seu projeto, digite:

    pod install

  5. Feche seu projeto no Xcode. Em seguida, reabra-o clicando duas vezes no novo arquivo .xcworkspace no Finder (no diretório raiz do seu projeto).

Para obter acesso à câmera e ao microfone, é necessário modificar o arquivo Info.plist:

  1. No painel de navegação à esquerda no Xcode, clique no arquivo do projeto (com o nome do seu projeto) para abrir o painel central do projeto.

    À esquerda do Geral Na guia do painel do projeto, você deverá ver o nome do seu projeto. Se o nome for diferente do nome do seu projeto (como [NomeDoSeuProjeto]Tests), clique nele e defina o destino como o nome do seu projeto.

  2. No painel, vá para a guia “Informações”.

  3. Expanda a seção “Propriedades do destino personalizado do iOS” caso ela esteja recolhida

  4. Passe o mouse sobre qualquer chave e clique no botão + para adicionar uma nova chave. Adicione uma Privacy - Camera Usage Description chave e atribua a ela a seguinte sequência de caracteres:

    $(PRODUCT_NAME) uses the camera.

    Em seguida, clique no botão + para adicionar um novo Privacy - Microphone Usage Description chave e atribua a ela a seguinte sequência de caracteres:

    $(PRODUCT_NAME) uses the microphone.

    O aplicativo exibe essas mensagens quando o usuário acessa a câmera e o microfone pela primeira vez.

    (Esses recursos de segurança foram adicionados no iOS 10.)

Adicione a biblioteca OpenTok ao controlador de visualização.

  • No Xcode, abra o arquivo ViewController.m e, no início do arquivo, adicione uma linha para importar a biblioteca OpenTok:

    #import "ViewController.h" #import <OpenTok/OpenTok.h>

Etapa 3: Configuração da autenticação

Para se conectar a uma sessão do OpenTok, o cliente precisará ter acesso a algumas credenciais de autenticação — um Chave de API, ID da sessão, e token. Em um aplicativo de produção, essas credenciais devem ser geradas por um servidor, mas, para agilizar o processo, vamos simplesmente definir os valores manualmente por enquanto:

  1. Comece copiando o bloco de código a seguir e adicionando-o ao seu arquivo ViewController.m:

    // Replace with your OpenTok API key static NSString* kApiKey = @""; // Replace with your generated session ID static NSString* kSessionId = @""; // Replace with your generated token static NSString* kToken = @"";

    Adicione estas linhas antes do @interface declaração.

  2. Ajuste o código definindo os valores de forma estática para o kApiKey, kSessionId e kToken (dentro das aspas vazias).

    Para fazer isso, faça login na sua Account da Video API, crie um novo projeto da API do OpenTok ou use um projeto existente da API do OpenTok; em seguida, acesse a página do seu projeto e role a tela para baixo até a Ferramentas do projeto seção. A partir daí, você pode gerar manualmente um ID de sessão e um token. Use a chave de API do projeto juntamente com o ID de sessão e o token que você gerou.

Importante: Você pode continuar obtendo os valores do ID da sessão e do token da sua Account durante os testes e o desenvolvimento, mas, antes de entrar em produção, é necessário configurar um servidor. Abordaremos esse assunto em Próximos passos no final deste tutorial.

Para obter mais informações sobre sessões, tokens e servidores, consulte Noções básicas sobre a Video API.

Etapa 4: Conectando-se à sessão

A seguir, vamos nos conectar à sessão do OpenTok. É necessário fazer isso antes de poder publicar seu fluxo de áudio e vídeo na sessão ou visualizar os fluxos dos outros participantes.

  1. Adicione um session propriedade da classe ViewController:

    @interface ViewController() @property (nonatomic) OTSession *session; @end

    A classe OTSession está definida no SDK do OpenTok para iOS. Ela representa uma sessão do OpenTok e inclui métodos para interagir com a sessão.

  2. Adicione um método para instanciar o objeto OTSession e chamar seu [OTSession connectWithToken: error:] método. Em seguida, você pode chamá-lo em viewDidLoad:

    - (void)viewDidLoad { [super viewDidLoad]; [self connectToAnOpenTokSession]; } - (void)connectToAnOpenTokSession { _session = [[OTSession alloc] initWithApiKey:kApiKey sessionId:kSessionId delegate:self]; NSError *error; [_session connectWithToken:kToken error:&error]; if (error) { NSLog(@"%@", error); } }

    O [OTSession initWithApiKey:sessionId:delegate:] O método recebe três parâmetros:

    • Sua chave da API do OpenTok
    • O ID da sessão
    • O objeto que implementa o protocolo OTSessionDelegate

    O [OTSession connectWithToken: error:] O método conecta o aplicativo cliente à sessão do OpenTok. É necessário estabelecer a conexão antes de enviar ou receber fluxos de áudio e vídeo na sessão (ou antes de interagir com a sessão de qualquer forma). O método recebe dois parâmetros:

    • token é o token de autenticação que permite que este cliente se conecte à sessão do OpenTok.

    • error é definido como um objeto OTError caso ocorra um erro de forma síncrona ao chamar o método.

  3. Altere a declaração da interface do ViewController para indicar que a classe implementa a OTSessionDelegate protocolo:

    @interface ViewController() <OTSessionDelegate>

    A seguir, vamos implementar os métodos do protocolo OTSessionDelegate. Adicione o código a seguir ao final da classe ViewController (antes do @end (declaração):

    # pragma mark - OTSession delegate callbacks - (void)sessionDidConnect:(OTSession*)session { NSLog(@"The client connected to the OpenTok session."); } - (void)sessionDidDisconnect:(OTSession*)session { NSLog(@"The client disconnected from the OpenTok session."); } - (void) session:(OTSession*)session didFailWithError:(OTError*)error { NSLog(@"The client failed to connect to the OpenTok session: (%@)", error); } - (void)session:(OTSession*)session streamCreated:(OTStream *)stream { NSLog(@"A stream was created in the session."); } - (void)session:(OTSession*)session streamDestroyed:(OTStream *)stream { NSLog(@"A stream was destroyed in the session."); }

    Este protocolo inclui métodos para lidar com eventos relacionados à sessão:

    • Quando o cliente se conecta à sessão do OpenTok, o [OTSessionDelegate sessionDidConnect:] A mensagem é enviada.

    • Se o cliente não conseguir se conectar à sessão do OpenTok, o [OTSessionDelegate session:didFailWithError:] A mensagem é enviada.

    • Quando o cliente se desconecta da sessão do OpenTok, o [OTSessionDelegate sessionDidDisconnect:] A mensagem é enviada.

    • Quando outro cliente publica um stream na sessão do OpenTok, o [OTSessionDelegate session:streamCreated:] A mensagem é enviada.

    • Quando outro cliente interrompe a transmissão de um stream para a sessão do OpenTok, o [OTSessionDelegate session:streamDestroyed:] A mensagem é enviada.

    Por enquanto, o aplicativo exibe mensagens no console do depurador sempre que algum desses eventos ocorre.

Faça a depuração do seu aplicativo. Se o aplicativo se conectar com sucesso à sessão do OpenTok, o [OTSessionDelegate sessionDidConnect:] O método deve exibir uma mensagem no console de depuração.

Etapa 5: Publicação de um fluxo na sessão

Quando o aplicativo se conectar à sessão do OpenTok, queremos que ele transmita um fluxo de áudio e vídeo para a sessão, usando a câmera e o microfone do dispositivo:

  1. Adicione um publisher propriedade da classe ViewController:

    @interface ViewController() <OTSessionDelegate> @property (nonatomic) OTSession *session; @property (nonatomic) OTPublisher *publisher; @end

    A classe OTPublisher está definida no SDK do OpenTok para iOS. Ela utiliza a câmera e o microfone do dispositivo para publicar uma sessão de streaming do OpenTok.

  2. Modificar a implementação do sessionDidConnect(_:) método para incluir código para publicar um stream na sessão:

    - (void)sessionDidConnect:(OTSession*)session { OTPublisherSettings *settings = [[OTPublisherSettings alloc] init]; _publisher = [[OTPublisher alloc] initWithDelegate:self settings:settings]; OTError *error = nil; [_session publish:_publisher error:&error]; if (error) { NSLog(@"Unable to publish (%@)", error.localizedDescription); return; } CGSize screenSize = [UIScreen mainScreen].bounds.size; CGRect rect = CGRectMake(screenSize.width - 150 - 20, screenSize.height - 150 - 20, 150, 150); [_publisher.view setFrame:rect]; [self.view addSubview:_publisher.view]; }

    Quando o aplicativo se conecta a uma sessão, ele inicializa uma instância do OTPublisher, definida no SDK do OpenTok para iOS. O [OTPublisher initWithDelegate:] O método recebe dois parâmetros: o objeto que implementa o protocolo OTPublisherDelegate e um settingsobjeto.

    Em seguida, o código passa o objeto OTPublisher como parâmetro da função [OTSession publish:] método. Esse método publica um fluxo de áudio e vídeo na sessão do OpenTok, utilizando a câmera e o microfone do dispositivo iOS. (Observe que, no simulador do Xcode, o SDK do OpenTok para iOS utiliza um vídeo de teste ao publicar um fluxo.)

    O objeto OTPublisher possui um view propriedade, que é um objeto UIView. Essa vista exibe o vídeo capturado pela câmera do dispositivo. O código adiciona essa vista como uma subvista da vista do ViewController principal.

  3. Altere a declaração da interface do ViewController para indicar que a classe implementa a OTPublisherDelegate protocolo:

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate>

    A seguir, vamos implementar os métodos do protocolo OTSessionDelegate. Adicione o código a seguir ao final da classe ViewController (antes do @end (declaração):

    # pragma mark - OTPublisher delegate callbacks - (void)publisher:(OTPublisherKit*)publisher didFailWithError:(OTError*) error { NSLog(@"The publisher failed: %@", error); }

    Se o cliente não conseguir publicar na sessão do OpenTok, um objeto OTError é passado para o [OTPublisherDelegate publisher:didFailWithError:] método.

Faça a depuração do seu aplicativo. Se o aplicativo se conectar com sucesso à sessão do OpenTok, ele publicará um stream na sessão, e você verá o vídeo do emissor no aplicativo.

Etapa 6: Inscrever-se nos feeds de outros clientes

Por fim, queremos que os clientes possam inscrever-se para (ou visualizar) as transmissões de outros clientes na sessão:

  1. Adicione um subscriber propriedade da classe ViewController:

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate> @property (nonatomic) OTSession *session; @property (nonatomic) OTPublisher *publisher; @property (nonatomic) OTSubscriber *subscriber; @end

    A classe OTSubscriber está definida no SDK do OpenTok para iOS. Ela utiliza a câmera e o microfone do dispositivo para se inscrever em uma sessão de streaming do OpenTok.

  2. Modificar a implementação do [OTSessionDelegate session: streamCreated] método (um dos callbacks do OTSessionDelegate) para incluir código que permita assinar os fluxos de outros clientes na sessão:

    - (void)session:(OTSession*)session streamCreated:(OTStream *)stream { _subscriber = [[OTSubscriber alloc] initWithStream:stream delegate:self]; OTError *error = nil; [_session subscribe:_subscriber error:&error]; if (error) { NSLog(@"Unable to subscribe (%@)", error.localizedDescription); return; } [_subscriber.view setFrame:[UIScreen mainScreen].bounds]; [self.view insertSubview:_subscriber.view atIndex:0]; }

    Quando outro cliente publica um fluxo em uma sessão, esse método é chamado, e um objeto OTStream é passado como parâmetro. A classe OTStream está definida no SDK do OpenTok para iOS e representa um fluxo de áudio e vídeo na sessão do OpenTok. O código inicializa uma instância da classe OTSubscriber, definida no SDK do OpenTok para iOS. O OTSubscriber() O construtor recebe dois parâmetros: o objeto OTStream (correspondente ao fluxo que você deseja visualizar) e o objeto que implementa o protocolo OTSubscriberDelegate.

  3. Altere a declaração da interface do ViewController para indicar que a classe implementa a OTSubscriberDelegate protocolo:

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate,OTSubscriberDelegate>

    A seguir, vamos implementar os métodos do protocolo OTSessionDelegate. Adicione o código a seguir ao final da classe ViewController (antes do @end (declaração):

    # pragma mark - OTSubscriber delegate callbacks - (void)subscriberDidConnectToStream:(OTSubscriberKit *)subscriber { NSLog(@"The subscirber: %@ did connect to the stream", subscriber); } - (void)subscriber:(OTSubscriberKit*)subscriber didFailWithError:(OTError*)error { NSLog(@"subscriber %@ didFailWithError %@", subscriber.stream.streamId, error); }

    • Se o cliente não conseguir se conectar à sessão do OpenTok, um objeto OTError é passado para o subscriber(_: didFailWithError:) método.

Etapa 7: Executando o aplicativo

Agora que seu código está pronto, você pode executar o aplicativo no emulador do Xcode. Isso criará um vídeo simulado do editor — como o emulador não tem acesso à sua webcam, o vídeo do editor exibirá um gráfico de um bule girando em vez da imagem da sua câmera.

Para adicionar um segundo editor (que aparecerá como assinante no seu emulador), execute o aplicativo uma segunda vez em um dispositivo iOS conectado ou use o OpenTok Playground para se conectar à sessão em um navegador compatível, seguindo as etapas abaixo:

  1. Acesse OpenTok Playground (é necessário estar conectado à sua Account)

  2. Selecione o Participar de uma sessão já em andamento aba

  3. Copie o ID da sessão que você usou no arquivo ViewController.m e cole-o em ID da sessão campo de entrada

  4. Clique Participar da sessão

  5. Na próxima tela, clique em Conectar-se, em seguida, clique em Publicar transmissão

  6. Você pode ajustar as opções do Publisher (opcional) e, em seguida, clicar em Continuar para se conectar e começar a publicar e se inscrever

Neste momento, você deve ver a transmissão da sua webcam, bem como a transmissão do emulador. Voltando ao emulador, você também deve ver o novo editor exibido na tela emulada.

Parabéns! Você concluiu o tutorial “Configurar um cliente iOS básico (Objective-C)”.
Você pode continuar experimentando e ajustando o código que desenvolveu aqui para o lado do cliente do seu aplicativo, mas lembre-se de que precisará implementar o componente de servidor da sua aplicação antes de entrar em produção (consulte Configurando seu servidor (abaixo).

Você pode visualizar uma versão completa deste aplicativo de exemplo no Bate-papo por vídeo básico pasta do exemplos-do-opentok-ios-sdk repositório no GitHub. Esta versão finalizada inclui código para carregar o ID da sessão, o token e a chave de API a partir de um serviço web (em vez de usar valores fixos).

Próximos passos

Quando terminar esta seção, continue desenvolvendo e aprimorando seu aplicativo OpenTok com estes recursos úteis:

Configurando seu servidor

No tutorial acima, pedimos que você codificar diretamente suas credenciais de autenticação. No entanto, para um aplicativo de produção, o sessionId e token Os valores no seu código devem ser gerados pelo servidor de aplicativos e repassados ao cliente. Aqui estão algumas razões pelas quais você não deve usar credenciais codificadas diretamente no código-fonte do seu aplicativo de produção:

  • Os tokens expiram após um determinado período (especificado no momento da geração); portanto, é necessário gerar novos tokens regularmente
  • Você não poderá criar novas sessões dinamicamente; portanto, todos os usuários do seu aplicativo ficariam restritos a uma única “sala”

Você pode continuar testando seu aplicativo com valores codificados diretamente, mas, quando estiver pronto para configurar um servidor, há várias maneiras de fazer isso:

Opção 1 do servidor — Inicie um servidor REST simples no Heroku com um clique

Essa é provavelmente a maneira mais rápida de colocar um servidor em funcionamento, mas sua funcionalidade é limitada. Basta clicar no botão do Heroku abaixo; você será redirecionado para o site do Heroku e solicitado a inserir sua chave de API e seu segredo de API do OpenTok — você pode obter esses valores na página do seu projeto em seu Account da Video API. Se você não tiver um Account no Heroku, precisará se cadastrar (é grátis).

Deploy

Quer dar uma olhada no código? O botão acima executa o código do servidor a partir do aprendendo-opentok-php Repositório do GitHub. Acesse o repositório para revisar o código e consultar a documentação adicional — você pode até mesmo criar um fork do repositório e fazer alterações antes da implantação.

Prefere o Node.js? Visite o aprendendo-opentok-node repositório com a mesma funcionalidade usando Node.js (incluindo o botão de implantação no Heroku).

Depois que o servidor estiver implantado no Heroku, você precisará adicionar algumas linhas ao seu código do lado do cliente. Em vez de chamar connectToAnOpenTokSession diretamente, você precisará fazer uma chamada de rede para o caminho /session no seu servidor para obter, primeiro, credenciais válidas do OpenTok.

Copie o código a seguir e use-o para substituir viewDidLoad no seu arquivo ViewController.m:

- (void)viewDidLoad { [super viewDidLoad]; NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration]; NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration]; NSURL *url = [NSURL URLWithString:<#https://YOURAPPNAME.herokuapp.com/session#>]; NSURLSessionDataTask *dataTask = [session dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { if (!error) { NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil]; kApiKey = dict[@"apiKey"]; kSessionId = dict[@"sessionId"]; kToken = dict[@"token"]; [self connectToAnOpenTokSession]; } else { NSLog(@"%@", error); } }]; [dataTask resume]; [session finishTasksAndInvalidate]; }

Você precisará substituir https://YOURAPPNAME.herokuapp.com com a URL real do seu aplicativo no Heroku — você pode encontrá-la na página do seu aplicativo no site do Heroku.

O código acima faz uma solicitação ao /sessão ponto final (https://YOURAPPNAME.herokuapp.com/session), que deve retornar uma resposta HTTP que inclua o ID da sessão, o token e a chave da API no formato JSON, os quais são então atribuídos às variáveis correspondentes.

Isso /session O endpoint sempre retornará o mesmo ID de sessão, mas gerará um novo token a cada vez que for chamado — isso faz com que cada cliente receba um token exclusivo.

Opção 2 do servidor — Compilar do zero usando os SDKs do servidor

A Opção 1 utiliza endpoints REST para transmitir credenciais ao cliente, mas essa é apenas uma das muitas maneiras de implementar um servidor com o OpenTok. Se você deseja um nível maior de personalização, pode consultar o Documentação do SDK do servidor para a linguagem do lado do servidor de sua escolha (disponível para PHP, Node.js, Java, .NET, Python e Ruby). A documentação aborda o processo de configuração e os diversos métodos necessários para gerar sessões e tokens, além de outras funcionalidades do lado do servidor.