Streaming de protocolo WebRTC

Cloud Live fornece um SDK de streaming TXLivePusher para streaming web, que é responsável por enviar as imagens de áudio e vídeo capturadas pelo navegador para o servidor de transmissão ao vivo por meio do protocolo WebRTC. Atualmente, ele suporta coleta de câmeras, coleta de microfones, coleta de compartilhamento de tela, coleta de arquivos de mídia local e coleta definida pelo usuário e outros métodos de coleta.Ele suporta processamento local de fluxo misto do conteúdo coletado e, em seguida, envia-o para o servidor back-end.

Perceber

Usando o protocolo WebRTC para transmitir fluxos, cada nome de domínio push tem um limite padrão de 1.000 fluxos push simultâneos . Se precisar exceder esse limite, entre em contato conosco para solicitar enviando uma ordem de serviço.

Os benefícios deste artigo, pacote gratuito de materiais de aprendizagem de áudio e vídeo C++, vídeo/código técnico, incluindo (desenvolvimento de áudio e vídeo, perguntas de entrevista, FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, codec, fluxo push-pull, srs )↓↓↓ ↓↓↓Veja abaixo↓↓Clique no final do artigo para obtê-lo gratuitamente↓↓

conhecimento básico

Antes de atracar, você precisa conhecer os seguintes conhecimentos básicos:

Montagem do endereço de streaming

Ao usar o serviço de streaming ao vivo da Tencent Cloud, o endereço de streaming precisa atender ao formato do URL de streaming ao vivo padrão da Tencent Cloud, conforme mostrado abaixo, que consiste em quatro partes:

A parte da chave de autenticação não é necessária. Se você precisar evitar hotlinking, habilite a autenticação push

suporte ao navegador

O streaming da Web é implementado com base no WebRTC e depende do suporte de sistemas operacionais e navegadores para WebRTC. Atualmente, as versões mais recentes dos navegadores Chrome, Edge, Firefox e Safari oferecem suporte ao streaming da web.

Perceber:

Algumas funções do navegador para capturar imagens de áudio e vídeo são restritas no terminal móvel H5. Por exemplo, o navegador do terminal móvel não suporta compartilhamento de tela, e iOS 14.3 e versões superiores suportam apenas a aquisição de equipamento de câmera do usuário.

Estratégia de ancoragem

Etapa 1: preparação da página

Introduza scripts de inicialização em páginas que exigem transmissão ao vivo.

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>

ilustrar

O script precisa ser introduzido na parte corporal do HTML, e um erro será relatado se for introduzido na parte principal.

Passo 2: Colocando Containers em HTML

Adicione um contêiner de player à página onde as imagens de áudio e vídeo locais precisam ser exibidas, ou seja, coloque um div e nomeie-o, como local_video, e as imagens de vídeo locais serão renderizadas no contêiner. Para controlar o tamanho do contêiner, você pode usar o estilo css de div para controlar, o código de exemplo é o seguinte:

<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

Etapa 3: transmissão ao vivo ,

Gerar instância do SDK de streaming: gere uma instância do SDK por meio do objeto global TXLivePusher e as operações de acompanhamento são concluídas por meio da instância.

const livePusher = new TXLivePusher();

Especifique o contêiner do player de vídeo local: Especifique o div do contêiner do player de vídeo local e as imagens de áudio e vídeo capturadas pelo navegador serão renderizadas neste div.

livePusher.setRenderView('local_video');

ilustrar

O elemento de vídeo gerado pela chamada setRenderView possui som por padrão. Se o som coletado do microfone for reproduzido, poderá ocorrer um fenômeno de eco. O elemento de vídeo pode ser silenciado para evitar o fenômeno de eco.

livePusher.videoView.muted = true;

Definir qualidade de captura de áudio e vídeo: Antes de capturar fluxos de áudio e vídeo, defina primeiro a qualidade de áudio e vídeo. Se os parâmetros de qualidade predefinidos não atenderem aos requisitos, você poderá personalizar as configurações separadamente.

