Why does Firefox produce larger WebM video files compared with Chrome?

I and my team have been struggling lately to find an explanation why does Firefox produce larger WebM/VP8 video files compared with Chrome when using the MediaRecorder API in our project.

I and my team have been struggling lately to find an explanation why does Firefox produce larger WebM/VP8 video files compared with Chrome when using the MediaRecorder API in our project.

In short, we record a MediaStream from a HTMLCanvas via the captureStream method. In attempt to isolate everything from our app that might affect this, I developed a small dedicated test app which records a <canvas> and produces WebM files. I've been performing tests with the same footage, video duration, codec, A/V bit rate and frame rate. However, Firefox still ends up creating up to 4 times larger files compared with Chrome. I also tried using a different MediaStream source like the web camera but the results were similar.

Here is a fiddle which should demonstrate what I am talking about: https://jsfiddle.net/nzwasv8k/1/You can try recording 10-sec or 20-sec long videos on both FF and Chrome, and notice the difference between the file sizes. Note that I am using only 4 relatively simple frames/images in this demo. In real-world usage, like in our app where we record a video stream of a desktop, we reached the staggering x9 times difference.

I am not a video codec guru in any way but I believe that the browsers should follow the same specifications when implementing a certain technology; therefore, such a tremendous difference shouldn't occur, I guess. Considering my knowledge is limited, I cannot conclude whether this is a bug or something totally expected. This is why, I am addressing the question here since my research on the topic, so far, led to absolutely nothing. I'll be really glad, if someone can point what is the logical explanation behind it. Thanks in advance!

How to Install Google Chrome Web Browser on CentOS 8?

How to Install Google Chrome Web Browser on CentOS 8?

This tutorial explains how to install the Chrome Browser web browser on CentOS 8. Chrome is the most widely used web browser in the world.

Chrome Browser is the most widely used web browser in the world. It is fast, easy to use, and secure browser built for the modern web.

Chrome is not an open-source browser, and it is not included in the official CentOS repositories.

This tutorial explains how to install the Chrome Browser web browser on CentOS 8.

Installing Chrome Browser on CentOS 8

Follow these steps to install Chrome Browser on your CentOS 8:

  1. Open your terminal and download the latest Chrome 64-bit .rpm package with wget:

    wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
    
  2. Once the download is complete, run the following command as root or user with sudo privileges to install Chrome Browser:

    sudo dnf localinstall google-chrome-stable_current_x86_64.rpm
    

When prompted, enter your user password, and the installation will continue.

At this point, you have Chrome installed on your CentOS system.

Starting Chrome Browser

Now that Chrome Browser is installed on your CentOS system, you can launch it either from the command line by typing google-chrome & or by clicking on the Chrome icon (Activities -> Chrome Browser):

When Chrome Browser is started for the first time, it will ask you whether you want to make Chrome your default browser and to send usage statistic and crash reports to Google:

Select the checkboxes according to your preferences, and click OK to proceed.

Chrome Browser will open, and you’ll see the default welcome page.

From here, you can sign-in with your Google Account to sync your bookmarks, history, passwords, and install Chrome apps and extensions.

Updating Chrome Browser

During the package installation, the official Google repository will be added to your system. Use the following cat command to verify that the file exists:

cat /etc/yum.repos.d/google-chrome.repo
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/x86_64
enabled=1
gpgcheck=1
gpgkey=https://dl.google.com/linux/linux_signing_key.pub

When a new version is released, you can perform an update with dnf or through your desktop standard Software Update tool.

Conclusion

In this tutorial, we’ve shown you how to install Chrome Browser on CentOS 8 desktop systems. If you’ve previously used a different browser, like Firefox or Opera, you can import your bookmarks and settings into Chrome.

If you hit a problem or have feedback, leave a comment below.

Building Chrome Extensions

Building Chrome Extensions

Wanna learn how to build Chrome extensions? Then this one is probably for you.


Developing and building Chrome extensions from scratch is as cool and amazing as it sounds. And it’s not complicated as it may seem at a first view. In this post, we will be covering all the essentials required to create your own Chrome extensions and build a simple Chrome extension.

And the best part of developing these extensions is that you don’t need to be an expert web developer. Fundamental knowledge of HTML, CSS, and JS is enough to build your own extensions. So, without consuming any more of your time with this intro, let’s get started.

Chrome Extensions are built with four main ingredients -

  • Manifest file
  • Content Script
  • Background Script
  • Popup

There are more things needed but these are the most crucial ones.


Manifest file

It’s a JSON file. Think of it as package.json. It tells us about the version, configurations, name and all the details related while building an extension.

Create a directory named MyExtension(you can name anything you feel like, but in this post, I will refer to it by MyExtension) and inside it create a manifest.json file.

manifest.json

There are a lot more things to be added in this file, which we will see in a few minutes. For a deeper view into manifest file, feel free to look here.


Content Script

A content script bothers itself with the current web page’s content. So, if you want to access Document Object Model(DOM) of the current page from your Chrome extension then this script is where you do that. Any DOM manipulation code goes here.

But we want our manifest file to know where are our content scripts. For that, we have to modify our manifest file.

content_scripts added

