O sucesso e a adoção de qualquer aplicativo da web hoje dependem altamente de seu desempenho, flexibilidade e facilidade de uso.

Especialmente no mundo de hoje com TDAH, os usuários perderão rapidamente a paciência com um aplicativo se a página carregar muito tempo . Para aplicativos da web que precisam suportar processamento de vídeo - que é inerentemente computacional e intensivo em I / O - este desafio é particularmente agudo. No entanto, os usuários estão se tornando cada vez mais exigentes, querendo que seus vídeos sejam de alta qualidade e carregue rapidamente, mesmo se estiver executando em um smartphone ou tablet.

Os usuários também estão perdendo a tolerância para aplicativos da web que não funcionam em seu navegador ou dispositivo preferido, ou que não suportam o formato de dados que eles precisam carregar ou exportar. A diversidade de formatos de vídeo que precisam ser suportados, portanto, também torna a incorporação do suporte de vídeo em um aplicativo da web especialmente desafiadora.

diferença entre c corporation e s

Esta postagem descreve como eu efetivamente aproveitei as tecnologias de código aberto e serviços baseados em nuvem para incorporar recursos de vídeo em um aplicativo da web baseado em PHP.

Caso de uso

Fiz parte de uma equipe que precisava desenvolver um site parecido com o do YouTube, onde usuários registrados pudessem enviar e compartilhar seus vídeos.

O sistema precisava permitir que usuários registrados carregassem seus vídeos em uma variedade de formatos suportados, que seriam então convertidos para um formato comum (MP4). Também precisávamos gerar um conjunto de miniaturas e uma colagem de imagens para serem usados ​​no player de vídeo para mostrar os frames em uma barra de progresso do vídeo.

As coisas ficaram ainda mais complicadas pelo fato de que os requisitos do cliente nos impediram de usar qualquer CDN disponível ou APIs de transcodificação, portanto, precisamos desenvolver nossa solução do zero.

Upload de vídeo

Como o processo de upload em si não precisava ser específico para vídeo (só precisávamos de um recurso de upload de arquivo fácil de usar), fazia sentido usar uma solução de código aberto existente em vez de lançar a nossa própria. Nós selecionamos jQuery-File-Upload , principalmente porque suportava dois recursos essenciais em nosso caso; ou seja, uma barra de progresso de upload e uploads em partes.

Upload fragmentado nos permitiu permitir que um usuário carregasse um arquivo de vídeo de praticamente qualquer tamanho (especialmente importante para suportar arquivos de vídeo em resolução HD). Com essa abordagem, o arquivo é dividido em vários “blocos” no front-end, que invoca a ação de upload com cada bloco de dados (junto com os metadados para cada bloco, como número do bloco e tamanho total do arquivo). O arquivo de vídeo completo é então remontado no back-end. A propósito, incluir o número do bloco nos metadados se mostrou particularmente importante, pois alguns navegadores (como o Mobile Safari) tendem a transmitir os blocos em ordem aleatória.

Processamento de Vídeo Online

O processamento de vídeo pode ser tão simples quanto capturar quadros como imagens estáticas ou pode envolver operações mais complexas, como aprimoramento de imagem, estabilização do fluxo de vídeo e assim por diante. Em nosso caso, os únicos requisitos de processamento de vídeo eram (a) extrair codecs de vídeo e outros metadados importantes e (b) gerar um conjunto de miniaturas e uma colagem de imagem (para ser usada no player de vídeo para mostrar os quadros no progresso de um vídeo Barra).

