Skip to content

Instantly share code, notes, and snippets.

@Djuffin
Last active November 27, 2023 22:20
Show Gist options
  • Save Djuffin/c3742404b7c53ada227849c8b2b76b4c to your computer and use it in GitHub Desktop.
Save Djuffin/c3742404b7c53ada227849c8b2b76b4c to your computer and use it in GitHub Desktop.
Explainer for VideoEncoderConfig.contentHint

VideoEncoderConfig.contentHint

Problem and Motivation

Webcam content often require denoising and is often intelligible even when downscaled or with high quantization levels. Screencast content of presentations or webpages with a lot of text content is completely unintelligible if the quantization levels are too high or if the content is downscaled or otherwise blurry.

Video encoding libraries (like libvpx, OpenH264) provide a way for API users to inform the encoder about type of the encoded content. In some cases the web application can make a more-educated guess or take user input, but currently there is no way to inform VideoEncoder what kind of content is being encoded.

Proposed solutions

Add a new field to VideoEncoderConfig

Let's add a contentHint field to VideoEncoderConfig. It will take video content hint values that are already used for MediaStreamTrack: "motion", "text", "detail".

This gives web developers a way to communicate to VideoEncoder the expected type of the content they intent to encode. This setting is not intended to replace encoder-level settings completely but rather complement them with a simpler hint that does not require broad knowledge of video encoders.

Sample

const encoder_config = {
  codec: 'vp8',
  width: 1280,
  height: 720,
  bitrate: 3000000,
  bitrateMode: 'constant',
  framerate: 30,
  latencyMode: 'realtime',
  contentHint: 'detail' // We're going to encode things captured from a <canvas>
};

const init = {
  output: (chunk, config) => {
    console.log(chunk.byteLength);
  },
  error: (e) => {
    console.log(e.message);
  }
};

const support = await VideoEncoder.isConfigSupported(encoder_config);
if (!support.supported) {
  return;
}

let encoder = new VideoEncoder(init);
encoder.configure(encoder_config);

// Capture a video frame from <canvas>
const frame = new VideoFrame(canvas, { timestamp: performance.now() * 1000 });

// Encode it
encoder.encode(frame); 
frame.close();

Links

  1. MediaStreamTrack Content Hints: https://www.w3.org/TR/mst-content-hint/#video-content-hints
  2. WebCodecs video content hint: https://www.w3.org/TR/webcodecs/#dom-videoencoderconfig-contenthint
  3. Chromium implementation CL: https://chromium-review.googlesource.com/c/chromium/src/+/4953613
  4. w3c Media Working Group discussion: https://www.w3.org/2023/06/13-mediawg-minutes.html#t01

Self-Review Questionnaire: Security and Privacy

Questions to Consider

  1. What information might this feature expose to Web sites or other parties, and for what purposes is that exposure necessary?

    no new information

  2. Do features in your specification expose the minimum amount of information necessary to enable their intended uses? yes

  3. How do the features in your specification deal with personal information, personally-identifiable information (PII), or information derived from them?

    Content hint is not personal infomation and VideoEncoder discards it after encoding is done.

  4. How do the features in your specification deal with sensitive information?

    The feature doesn't deail with sensitive information

  5. Do the features in your specification introduce new state for an origin that persists across browsing sessions?

    No

  6. Do the features in your specification expose information about the underlying platform to origins?

    No

  7. Does this specification allow an origin to send data to the underlying platform?

    No

  8. Do features in this specification enable access to device sensors?

    No

  9. Do features in this specification enable new script execution/loading mechanisms?

    No

  10. Do features in this specification allow an origin to access other devices?

    No

  11. Do features in this specification allow an origin some measure of control over a user agent’s native UI?

    No

  12. What temporary identifiers do the features in this specification create or expose to the web?

    No

  13. How does this specification distinguish between behavior in first-party and third-party contexts?

    Doesn't distinguish

  14. How do the features in this specification work in the context of a browser’s Private Browsing or Incognito mode?

    No difference.

  15. Does this specification have both "Security Considerations" and "Privacy Considerations" sections?

  16. Do features in your specification enable origins to downgrade default security protections?

    No

  17. How does your feature handle non-"fully active" documents?

    N/A

  18. What should this questionnaire have asked?

    Too many questions already.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment