更改MediaRecorder和canvas.captureStream的质量？ [英] Changing quality of MediaRecorder and canvas.captureStream?

问题描述

我最近一直在尝试在浏览器中生成视频，因此一直在使用两种方法：

• 使用<一个href = https://github.com/antimatter15/whammy rel = nofollow noreferrer> whammy js库，可将webp帧组合成webm视频。
  
  
  

  这是同一帧由 MediaRecorder / canvas.captureStream 方法生成：

  
  
  
  
  
  

  我的第一个想法是人为地提高我正在流式传输的画布的分辨率，但是我不希望输出的视频更大。 p>
  
  

  我尝试增加传递给 captureStream 方法的帧速率（认为可能存在一些奇怪的帧）插值事件），但这无济于事。如果我将其设置得太高，它实际上会降低质量。我目前的理论是，浏览器根据访问流的质量来决定流的质量。这是有道理的，因为如果要跟上我指定的帧速率，那么就必须有所帮助。

  
  
  

  所以下一个想法是我应该减慢我向画布上输入图像的速度，然后按比例降低我传递到 captureStream 的FPS值，但是即使这样，问题仍然在于我可能已经解决了质量问题，然后最终得到了比预期运行速度慢的视频。

  
  
  

  编辑： 这里是我正在使用的代码的粗略概述，以防万一

  解决方案

  这些是压缩工件，您目前无能为力...

  
  
  

  视频编解码器主要是通过显示真实的颜色和形状来构建的，有点像JPEG，但质量很差。他们还将尽最大努力在关键帧之间保留尽可能少的信息（某些情况下使用运动检测算法），以便他们需要存储的数据更少。

  
  
  

  这些编解码器通常具有一些可配置的设置，这些设置可以使我们改善编码的恒定质量，但是MediaRecorder的规范与编解码器无关，但它们并未提供（至今）中为我们的网络开发人员提供的API中的一个选项，用于设置固定比特率以外的其他任何选项（在这里无法为我们提供更多帮助）。

  
  
  

  有是此提案，但它要求具有此功能。

  
  

  I've recently been trying to generating video in the browser, and have thus been playing with two approaches:

  • Using the whammy js library to combine webp frames into webm video. More details here.
  • Using MediaRecorder and canvas.captureStream. More details here.

  The whammy approach works well, but is only supported in Chrome, since it's the only browser that currently supports webp encoding (canvas.toDataURL("image/webp")). And so I'm using the captureStream approach as a backup for Firefox (and using libwebpjs for Safari).

  So now on to my question: Is there a way to control the video quality of the canvas stream? And if not, has something like this been considered by the browsers / w3c?

  Here's a screenshot of one of the frames of the video generated by whammy:

  And here's the same frame generated by the MediaRecorder/canvas.captureStream approach:

  My first thought is to artificially increase the resolution of the canvas that I'm streaming, but I don't want the output video to be bigger.

  I've tried increasing the frame rate passed to the captureStream method (thinking that there may be some strange frame interpolation stuff happening), but this doesn't help. It actually degrades quality if I make it too high. My current theory is that the browser decides on the quality of the stream based on how much computational power it has access to. This makes sense, because if it's going to keep up with the frame rate that I've specified, then something has to give.

  So the next thought is that I should slow down the rate at which I'm feeding the canvas with images, and then proportionally lower the FPS value that I pass into captureStream, but the problem with that is that even though I'd likely have solved the quality problem, I'd then end up with a video that runs slower than it's meant to.

  Edit: Here's a rough sketch of the code that I'm using, in case it helps anyone in a similar situation.

  解决方案

  These are compression artifacts, and there is not much you can do for now...

  Video codecs are built mainly with the idea of showing real-life colors and shapes, a bit like JPEG with a really low quality. They will also do their best to keep as less information as they can between keyframes (some using motion detection algorithm) so that they need less data to be stored.

  These codecs normally have some configurable settings that will allow us to improve the constant-quality of the encoding, but MediaRecorder's specs being codec agnostic, they didn't provide (yet) an option in the API for us web-devs to set any other option than a fixed bit-rate (which won't help us more in here).

  There is this proposal, which asks for such a feature though.

  这篇关于更改MediaRecorder和canvas.captureStream的质量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！