Cloud Live proporciona un SDK de transmisión TXLivePusher para transmisión web, que es responsable de enviar las imágenes de audio y video capturadas por el navegador al servidor de transmisión en vivo a través del protocolo WebRTC. Actualmente, admite la recopilación de cámaras, la recopilación de micrófonos, la recopilación de pantalla compartida, la recopilación de archivos multimedia locales y la recopilación definida por el usuario, entre otros métodos de recopilación. Admite el procesamiento de flujo mixto local del contenido recopilado y luego lo envía al servidor back-end.
Aviso
Al utilizar el protocolo WebRTC para enviar transmisiones, cada nombre de dominio de inserción tiene un límite predeterminado de 1000 transmisiones de inserción simultáneas . Si necesita exceder este límite, puede contactarnos para presentar una solicitud enviando una orden de trabajo.
Los beneficios de este artículo, paquete gratuito de materiales de aprendizaje de audio y video de C ++, video/código técnico, incluido (desarrollo de audio y video, preguntas de entrevista, FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, codec, push-pull stream, srs )↓↓↓ ↓↓↓Ver más abajo↓↓Haga clic en la parte inferior del artículo para obtenerlo gratis↓↓
conocimiento básico
Antes de atracar, es necesario conocer los siguientes conocimientos básicos:
Montaje de dirección de streaming
Cuando se utiliza el servicio de transmisión en vivo de Tencent Cloud, la dirección de transmisión debe cumplir con el formato de la URL de transmisión en vivo estándar de Tencent Cloud, como se muestra a continuación, que consta de cuatro partes:
La parte de la clave de autenticación no es necesaria. Si necesita evitar el enlace directo, habilite la autenticación push.
soporte del navegador
La transmisión web se implementa en base a WebRTC y depende de la compatibilidad de los sistemas operativos y navegadores para WebRTC. Actualmente, las últimas versiones de los navegadores Chrome, Edge, Firefox y Safari admiten la transmisión web.
Aviso:
Algunas funciones del navegador para capturar imágenes de audio y video están restringidas en el terminal móvil H5. Por ejemplo, el navegador del terminal móvil no admite compartir pantalla y las versiones de iOS 14.3 y superiores solo admiten la obtención del dispositivo de cámara del usuario.
Estrategia de atraque
Paso 1: preparación de la página
Introduzca scripts de inicialización en páginas que requieran transmisión en vivo.
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>ilustrar
El script debe introducirse en la parte del cuerpo del HTML y se informará un error si se introduce en la parte del encabezado.
Paso 2: Colocar contenedores en HTML
Agregue un contenedor de reproductor a la página donde se deben mostrar las imágenes de audio y video locales, es decir, coloque un div y asígnele un nombre, como local_video, y las imágenes de video locales se representarán en el contenedor. Para controlar el tamaño del contenedor, puede usar el estilo CSS de div para controlar. El código de muestra es el siguiente:
<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>Paso 3: transmisión en vivo ,
Generar instancia de SDK de transmisión: genere una instancia de SDK a través del objeto global TXLivePusher y las operaciones de seguimiento se completan a través de la instancia.
const livePusher = new TXLivePusher();Especifique el contenedor del reproductor de video local: especifique el div del contenedor del reproductor de video local y las imágenes de audio y video capturadas por el navegador se representarán en este div.
livePusher.setRenderView('local_video');ilustrar
El elemento de video generado al llamar a setRenderView tiene sonido por defecto. Si se reproduce el sonido recolectado por el micrófono, puede ocurrir un fenómeno de eco. El elemento de vídeo se puede silenciar para evitar el fenómeno del eco.
livePusher.videoView.muted = true;Configure la calidad de captura de audio y video: antes de capturar transmisiones de audio y video, configure primero la calidad de audio y video. Si los parámetros de calidad preestablecidos no cumplen con los requisitos, puede personalizar la configuración por separado.
// 设置视频质量
livePusher.setVideoQuality('720p');
// 设置音频质量
livePusher.setAudioQuality('standard');
// 自定义设置帧率
livePusher.setProperty('setVideoFPS', 25);Comenzar a capturar transmisiones: actualmente admite la captura de dispositivos de cámara, dispositivos de micrófono, uso compartido de pantalla, archivos multimedia locales y transmisiones personalizadas. Cuando las transmisiones de audio y video se capturen correctamente, las imágenes de audio y video capturadas localmente comenzarán a reproducirse en el contenedor del reproductor.
// 打开摄像头
livePusher.startCamera();
// 打开麦克风
livePusher.startMicrophone();Iniciar transmisión en vivo: pase la dirección de transmisión en vivo en la nube para iniciar la transmisión en vivo.
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');ilustrar
Antes de enviar la transmisión, asegúrese de que se haya recopilado la transmisión de audio y video; de lo contrario, la llamada a la interfaz de transmisión de inserción fallará. Si desea enviar automáticamente la transmisión después de recopilar la transmisión de audio y video, puede esperar a que la transmisión de video y la transmisión de audio se recopilen correctamente antes de enviar la transmisión.
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');
}
}
});Detener la transmisión en vivo:
livePusher.stopPush();Deje de capturar transmisiones de audio y video:
// 关闭摄像头
livePusher.stopCamera();
// 关闭麦克风
livePusher.stopMicrophone();Estrategia avanzada
compatibilidad
El SDK proporciona un método estático para detectar la compatibilidad del navegador con 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');
}
});notificación de evento de devolución de llamada
Actualmente, el SDK proporciona notificaciones de eventos de devolución de llamada. Puede configurar eventos de devolución de llamada para comprender la información de estado interna del SDK y las estadísticas relacionadas con 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);
}
});gestión de dispositivos
El SDK proporciona una instancia de administración de dispositivos TXDeviceManager para ayudar a los usuarios a obtener la lista de dispositivos, cambiar de dispositivo y otras operaciones.
var deviceManager = livePusher.getDeviceManager();
// 获取设备列表
deviceManager.getDevicesList().then(function(data) {
data.forEach(function(device) {
console.log(device.deviceId, device.deviceName);
});
});
// 切换摄像头设备
deviceManager.switchCamera('camera_device_id');Los beneficios de este artículo, paquete gratuito de materiales de aprendizaje de audio y video de C ++, video/código técnico, incluido (desarrollo de audio y video, preguntas de entrevista, FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, codec, push-pull stream, srs )↓↓↓ ↓↓↓Ver más abajo↓↓Haga clic en la parte inferior del artículo para obtenerlo gratis↓↓