Which codec strings are considered valid for the web codecs API?

I am searching for a definitive list of valid strings that can be passed as the `codec` parameter in `VideoEncoder.isConfigSupported({ codec, width, height })`, but I have been unable to find a clear answer so far:

  • The TS declaration file states that it must be a string (source)
  • A Google webcodec article mentions that `vp8` is a valid codec string
  • Navigating through the specs has proven to be challenging
    • The description provides insight into what a codec string should do but lacks an extensive list (source)
    • It specifies that the codec string must match certain patterns like `av01.*`, `avc1.*`, `vp8`, or `vp09.*`. Further exploration leads to additional links without clear information on these codec strings
  • An MDN page explains the rules for creating codec strings within mime types but experimentation yielded mixed results

Since only chromium-based browsers currently support this feature, I delved into the chromium source code and found more codec strings listed:

  • Tests in the webcodecs directory reveal additional codec strings such as `avc1.42001E`, `vp09.00.10.08`, etc.
  • Other codec strings are mentioned alongside different elements in various contexts
  • A test file also lists several codecs used with the `canPlayType` method

This array of information presents a challenge in determining the complete set of valid codecs for use with web codecs. What other resources could provide clarity on this matter?

(JavaScript code sample provided)

Answer №1

To ensure uniformity, the formatting guidelines outlined in the WebCodecs codec registry have been crafted to align with the specifications used in ISOBMFF. Depending on the particular codec in question, there may be a considerable amount of supplementary information included within the string, making the overall list vast and expansive.

For instance, when examining AV1, the ISOBMFF binding delineates the format as follows:

av01.<profile>.<level><tier>.<bitDepth>.<monochrome>.<chromaSubsampling>.
<colorPrimaries>.<transferCharacteristics>.<matrixCoefficients>.<videoFullRangeFlag>

It's worth noting that many of these elements are considered optional.

By and large, a codec string remains valid if it adheres to the parsing rules specified within the codec registration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code to output CSS styled text: "echo"

Implementing anti-adblock on my site was necessary, as my bitcoin faucet relies on ads to function. I wrote some code to detect adblock on the client's browser: function TestPage() { if ($('.advertisement').height() == 0) var advertisement ...

When the mouse is clicked, rotate the object along its axis using OBJ Loader in THREE.js

I am looking to add a feature where my object rotates on its axis when the mouse is dragged. The challenge I am facing is that I can only access my skull object within the function, which limits where I can place a rotation increment inside render(). Coul ...

Trouble with Displaying Angular Template using ng-hide

I am encountering an issue with my angular directive that is used to display a button form. The template remains hidden until it needs to be displayed for the user. Although the template works fine on its own, it does not appear when integrated into the la ...

Is there a way to implement an event listener for a customized select element within a table on a webpage?

I have a table that contains columns populated from a database. I also have a custom select dropdown in one of the columns, along with an update button. I want to create an event listener for the button that captures the user's selection from the cust ...

The keyboard automatically disappeared upon clicking the select2 input

Whenever I select the select2 input, the keyboard automatically closes $('select').on('select2:open', function(e) { $('.select2-search input').prop('focus',false); }); Feel free to watch this video for more i ...

Which target should be specified for pressing Enter in a Javascript Alert using Selenium IDE?

Seeking assistance with creating simple test cases using Selenium IDE. Encountering difficulties when recording test cases involving Javascript alerts, as Selenium does not support these pop-ups. Attempted a workaround by simulating the Enter key press wh ...

What is the best way to have NextJS add styles to the head in a production environment?

Typically, NextJS will include <style> tags directly in the head of your HTML document during development (potentially utilizing the style-loader internally). However, when running in production mode, NextJS will extract CSS chunks and serve them as ...

Exploring VueJS templating: Loading external templates

Being new to Vue.js, I have some experience with AngularJS where we used to load templates like this: template: '/sometemplate.html', controller: 'someCtrl' My question is how can we achieve something similar in Vue? Instead of embeddi ...

Disable the sorting feature on selected columns

I have a Datatable in JS with a scroll bar that I added using scrollY. However, it is displaying unnecessary small arrows within the table which I do not want. I have tried various methods to remove them but without success. Can someone please help me wi ...

Custom dropdown feature in Vue-tables2

Is there a way to customize the select dropdown style in vue-tables2 table? I am trying to change the entire template of the dropdown, not just add CSS classes. My custom template includes additional elements like span and div tags that need to be incorpor ...

Utilizing scroll functionality within a DIV container

I have the following Javascript code that enables infinite scrolling on a webpage. Now, I am looking to implement this feature within a specific DIV element. How can I modify this code to achieve infinite scroll functionality inside a DIV? Any assistance ...

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

My WordPress loadmore function is not providing any additional posts

Hey everyone, I'm facing a Wordpress issue that I can't seem to resolve. I've checked other posts but haven't found the solution yet. So, I decided to share my code here and seek help. My problem is with trying to load more posts using ...

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

Tips for only retrieving specific data from a JSON call

Is there a way to modify this code so that it only retrieves 5 items from the database? I would like to have a "get more" button to fetch another set of 5 items. The current code pulls in all available items: $.ajax({ url: 'getFeed.php', ...

Retrieving information from a separate JavaScript file

I'm currently developing a Discord Bot and my code is all contained within one file. My goal now is to break this code up into multiple files for better organization. For instance, I plan to have: index.js which will handle all the requires (e.g. var ...

Error Message: SCRIPT5 - Permission Denied When Trying to Open PDF with Javascript

Despite searching through multiple posts on SO, I have yet to find a solution to my issue. We operate a web form within our LAN that utilizes Javascript's OPEN function to open PDF files. Up until recently, everything was working smoothly. However, ...

What steps should I take to execute a unique function the very first time a user scrolls to a specific element?

The issue at hand: I am working with a sophisticated looping image carousel that needs to initiate - starting from a specified initial slide - as soon as the user scrolls to a specific division. It must not restart if the user scrolls up or down and then ...

Submitting a file to the Slack API via the files.upload method using jQuery

I'm attempting to upload a file on a webpage and send it to Slack using the Slack API. Initially, my code looked like this: var request = require('request'); $(".submit").click(function(){ request.post({ url: 'https://slack.co ...

Creating a Duplicate of the Higher Lower Challenge Game

To enhance my comprehension of React, I am constructing a replica of the website: Instead of utilizing Google searches, I opted for a dataset containing Premier League stadiums and their capacities. Up to this point, I have crafted the subsequent script: ...