FFmpeg - uma biblioteca de código aberto amplamente usada, distribuída gratuitamente - foi extremamente útil para atender a esses requisitos. O FFmpeg oferece uma solução completa e multiplataforma para gravar, converter e transmitir arquivos de áudio e vídeo. Também pode ser usado para converter vídeos e fazer edições simples (por exemplo, aparar, cortar, adicionar uma marca d'água, etc.).

Para nossos objetivos, pudemos usar o FFmpeg para dividir o vídeo em dez seções e, em seguida, capturar uma miniatura de cada seção para fornecer a funcionalidade necessária.

Infelizmente, porém, não há vínculos de linguagem PHP para a biblioteca FFmpeg. Como resultado, a única maneira de aproveitar o FFmpeg do PHP é invocar o binário da linha de comando usando comandos do sistema. Existem basicamente duas maneiras de usar o FFmpeg em PHP:

• libav . Libav é um projeto de software livre, bifurcado da FFmpeg em 2011 , que produz bibliotecas e programas para lidar com dados multimídia. No Ubuntu, por exemplo, ele pode ser instalado com o comando sudo apt-get install libav-tools. Os comandos libav são compatíveis com FFmpeg e avconv . O PHP precisa ter acesso à linha de comando para ffmpeg/avconv para usar isso programaticamente.
• PHP-FFMpeg . PHP-FFMpeg é um driver de PHP orientado a objetos para o binário FFMpeg. Ele pode ser acessado simplesmente executando composer update 'php-ffmpeg/php-ffmpeg'.

Usamos PHP-FFMpeg porque ele fornece acesso fácil à funcionalidade FFmpeg em que estávamos interessados. Por exemplo, o FFProbe classe deste pacote permite que você receba informações sobre codecs ou a duração de um arquivo de vídeo específico da seguinte maneira:

$ffprobe = FFMpegFFProbe::create(); $ffprobe ->format('/path/to/video/mp4') // extracts file informations ->get('duration');

O FFmpeg também facilita o salvamento de qualquer quadro de vídeo:

$ffmpeg = FFMpegFFMpeg::create(); $video = $ffmpeg->open('video.mpg'); $video ->frame(FFMpegCoordinateTimeCode::fromSeconds(10)) ->save('frame.jpg');

Um código de amostra mais detalhado está disponível Aqui .

Uma nota de cautela: Devido a algumas leis de patentes, nem todos os codecs podem ser processados ​​pelo FFmpeg e alguns formatos não são adequadamente (ou totalmente) suportados. Lembro-me de ter lutado alguns anos atrás, por exemplo, com o .3gp formato quando o suporte para feature phones era essencial.

como usar o fluxo tensor

Fila

Depois de obter os codecs de um vídeo e outros metadados, enviamos o vídeo para uma fila de conversão FIFO (primeiro a entrar, primeiro a sair). A fila foi implementada usando um script cron simples que seleciona um determinado número de vídeos não processados ​​cada vez que é executado e os passa para um utilitário de conversão (código-fonte de amostra disponível Aqui )

O utilitário de conversão invoca o FFMpeg para realizar a conversão e marca cada vídeo como tendo sido processado.

Também desenvolvemos um mecanismo simples de estimativa de tempo de espera, que calcula o tempo médio para converter 1 minuto de vídeo. Usando essa média, podemos calcular e exibir para o usuário o tempo de processamento restante estimado após o término do envio de um vídeo, com base em quantos minutos de vídeo ainda restam para ser processado.

Conversão de formato de vídeo

Certos formatos universalmente reconhecidos (como JPEG e GIF) surgiram para imagens estáticas que são essencialmente suportados por todos os dispositivos e software de processamento de imagem. Embora alguns formatos de vídeo sejam mais comuns do que outros, nenhum formato com suporte universal ainda surgiu para vídeos.

Em nosso caso, além de precisarmos converter de uma variedade de formatos para um único formato comum (MPEG-4), precisávamos que os vídeos convertidos fossem otimizados para streaming para dispositivos móveis.

como obter dados do twitter

Para conversão de formato de vídeo (pelo menos para nossas necessidades de curto prazo), usando o sistema baseado em nuvem Amazon Elastic Transcoder foi a melhor opção disponível. Além de sua facilidade de uso geral, o serviço transcodificador cuida da otimização e de todas as configurações de codificação. Felizmente, um SDK AWS para PHP está disponível, o que simplifica a chamada do serviço a partir de nosso código PHP.

Nota: Usar um serviço baseado em nuvem como o Amazon Elastic Transcoder é ótimo se você deseja começar a trabalhar rapidamente. No entanto, tenha em mente que essa opção pode se tornar cara para o seu cliente, especialmente se o modelo de negócios dele exigir o uso extensivo de vídeos grandes. Outro fator a considerar é que você não deve necessariamente presumir que os vídeos ou modelo de negócios de seu cliente serão compatíveis com os Termos de Serviço.

Amazon usa seu armazenamento básico e elementos de computação, S3 (serviço de armazenamento simples) e EC2 (Elastic Compute Cloud) - combinado com Auto Scaling e SNS (Serviço de Notificação Simples) - para fornecer a capacidade de aumentar e diminuir virtualmente instantaneamente.

Instalação de aws-sdk é simples, pois a Amazon mantém um Compositor -versão instalável do pacote. Basta adicionar ”aws/aws-sdk-php': '2.*' para o seu composer.json e faça um composer update.

Obviamente, acessar o Amazon Elastic Transcoder requer uma conta da Amazon, então você também precisará configurá-la se você (ou seu cliente) ainda não tiver uma.

Nosso uso do serviço Amazon Elastic Transcoder envolveu primeiro o upload de arquivos de vídeo para um bucket apropriado no S3. Em seguida, tornamos o trabalho do transcodificador responsável por decodificar e gerar uma miniatura que, ao ser concluída, envia uma solicitação HTTP para o endereço especificado. Isso requer alguma configuração no painel AWS, mas é bastante simples e a Amazon fornece uma boa documentação sobre como fazer isso.

Sinta-se à vontade para usar nosso pacote transcodificador , o que ajuda a simplificar a integração para Symfony 2 . Inclui uma descrição de uso e oferece um controlador para implementação rápida de um serviço de notificação enviado pela Amazon para coletar informações sobre o vídeo processado. Um exemplo de uso está disponível Aqui .

Além disso, um controlador de exemplo que lida com notificações Amazon está disponível Aqui que também implementa a confirmação de um endereço de inscrição. O serviço publicará primeiro o URL a ser visitado para confirmar que este é um receptor de notificação válido. Tudo o que é realmente necessário é marcar o vídeo como processado. A partir daí, podemos usar o vídeo transcodificado que fica armazenado na nuvem.

Transmissão

O streaming de vídeo é um recurso que exige alto desempenho: as expectativas do usuário quanto ao streaming ininterrupto são altas e a tolerância à latência é extremamente baixa. Esse desafio costuma ser agravado pela necessidade de transmitir vídeo para vários clientes simultaneamente em tempo real.

Em nosso caso, precisávamos dar suporte a cada usuário para poder fazer seu próprio canal de vídeo e começar a transmitir. Nossa solução consistia em três componentes:

• Painel de controle. Aplicativo que funciona como um painel de streamer, fornecendo a capacidade de veicular vídeo.
• Visualizador. Cliente de vídeo que consome e exibe um fluxo de vídeo.
• Streaming Engine. Serviço de streaming de vídeo baseado em nuvem.

Além do fato de que a tecnologia Video on Demand (VOD) ainda está evoluindo, outro problema que enfrentamos foi que o acesso à câmera não era bem suportado e oferecia apenas uma conexão P2P. Além disso, nosso objetivo era fornecer transmissão online para vários usuários simultâneos. Além disso, suporte para getUserMedia/Stream API (anteriormente concebido como o elemento) ainda não é consistente em navegadores modernos. Com base nesses fatores, decidi usar a tecnologia Flash, pois era realmente a única escolha razoável. Ambos os aplicativos (Dashboard e Viewer) foram, portanto, implementados usando Flex e ActionScript .

Para o mecanismo de streaming, usamos Wowza . Embora existam outras soluções não comerciais (como Red5 , que é comercializado essencialmente como um substituto dropin para Wowza), no nosso caso, o suporte ao produto comercial foi um fator importante. Além disso, pelo menos no momento em que estávamos construindo o sistema, Wowza oferecia uma documentação melhor, o que era uma vantagem adicional. (Observe que você pode obter uma versão de teste do Wowza gratuitamente por 30 dias e também há uma versão de teste do desenvolvedor que você pode usar por até 180 dias. Mas existem algumas limitações; o streaming só pode funcionar para dois clientes e há limite no número máximo de conexões.)

Wowza Streaming Engine

Usamos o aplicativo LiveStream fornecido com o Wowza. Para configurá-lo, deixe applications/app_name vazio e em conf/app_name copie o Application.xml arquivo do conf Catálogo. Edite o arquivo para configurar a seção da seguinte maneira:

o que é c e c ++

live ${com.wowza.wms.context.VHostConfigHome}/content ${com.wowza.wms.context.VHostConfigHome}/keys

O parâmetro-chave é live que define que será uma transmissão de um feed de vídeo ao vivo (por exemplo, uma câmera). Observe que depois de editar e salvar este arquivo, você precisará reiniciar o Wowza.

Aplicativos Flash (Flex / ActionScript)

O Flash fornece um sistema totalmente integrado para conectar uma câmera e um microfone a um servidor de streaming Wowza. Isso é particularmente útil se sua experiência com ActionScript é limitado.

Todo o aplicativo é essencialmente baseado na interação entre os seguintes objetos:

• NetConnection. o NetConnection classe cria uma conexão bidirecional entre um cliente e um servidor. O cliente pode ser um Flash Player ou um aplicativo AIR. O servidor pode ser um servidor da Web, Flash Media Server, um servidor de aplicativos executando Flash Remoting ou o serviço Adobe Stratus.
• Câmera. o Câmera classe é usada para capturar vídeo do sistema cliente ou câmera do dispositivo.
• Microfone. o Microfone classe é usada para monitorar ou capturar áudio de um microfone.
• NetStream. o NetStream classe abre um canal de streaming unilateral em um NetConnection.

Primeiro, conectamos ao servidor de streaming Wowza usando a instância NetConnection e, em seguida, anexamos o listener de eventos que ouvirá as alterações no status da conexão de rede:

nc = new NetConnection(); nc.connect(serverAddress:string); nc.addEventListener( NetStatusEvent.NET_STATUS, // event type eNetStatus, // listener function false, // use capture? 0, // priority true // use weak reference? );

Aqui está um exemplo minimalista de um ouvinte de evento que conecta a câmera e o microfone ao servidor de streaming:

private function eNetStatus(e:NetStatusEvent):void { switch (e.info.code) { case 'NetConnection.Connect.Success': camera = Camera.getCamera(); mic = Microphone.getMicrophone(); ns = new NetStream(nc); ns.publish(streamName, 'live'); ns.attachCamera(camera); ns.attachAudio(mic); break; case 'NetConnection.Connect.Closed': // debug trace... display user message break; }

O código do cliente é muito semelhante, exceto que apenas exibimos a entrada de vídeo no lado do usuário. Isso é feito conectando o fluxo a Video objeto, conforme mostrado neste exemplo simples:

if(event.info.code == 'NetConnection.Connect.Success') { ns = new NetStream(nc); ns.client = nsClient; ns.addEventListener(NetStatusEvent.NET_STATUS, nsClient.onNetStatus); ns.play(streamName); video = new Video(); addChild(video); // this will display video video.attachNetStream(ns); // connect NetStream to video }

Embrulhar

Pode-se esperar que a transmissão ao vivo e o vídeo desempenhem um papel cada vez mais significativo nos aplicativos móveis e da web. Portanto, é importante para desenvolvedores web para se familiarizar com a transcodificação, processamento e streaming de vídeo. Inúmeras ferramentas, bibliotecas e serviços existem hoje para incorporar esses recursos em aplicativos da web. Este artigo mostra como alavancamos e integramos várias dessas tecnologias para criar um site básico semelhante ao do YouTube com relativa facilidade.