Tengo un MediaStream de un compañero remoto WebRTC desde el que me gustaría crear una grabación de video en el navegador.
Actualmente estoy creando el MediaRecorder así:
const recorder = new MediaRecorder(mediaStream);La secuencia original tiene una velocidad de fotogramas de, por ejemplo, 30 fps. Me gustaría que la grabación tuviera una velocidad de fotogramas más baja, por ejemplo, 12 fps.
Hasta ahora, la única estrategia que puedo encontrar es crear un lienzo intermedio, copiar repetidamente la secuencia original en el lienzo y crear una nueva secuencia con la velocidad de fotogramas deseada basada en el lienzo, algo como esto:
const video = document.getElementById('my_video_element'); // ... do more to set up video here video.srcObject = mediaStream; const canvas = document.createElement('canvas'); canvas.width = 1280; canvas.height = 720; setInterval(() => { canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); }, 18); const desiredFps = 12; const recorder = new MediaRecorder(canvas.captureStream(desiredFps));¿Hay una manera mejor/más sencilla?
Nota: Soy consciente de que la configuración videoBitsPerSecond se puede usar para reducir la tasa de bits de la grabación de salida. Pero encuentro que incluso para un valor de configuración de videoBitsPerSecond fijo, la reducción de los fps de la secuencia de lienzo reduce la tasa de bits efectiva de MediaRecorder.
Tienes el enfoque correcto. Estás haciendo un remuestreo temporal. Eso es lo que haría ffmpeg si lo hicieras con código nativo.
Si está comenzando con 30 fps, debe volver a muestrear a 10 fps o 15 fps. De esa manera, puede mantener cada otro cuadro decodificado, o cada tercer cuadro. Eso hace que la grabación se vea mejor.
Es posible volver a muestrear de 30 fps a 12 fps y obtener un resultado tolerable, pero es un monstruo computacional debido a la necesidad de interpolación temporal. ¿Confiar en el navegador WebRTC para hacer eso? No sabio.