Recentemente, tentei gerar vídeo no navegador e, portanto, joguei com duas abordagens:

Usando owhammy js library para combinar quadros de webp em vídeo de webm.Mais detalhes aqui.UsandoMediaRecorder ecanvas.captureStream. Mais detalhes aqui.

A abordagem whammy funciona bem, mas é suportada apenas no Chrome, pois é o único navegador que atualmente suporta a codificação webp (canvas.toDataURL("image/webp")) E então eu estou usando ocaptureStream abordagem como um backup para o Firefox (e usandolibwebpjs para o Safari).

Agora, agora, à minha pergunta: existe uma maneira de controlar a qualidade do vídeo do fluxo da tela? E se não, algo assim foi considerado pelos navegadores / w3c?

Aqui está uma captura de tela de um dos quadros do vídeo gerado pelo whammy:

E aqui está o mesmo quadro gerado peloMediaRecorder/canvas.captureStream aproximação:

Meu primeiro pensamento é aumentar artificialmente a resolução da tela que estou transmitindo, mas não quero que o vídeo de saída seja maior.

Tentei aumentar a taxa de quadros passada para ocaptureStream método (pensando que pode haver alguma coisa estranha de interpolação de quadro acontecendo), mas isso não ajuda. Na verdade, degrada a qualidade se eu a elevar muito. Minha teoria atual é que o navegador decide a qualidade do fluxo com base em quanto poder computacional ele tem acesso. Isso faz sentido, porque se ele vai acompanhar a taxa de quadros que eu especifiquei, então algo tem que dar.

Portanto, o próximo pensamento é que eu deva diminuir a taxa na qual estou alimentando a tela com imagens e, em seguida, diminuir proporcionalmente o valor do FPS em que passocaptureStream, mas o problema é que, embora eu provavelmente tenha resolvido o problema da qualidade, acabaria com um vídeo mais lento do que deveria.

Editar: Aqui está um esboço do código que estou usando, caso ajude alguém em uma situação semelhante.