What methods are commonly used to calculate the bitsPerSecond rate for media recording?

Is there a specific formula that combines frames per second and resolution to determine the bits per second for video encoding? I'm struggling to figure out the appropriate values to use for specifying the bits per second for 720p, 1080p, and 4k videos. I am considering whether the file type (webm or mp4) has an impact on this as well. I want to avoid unnecessarily large file sizes while ensuring smooth playback without glitches.

I came across some values listed in this resource... . However, I'm still unsure about how to properly apply them in my case.

My current setup involves using RecordRTC, a wrapper for MediaRecorder, which allows me to configure various settings including bits per second.

recorder = RecordRTC(camera, {
       recorderType: MediaStreamRecorder,
       mimeType: encoding_options,
       bitsPerSecond: bits_per_second,
       timeSlice: 15000,
       getNativeBlob: true
   });

Considering the above code snippet, I have been contemplating setting the bits per second value based on the camera resolution. However, I'm uncertain if the values I'm using are too high or too low.

var bits_per_second = 5000000;

if (current_camera_height > 2100){
  bits_per_second = 16777216
}

if (current_camera_height > 1000){
  bits_per_second = 7500000
}

Answer №1

To gain a better understanding of how video bitrate functions, I recommend checking out this informative article.

For optimal video quality on YouTube, it is advised to follow their recommended bitrates ( https://support.google.com/youtube/answer/1722171?hl=en#zippy=%2Cbitrate). Here are the suggested values:

bits_per_second = 40000000 for 4K video,
bits_per_second = 16000000 for 2K video,
bits_per_second = 8000000 for 1080p video,
bits_per_second = 5000000 for 720p video,
bits_per_second = 2500000 for 480p video,
bits_per_second = 1000000 for 360p video

Answer №2

Have you ever wondered about the bitrate required for uncompressed video?

BITRATE = SCREEN_SIZE_VERTICAL x SCREEN_SIZE_HORIZONTAL X FPS X PIXEL_COLOR_DEPTH
  • BITRATE: The bitrate is measured in bps (bits per second)
  • SCREEN_SIZE_VERTICAL: The vertical dimension of the screen in pixels
  • SCREEN_SIZE_HORIZONTAL: The horizontal size of the screen in pixels
  • FPS: frames per second
  • PIXEL_COLOR_DEPTH: The color depth of a single pixel.

You can associate resolutions like 720p, 1080p, and 4K with the following:

  • 720p: (1280 x 720)
  • 1080p: (1920 x 1080)
  • 4K: (3840 × 2160)

For instance, here are some details for 1080p, 24FPS, 3x8bit COLOR DEPTH video.

Uncompressed bitrate

Megapixels: 2.1 MP (2,073,600 pixels)
Aspect ratio: 1.78:1 (HD 16:9)
1 frame of RGB 3x8bit: 6.22MB (2.1 MP x 24 bits)
Interlaced: 24 fps x 6.22MB x 50% (interlacing) = 597.2Mbps = 74.65MB/s
Progressive: 24 fps x 6.22MB = 1.19Gbps = 149.3MB/s
Longer durations: 8.96GB/min = 537.48GB/hr
Estimated compressed bitrates
...

If you need help calculating bandwidth requirements for various video compression standards, try out this handy online tool.

Although not mentioned in the previous results, H.265 (or High Efficiency Video Coding - HEVC) offers significant bit rate reductions compared to H.264/MPEG-4 AVC HP according to the table below.

Video
coding       Average bit rate reduction
standard     compared with H.264/MPEG-4 AVC HP      
----------------------------------------------  
HEVC          480p  720p    1080p   2160p
----------------------------------------------
              52%    56%     62%     64%

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

Making a Request on Behalf of a Component in Vue.js Using Interceptors

Within my Vue application, I've implemented a response interceptor: axios.interceptors.response.use(function (config) { return config; }, error => { if (error.response.status !== 401) { return new Promise((resolve, ...

Step-by-step guide on how to showcase elements within v-for by clicking on them

In my data array, only the first element is visible by default. Clicking on either the YES or NO button will display the element with the corresponding id of yes_section or no_section (depending on which button was clicked). For instance, if we click on ...

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

Keys in React Native's ListView are used to uniquely identify

There is a warning in my app that is causing me some concern. React keeps prompting me to add keys for each row, but no matter what I try, I can't seem to include these keys. This is how my code looks: <ListView style={styles.listView} dat ...

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

Combine values within a single property of an object using the reduce method

My array consists of objects structured like this: let array = [{ "Age": 20, "Name": "Kevin" }, { "Age": 15, "Name": "Alfred" }, { "Age": 30, "Name": "Joe" }]; I am aiming to transform it into an object with combined values like t ...

What is the process for updating a placeholder text after the user makes a guess or enters

My latest project involves creating a fun guessing game where players have to identify the driver based on the teams they have driven for. The game displays the number of guesses allowed and keeps track of how many attempts the player has made so far. For ...

Is the behavior of undefined different in Chrome?

Upon examining my Asp masterpage, I noticed the following code snippet: <script> if (theForm !== undefined) { // <<== line 746: error theForm.onsubmit = ...bla bla... ; } </script> When checking the Chrome console, an er ...

Are you looking for methods to alter the elements of a webpage prior to viewing it?

I have created a page with the intention of using it as a tool, but I am facing some challenges due to my limited experience in this field. As a newcomer, I am struggling to achieve certain goals: - My objective is to modify the values of an element on a p ...

Implementing Autocomplete feature in Reactjs with Ant Design Library

In my React application, I created an autocomplete feature with a list of options for the user to select from. Example in Action: Click here to see the demo List of available options: const options = [ { label: "hello", value: "1" ...

Sending the image's identification number as a parameter to a function and showing the total number

On a static page, I have the following HTML markup: <div class="middle-content"> <div class="white-div"> <div class="like-buttons"> <img id="1" src="up.png" onclick="onClick(true, this.id)" /> &l ...

Encountering an issue with HTMLInputElement when trying to input an integer value into a label using JavaScript

script code intext = document.getElementById("intext"); totalin = document.getElementById("totalin"); function myFunction() { var x = document.getElementById("totalin"); x.innerHTML = intext.toString(); } The snippet above shows a JavaScript functio ...

Create two unique jQuery click events for the same element

I am working on a website where I have implemented a button that uses jQuery to change the CSS of certain elements when clicked. Now, I am looking for a way to assign another function to revert the CSS changes back to their original state when the button ...

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Exploring various JQuery performance tips on this insightful website Do you happen to know the significance of App.hiddenDivs ? ...

Leveraging Ajax in Django to communicate with the backend and showcase the outcome

I need assistance with implementing ajax functionality to send user input to a Django backend for text processing, and then display the results. However, due to my limited experience with ajax, I'm struggling to figure out where I'm going wrong. ...

Can I programmatically retrieve a comprehensive list of all global HTML attributes available?

Exploring the extensive list of global HTML attributes can be overwhelming, especially when considering how it continues to evolve with browser updates. Can JavaScript be leveraged to dynamically generate a complete list of these attributes without the ne ...

Ways to update a component when the state changes

When attempting to access components that require authentication, I want to redirect to the login page if the user is not logged in. However, I am facing an issue with initializing the firebase auth object, as there is a small delay. The documentation sugg ...

The Kenburn zoom image effect fails to function

I want to implement a zoom effect on an image using the Ken Burns effect when it is clicked. However, the code I have written does not seem to be working as expected. Here is the code snippet: $(document).ready(function () { $('.kenburns').on( ...

Utilizing the NuxtJS framework to tap into video camera functionalities

I am completely new to Vue and NuxtJs. My goal is to create a webcam feature using NuxtJs, but I have encountered some challenges. <template> <div class="photobooth"> <div class="controls"> <button @click="takePhoto">Ta ...

React is displaying [object Object] instead of the intended value on the webpage. What steps can be taken to resolve this issue?

I have attempted to retrieve data from an API and am currently working on displaying this data within a table cell inside a component. Instead of rendering the original data, React is displaying [object Object]. I tried using the join() method with commas ...