Configurar um cliente iOS básico (Swift)

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 Swift. Há também um tutorial com o código escrito em Objective-C.

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 Swift para iOS na Bate-papo por vídeo básico pasta da nossa Repositório do aplicativo de exemplo do Swift 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 Swift como linguagem de programação do aplicativo.

  4. Selecionar Storyboard como interface de usuário 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:

    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. Abra o diretório raiz do seu projeto no Terminal e 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.swift e, no início do arquivo, adicione uma linha para importar a biblioteca OpenTok:

    import UIKit import OpenTok

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.swift:

    // Replace with your OpenTok API key var kApiKey = "" // Replace with your generated session ID var kSessionId = "" // Replace with your generated token var kToken = ""

    Adicione estas linhas antes do class ViewController declaração.

  2. Ajuste o código definindo os valores de forma estática para o kApiKey, kSessionId e kToken.

    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:

    class ViewController: UIViewController var session: OTSession?

    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:

    override func viewDidLoad() { super.viewDidLoad() connectToAnOpenTokSession() } func connectToAnOpenTokSession() { session = OTSession(apiKey: kApiKey, sessionId: kSessionId, delegate: self) var error: OTError? session?.connect(withToken: kToken, error: &error) if error != nil { print(error!) } }

    O OTSession() O construtor recebe três parâmetros:

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

    O connect() método do session O objeto 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 connect() 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. A seguir, vamos implementar os métodos do protocolo OTSessionDelegate. Adicione o código a seguir ao final do arquivo ViewController.swift, após o colchete de fechamento da classe ViewController:

    // MARK: - OTSessionDelegate callbacks extension ViewController: OTSessionDelegate { func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") } func sessionDidDisconnect(_ session: OTSession) { print("The client disconnected from the OpenTok session.") } func session(_ session: OTSession, didFailWithError error: OTError) { print("The client failed to connect to the OpenTok session: \(error).") } func session(_ session: OTSession, streamCreated stream: OTStream) { print("A stream was created in the session.") } func session(_ session: OTSession, streamDestroyed stream: OTStream) { print("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 sessionDidConnect(_:) o método é chamado.

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

    • Quando o cliente se desconecta da sessão do OpenTok, o sessionDidDisconnect(_:) o método é chamado.

    • Quando outro cliente publica um stream na sessão do OpenTok.

    • Quando outro cliente interrompe a transmissão para a sessão do OpenTok.

    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 sessionDidConnect(_:) método que imprime 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:

    class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher?

    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:

    func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") let settings = OTPublisherSettings() settings.name = UIDevice.current.name guard let publisher = OTPublisher(delegate: self, settings: settings) else { return } var error: OTError? session.publish(publisher, error: &error) guard error == nil else { print(error!) return } guard let publisherView = publisher.view else { return } let screenBounds = UIScreen.main.bounds publisherView.frame = CGRect(x: screenBounds.width - 150 - 20, y: screenBounds.height - 150 - 20, width: 150, height: 150) view.addSubview(publisherView) }

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

    Em seguida, o código passa o objeto OTPublisher como parâmetro da função session.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. A seguir, vamos implementar os métodos do protocolo OTPublisherDelegate. Esse protocolo inclui métodos para lidar com eventos relacionados ao publisher. Adicione o código a seguir ao final do arquivo ViewController.swift, após o colchete de fechamento da extensão OTSessionDelegate:

    // MARK: - OTPublisherDelegate callbacks extension ViewController: OTPublisherDelegate { func publisher(_ publisher: OTPublisherKit, didFailWithError error: OTError) { print("The publisher failed: \(error)") } }

    • Se o cliente não conseguir publicar na sessão do OpenTok, um objeto OTError é passado para o 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 publisher propriedade da classe ViewController:

    class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher? var subscriber: OTSubscriber?

    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 session(_: streamCreated) método (um dos callbacks do OTSessionDelegate) para incluir código que permita assinar os fluxos de outros clientes na sessão:

    func session(_ session: OTSession, streamCreated stream: OTStream) { subscriber = OTSubscriber(stream: stream, delegate: self) guard let subscriber = subscriber else { return } var error: OTError? session.subscribe(subscriber, error: &error) guard error == nil else { print(error!) return } guard let subscriberView = subscriber.view else { return } subscriberView.frame = UIScreen.main.bounds view.insertSubview(subscriberView, at: 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. A seguir, vamos implementar os métodos do protocolo OTSubscriberDelegate. Esse protocolo inclui métodos para lidar com eventos relacionados ao assinante. Adicione o código a seguir ao final do arquivo ViewController.swift, após o colchete de fechamento da extensão OTPublisherDelegate:

    // MARK: - OTSubscriberDelegate callbacks extension ViewController: OTSubscriberDelegate { public func subscriberDidConnect(toStream subscriber: OTSubscriberKit) { print("The subscriber did connect to the stream.") } public func subscriber(_ subscriber: OTSubscriberKit, didFailWithError error: OTError) { print("The subscriber failed to connect to the stream.") } }

    • Quando o cliente se conecta à sessão do OpenTok, o subscriberDidConnect(_:) o método é chamado.

    • 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 (Swift)”.
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-SDK-da-Vonage-para-iOS-em-Swift 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 PHP 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.

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, as credenciais válidas do OpenTok.

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

override func viewDidLoad() { super.viewDidLoad() let configuration = URLSessionConfiguration.default let session = URLSession(configuration: configuration) let url = URL(string: <#https://YOURAPPNAME.herokuapp.com/session#>) let dataTask = session.dataTask(with: url!) { (data: Data?, response: URLResponse?, error: Error?) in guard error == nil, let data = data else { print(error!) return } let dict = try! JSONSerialization.jsonObject(with: data, options: .allowFragments) as? [AnyHashable: Any] kApiKey = dict?["apiKey"] as? String ?? "" kSessionId = dict?["sessionId"] as? String ?? "" kToken = dict?["token"] as? String ?? "" self.connectToAnOpenTokSession() } 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.