Here, the ‘matches’ key is an array which can contain the URLs for which the content script is to be run. In the above example, we want to run the content script for every website so we use <all_urls>. Whenever the page loads, the content script runs.

Let’s create a file content.js in the same directory and write some code in it.

console.log(document);

Once we do that we are ready to put our extension on Chrome.

  • Go to chrome://extensions/ .
  • Activate the developer mode.
  • Click on the ‘load unpacked’ button and add your MyExtension directory.

And that’s it, your extension will be activated on your browser and when you visit a page you can open your browser console and check that you have the respective site’s document object.

Since we now know how to use content scripts. Let’s do something cool with it.

Suppose, I wanna change the filter of all the images of every website I visit, It’s very easy. I have to only change the content script.

document.querySelectorAll('img').forEach((item)=>{

item.style.filter = "grayscale(100%)";

});

Or I wanna speed up the video I watch

document.querySelectorAll('video').forEach((item)=>{

item.playbackRate = 2.0;

});

Ah, it’s okay. But not very useful

True. We want our ‘extension users’ to be able to decide the playback rate so that they control the speed of the video according to their needs, and I’ll get back to it but before that let’s have a look at the background scripts.

Note: Whenever you make changes to any file of the MyExtension directory, you must refresh the extension OR you can download another extension(Extension reloader), this reloads all the unpacked extensions with a single click on a icon.

Background Script

Extensions are event-based programs used to modify or enhance the Chrome browsing experience. Events are browser triggers, such as navigating to a new page, removing a bookmark, or closing a tab. Extensions monitor these events in their background script, then react with specified instructions.

In layman terms, whenever the chrome browser is opened, the background scripts listens for events and responds to these events.

Again we have to make changes in the manifest file for the background scripts,

Now, let’s create a background.js file and write the following code:-

conosle.log('I am a background script');

Now if you refresh and check again there is no message in Chrome console because background script is not a part of the web page.

Go to chrome://extensions, and there exists a ‘i_nspect background page_’ link. Just click on that and there will be a different console with the respective message.


Browser action

browser_actions is used to put icons in the main Google Chrome toolbar, to the right of the address bar. So again the manifest file is to be modified:-

manifest.json

Now, this icon is clickable(fire browser actions) and our background script can listen to these actions.


Communication between the background and the content script

Chrome uses three APIs for the communication between the content and the background script.

Let’s make some changes in the background scripts.

background.js

When we click the extension’s icon the background scripts sends the message using sendMessage’ method. The callback function has a tab argument which is basically an object that has all the data for the current tab.

While the content script listens for the event and gets the data_._

content.js

Once the icon is clicked, the background script sends the message to the content script.

Now let’s build a chrome extension that allows the user to control the playback speed of the video.

The aim of the extension -> The user clicks on the icon, a popup is created with a slider from which the user can control the speed of the video.


Popup’s

When a user clicks on the extension icon, we want to generate a popup. This popup is an HTML file. But first, we have to update our manifest.json file

"browser_action":{

"default_icon":"icon.png",

"default_popup":"popup.html"

}

We create a popup.html file in the ‘MyExtension’ directory.

popup.html


Communication between popup & content script

We want to increase or decrease the playback speed of any video, based upon the user input. The best approach would be to take the input in the popup(using a slider) and then pass the slider value to modify the playback rate to the content script.

First, create a popup.js file and update the popup.html file by adding the script tag in it.

popup.html

While in the popup.js file, we’ll take the slider value and pass it to the content script.

popup.js

The content scripts get the slider value from the popup and modify the playback speed.

content.js

WOHOOO!! Created our first useful chrome extension. For the complete code, check here.

There is a lot more to when building chrome extensions and this post is just to get you started with it. If you want to take your skills to another level, just check out the docs.


Conclusion

In this article, we learned about some cool stuff related to Chrome Extensions. Hope you liked this article and learned something new, and if you did, clap your 💖 out and follow me for more content. Thanks for reading 🙏 Please feel free to comment and ask anything.


Learn more

Learn HTML5 & CSS3 From Scratch - Make Responsive Websites

Full Stack Web Development with Angular and Spring MVC

Creating Web Sites using Python and Flask

Full Stack Developers: Everything You Need to Know

How to Perform Web-Scraping using Node.js

Build a web scraper with Node

Develop a basic website with .NET CORE 3.0 and pure JavaScript

The Web Developer Bootcamp

Angular 7 (formerly Angular 2) - The Complete Guide

The Complete JavaScript Course 2019: Build Real Projects!

Modern React with Redux [2019 Update]

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Build Responsive Real World Websites with HTML5 and CSS3

The Complete Web Developer Course 2.0

Originally published by Aayush Jaiswal at https://blog.bitsrc.io

Rspec and Chrome/headless flag

I've got headless Chrome and Chrome working for my Rspec tests. I want a flag to switch between the two so I can see the tests happen when I want and hide them when I don't. How can I implement something like:

I've got headless Chrome and Chrome working for my Rspec tests. I want a flag to switch between the two so I can see the tests happen when I want and hide them when I don't. How can I implement something like:

rspec --headless

Right now I just have this secret tied to a .env var:

Capybara.javascript_driver = Rails.application.secrets.headless ? :headless_chrome : :chrome