// 设置视频质量
livePusher.setVideoQuality('720p');
// 设置音频质量
livePusher.setAudioQuality('standard');
// 自定义设置帧率
livePusher.setProperty('setVideoFPS', 25);

Comece a capturar streams: atualmente oferece suporte à captura de dispositivos de câmera, microfone, compartilhamento de tela, arquivos de mídia local e streams personalizados. Quando os fluxos de áudio e vídeo forem capturados com sucesso, as imagens de áudio e vídeo capturadas localmente começarão a ser reproduzidas no contêiner do player.

// 打开摄像头
livePusher.startCamera();
// 打开麦克风
livePusher.startMicrophone();

Iniciar push de transmissão ao vivo: passe o endereço de transmissão push ao vivo na nuvem para iniciar a transmissão push.

livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');

ilustrar

Antes de enviar o stream, certifique-se de que o stream de áudio e vídeo foi coletado, caso contrário, a chamada para a interface do stream push falhará. Se quiser enviar o stream automaticamente após coletar o stream de áudio e vídeo, você pode esperar que o stream de vídeo e o stream de áudio sejam coletados com sucesso antes de enviar o stream.

var hasVideo = false;
var hasAudio = false;
var isPush = false;
livePusher.setObserver({
 onCaptureFirstAudioFrame: function() {
   hasAudio = true;
   if (hasVideo && !isPush) {
     isPush = true;
     livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
   }
 },
 onCaptureFirstVideoFrame: function() {
   hasVideo = true;
   if (hasAudio && !isPush) {
     isPush = true;
     livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
   }
 }
});

Pare a transmissão ao vivo:

livePusher.stopPush();

Pare de capturar fluxos de áudio e vídeo:

// 关闭摄像头
livePusher.stopCamera();
// 关闭麦克风
livePusher.stopMicrophone();

Estratégia avançada

compatibilidade

O SDK fornece um método estático para detectar a compatibilidade do navegador com WebRTC.

TXLivePusher.checkSupport().then(function(data) {  
  // 是否支持WebRTC  
  if (data.isWebRTCSupported) {    
    console.log('WebRTC Support');  
  } else {    
    console.log('WebRTC Not Support');  
  }  
  // 是否支持H264编码  
  if (data.isH264EncodeSupported) {    
    console.log('H264 Encode Support');  
  } else {    
    console.log('H264 Encode Not Support');  
  }
});

notificação de evento de retorno de chamada

O SDK atualmente fornece notificações de eventos de retorno de chamada. Você pode definir eventos de retorno de chamada para entender as informações de status interno do SDK e as estatísticas relacionadas ao WebRTC.

livePusher.setObserver({
  // 推流警告信息
  onWarning: function(code, msg) {
    console.log(code, msg);
  },
  // 推流连接状态
  onPushStatusUpdate: function(status, msg) {
    console.log(status, msg);
  },
  // 推流统计数据
  onStatisticsUpdate: function(data) {
    console.log('video fps is ' + data.video.framesPerSecond);
  }
});

gerenciamento de dispositivo

O SDK fornece uma instância de gerenciamento de dispositivos TXDeviceManager para ajudar os usuários a obter a lista de dispositivos, alternar dispositivos e outras operações.

var deviceManager = livePusher.getDeviceManager();
// 获取设备列表
deviceManager.getDevicesList().then(function(data) {
  data.forEach(function(device) {
      console.log(device.deviceId, device.deviceName);  
  });
});
// 切换摄像头设备
deviceManager.switchCamera('camera_device_id');

Os benefícios deste artigo, pacote gratuito de materiais de aprendizagem de áudio e vídeo C++, vídeo/código técnico, incluindo (desenvolvimento de áudio e vídeo, perguntas de entrevista, FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, codec, fluxo push-pull, srs )↓↓↓ ↓↓↓Veja abaixo↓↓Clique no final do artigo para obtê-lo gratuitamente↓↓