Cron allows Linux and Unix users to run commands or scripts at a given date and time. You can schedule scripts to be executed periodically. Cron is one of the most useful tool in a Linux or UNIX like operating systems. It is usually used for sysadmin jobs such as backups or cleaning /tmp/ directories and more. The cron service (daemon) runs in the background and constantly checks the /etc/crontab file, and /etc/cron.*/ directories. It also checks the /var/spool/cron/ directory.

<h2>Types of cron configuration files</h2>

There are different types of configuration files:

<ul>
<li>The UNIX / Linux system <a href="../../../../blog/what-is-crontab/">crontab</a>: Usually, used by system services and critical jobs that requires root like privileges. The sixth field (see below for field description) is the name of a user for the command to run as. This gives the system crontab the ability to run commands as any user.</li>
<li>The user crontabs: User can install their own cron jobs using the crontab command. The sixth field is the command to run, and all commands run as the user who created the crontab</li>
</ul>

<h2>How Do I install or create or edit my own cron jobs?</h2>

To edit or create your own crontab file, type the following command at the UNIX / Linux shell prompt:

<pre class="wp-block-code"><code>crontab -e</code></pre>

<h2>Do I have to restart cron after changing the crontable file?</h2>

No. Cron will examine the modification time on all crontabs and reload those which have changed. Thus cron need not be restarted whenever a crontab file is modified.

<h2>Syntax of crontab</h2>

The syntax is:

<pre class="wp-block-code"><code>* * * * * /path/to/command args1 args2</code></pre>

Where

<ul>
<li>First Star: Minute (0-59)</li>
<li>Second Star: Hours (0-23)</li>
<li>Third Star: Day (0-31)</li>
<li>Fourth Star: Month (0-12 [12 == December])</li>
<li>Fifth Star: Day of the week(0-7 [7 or 0 == sunday])</li>
<li>/path/to/command &ndash; Script or command name to schedule</li>
<li>args1: any other required arguments (Optional)</li>
</ul>

Easy to remember format:

<pre class="wp-block-code"><code>* * * * * command to be executed
- - - - -
| | | | |
| | | | ----- Day of week (0 - 7) (Sunday=0 or 7)
| | | ------- Month (1 - 12)
| | --------- Day of month (1 - 31)
| ----------- Hour (0 - 23)
------------- Minute (0 - 59)</code></pre>

<h2>How do I use operators?</h2>

An operator allows you to specifying multiple values in a field. There are three operators:

<ol>
<li>The asterisk (*)&nbsp;: This operator specifies all possible values for a field. For example, an asterisk in the hour time field would be equivalent to every hour or an asterisk in the month field would be equivalent to every month.</li>
<li>The comma (,)&nbsp;: This operator specifies a list of values, for example: &ldquo;1,5,10,15,20, 25&rdquo;.</li>
<li>The dash (-)&nbsp;: This operator specifies a range of values, for example: &ldquo;5-15&rdquo; days , which is equivalent to typing &ldquo;5,6,7,8,9,&hellip;.,13,14,15&rdquo; using the comma operator.</li>
<li>The separator (/)&nbsp;: This operator specifies a step value, for example: &ldquo;0-23/&rdquo; can be used in the hours field to specify command execution every other hour. Steps are also permitted after an asterisk, so if you want to say every two hours, just use */2</li>
</ol>

<h2>Use special string to save time</h2>

Instead of the first five fields, you can use any one of eight special strings. It will not just save your time but it will improve readability.

<figure class="wp-block-table">
<table>
<tbody>
<tr>
<td>Special string</td>
<td>Meaning</td>
</tr>
<tr>
<td>@reboot</td>
<td>Run once, at startup.</td>
</tr>
<tr>
<td>@yearly</td>
<td>Run once a year, &ldquo;0 0 1 1 *&rdquo;.</td>
</tr>
<tr>
<td>@annually</td>
<td>(same as @yearly)</td>
</tr>
<tr>
<td>@monthly</td>
<td>Run once a month, &ldquo;0 0 1 * *&rdquo;.</td>
</tr>
<tr>
<td>@weekly</td>
<td>Run once a week, &ldquo;0 0 * * 0&rdquo;.</td>
</tr>
<tr>
<td>@daily</td>
<td>Run once a day, &ldquo;0 0 * * *&rdquo;.</td>
</tr>
<tr>
<td>@midnight</td>
<td>(same as @daily)</td>
</tr>
<tr>
<td>@hourly</td>
<td>Run once an hour, &ldquo;0 * * * *&rdquo;.</td>
</tr>
</tbody>
</table>
</figure>

<h2>Examples</h2>

Run ntpdate command every hour:

<pre class="wp-block-code"><code>@hourly /path/to/ntpdate</code></pre>

Make a backup everyday:

<pre class="wp-block-code"><code>@daily /path/to/backup/script.sh</code></pre>

&nbsp;

Cron allows Linux and Unix users to run commands or scripts at a given date and time. You can schedule scripts to be executed periodically.

What are Cronjobs? - TCMHACK

What are Cronjobs?

A crontab file contains instructions for the&nbsp;cron daemon in the following simplified manner: "run this command at this time on this date". Each user can define their own crontab. Commands defined in any given crontab are executed under the user who owns that particular crontab. Uucp and News usually have their own crontabs, eliminating the need for explicitly running su as part of a cron command.

Blank lines, leading spaces, and tabs are ignored. Lines whose first non-white space character is a pound-sign (#) are comments, and are not processed. Note that comments are not allowed on the same line as cron commands, since they are considered a part of the command. Similarly, comments are not allowed on the same line as environment variable settings.

An active line in a crontab is either an environment setting or a cron command. An environment setting is of the form:

<pre class="wp-block-preformatted">name = value</pre>

where the white spaces around the equal-sign (=) are optional, and any subsequent non-leading white spaces in value is a part of the value assigned to name. The value string may be placed in quotes (single or double, but matching) to preserve leading or trailing white spaces.

Several environment variables are set up automatically by the cron daemon. SHELL is set to /bin/sh, and LOGNAME and HOME are set from the /etc/passwd line of the crontab&acute;s owner. HOME and SHELL can be overridden by settings in the crontab; LOGNAME can not.

(Note: the LOGNAME variable is sometimes called USER on BSD systems and is also automatically set).

In addition to LOGNAME, HOME, and SHELL, cron looks at the MAILTO variable if a mail needs to be send as a result of running any commands in that particular crontab. If MAILTO is defined (and non-empty), mail is sent to the specified address. If MAILTO is defined but empty (MAILTO=""), no mail is sent. Otherwise, mail is sent to the owner of the crontab. This option is useful if you decide to use /bin/mail instead of /usr/lib/sendmail as your mailer. Note that /bin/mail does not provide aliasing and UUCP usually does not read its mail. If MAILFROM is defined (and non-empty), it is used as the envelope sender address, otherwise, ``root'' is used.

By default, cron sends a mail using the 'Content-Type:' header of 'text/plain' with the 'charset=' parameter set to the 'charmap/codeset' of the locale in which crond is started up, i.e., either the default system locale, if no LC_* environment variables are set, or the locale specified by the LC_* environment variables. Different character encodings can be used for mailing cron job outputs by setting the CONTENT_TYPE and CONTENT_TRANSFER_ENCODING variables in a crontab to the correct values of the mail headers of those names.

The CRON_TZ variable specifies the time zone specific for the cron table. The user should enter a time according to the specified time zone into the table. The time used for writing into a log file is taken from the local time zone, where the daemon is running.

The MLS_LEVEL environment variable provides support for multiple per-job SELinux security contexts in the same crontab. By default, cron jobs execute with the default SELinux security context of the user that created the crontab file. When using multiple security levels and roles, this may not be sufficient, because the same user may be running in different roles or in different security levels.

The RANDOM_DELAY variable allows delaying job startups by random amount of minutes with upper limit specified by the variable. The random scaling factor is determined during the cron daemon startup so it remains constant for the whole run time of the daemon.

The time and date fields are:

<pre class="wp-block-code"><code>field allowed values
----- --------------
minute 0-59
hour 0-23
day of month 1-31
month 1-12 (or names, see below)
day of week 0-7 (0 or 7 is Sunday, or use names)</code></pre>

A field may contain an asterisk (*), which always stands for "first-last".

Ranges of numbers are allowed. Ranges are two numbers separated with a hyphen. The specified range is inclusive. For example, 8-11 for an 'hours' entry specifies execution at hours 8, 9, 10, and 11. The first number must be less than or equal to the second one.

Lists are allowed. A list is a set of numbers (or ranges) separated by commas. Examples: "1,2,5,9", "0-4,8-12".

<h4>EXAMPLE CRON FILE</h4>

<pre class="wp-block-code"><code># use /bin/sh to run commands, no matter what /etc/passwd says
SHELL=/bin/sh
# mail any output to `paul', no matter whose crontab this is
MAILTO=paul
#
CRON_TZ=Japan
# run five minutes after midnight, every day
5 0 * * * $HOME/bin/daily.job &gt;&gt; $HOME/tmp/out 2&gt;&amp;1
# run at 2:15pm on the first of every month -- output mailed to paul
15 14 1 * * $HOME/bin/monthly
# run at 10 pm on weekdays, annoy Joe
0 22 * * 1-5 mail -s "It's 10pm" joe%Joe,%%Where are your kids?%
23 0-23/2 * * * echo "run 23 minutes after midn, 2am, 4am ..., everyday"
5 4 * * sun echo "run at 5 after 4 every sunday"</code></pre>

<h4>Jobs in /etc/cron.d/</h4>

The jobs in cron.d and /etc/crontab are system jobs, which are used usually for more than one user, thus, additionally the username is needed. MAILTO on the first line is optional.

<h4>EXAMPLE OF A JOB IN /etc/cron.d/job</h4>

<pre class="wp-block-code"><code>#login as root
#create job with preferred editor (e.g. vim)
MAILTO=root
* * * * * root touch /tmp/file</code></pre>

<h4>SELinux with multi level security (MLS)</h4>

In a crontab, it is important to specify a security level by crontab -s or specifying the required level on the first line of the crontab. Each level is specified in /etc/selinux/targeted/seusers. When using crontab in the MLS mode, it is especially important to:

<ul>
<li>check/change the actual role,</li>
<li>set correct role for directory, which is used for input/output.</li>
</ul>

<h4>EXAMPLE FOR SELINUX MLS</h4>

<pre class="wp-block-code"><code># login as root
newrole -r sysadm_r
mkdir /tmp/SystemHigh
chcon -l SystemHigh /tmp/SystemHigh
crontab -e
# write in crontab file
MLS_LEVEL=SystemHigh
0-59 * * * * id -Z &gt; /tmp/SystemHigh/crontest</code></pre>

<h4>FILES</h4>

<ul>
<li>/etc/crontab main system crontab file.</li>
<li>/var/spool/cron/ a directory for storing crontabs defined by users.</li>
<li>/etc/cron.d/ a directory for storing system crontabs.</li>
</ul>

<h4>EXTENSIONS</h4>

These special time specification "nicknames" which replace the 5 initial time and date fields, and are prefixed with the '@' character, are supported:

<pre class="wp-block-code"><code>@reboot : Run once after reboot.
@yearly : Run once a year, ie. "0 0 1 1 *".
@annually : Run once a year, ie. "0 0 1 1 *".
@monthly : Run once a month, ie. "0 0 1 * *".
@weekly : Run once a week, ie. "0 0 * * 0".
@daily : Run once a day, ie. "0 0 * * *".
@hourly : Run once an hour, ie. "0 * * * *".</code></pre>

A crontab file contains instructions for the cron daemon in the following simplified manner: "run this command at this time on this date". Each user can define their own crontab. Commands defined in any given crontab are executed under the user who owns that particular crontab.

What is Crontab?

Google is adding support for native lazy loading to the latest version of the Chrome browser &ndash; Chrome 76.

In an&nbsp;<a href="https://web.dev/native-lazy-loading" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">announcement</a>, the company states:

<blockquote class="wp-block-quote">
&ldquo;Starting with Chrome 76, you&rsquo;ll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library.&rdquo;
</blockquote>

Lazy loading delays the loading of &nbsp;below-the-fold images until the user begins scrolling closer to them.

The end result is faster load times, minimized bandwidth for users, and reduced memory usage.

Previously, in order to take advantage of lazy loading, developers either had to use the Intersection Observer API or implement complicated event handlers.

Now, with lazy loading supported directly within Chrome, developers can add a simple &lsquo;loading&rsquo; attribute when embedding images.

Here&rsquo;s what the code looks when adding the loading attribute to an image and an iframe:
<img src="../../../../uploads/1744738501928-2f84104d-2d77-4279-a2d7-f4f3a461d8bf-1024x137.jpeg" alt="" width="1024" height="137">
You don&rsquo;t even need the expertise of a developer to implement the loading attribute, as long as you have some basic knowledge of HTML. This makes lazy loading accessible to many more site owners.

The loading attribute supports the following values:

<ul>
<li>auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.</li>
<li>lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.</li>
<li>eager: Load the resource immediately, regardless of where it&rsquo;s located on the page.</li>
</ul>

This feature will continue to be updated until the stable version of Chrome 76 is released.

The old method of implementing lazy loading via JavaScript is still required for browsers that do not support the new &lsquo;loading&rsquo; attribute.

Google is adding support for native lazy loading to the latest version of the Chrome browser – Chrome 76.



In an announcement, the company stat...

Google Chrome Will Soon Support Lazy Loading at the Browser-Level - TCMHACK

Google Chrome Will Soon Support Lazy Loading at the Browser-Level

Angular&nbsp;has turned out to be one of the most widely used&nbsp;web development frameworks.&nbsp;

The MVVM pattern (model view view-model) has helped Angular in becoming quite popular with the developer community. While most frameworks available today are simply a package of tools, Angular takes this experience to the next level, where each tool is designed to work with every other tool in an interconnected way.&nbsp;

Here are 5 reasons why you should use Angular:&nbsp;

#1. MVC model

Most&nbsp;JS frameworks&nbsp;implement the Model-View-Controller or MVC by splitting the app into various MVC components. This requires you to write code to string them up together. This framework manages your components for you and servers as a pipeline, connecting them together.&nbsp;

#2. HTML user interface

HTML is at the heart of the Angular framework as it is used to define the app&rsquo;s user interface. A declarative user interface is more intuitive than any other interface defined, using say JavaScript. The declarative approach tends to simplify app development because of the WYSIWYG (what you see is what you get) interface.&nbsp;

#3. Interconnection with directives

Angular uses directives to bring additional functions to HTML. You don't have to manipulate the DOM rich elements in HTML. All that the app has to do is assign attributes to elements to get any functionality out of the box. Directives are designed to be used as standalone reusable elements.&nbsp;

#4. Write less code

You don't have to write your own MVC. HTML defines the view, which is more concise. Data models are simpler to write without using getters or setters. Data binding means you don have to put data into the view manually. You can leverage filters to manipulate data on the view level, without changing controllers. All this ends up helping you write less amount of code.&nbsp;

#5. Unit testing

Angular is linked together by Dependency Injection (DI). It is used to manage your controllers and scopes. Since controllers depend on DI to pass information, Angular's unit tests are capable of usurping DI to perform unit testing. DI can inject mock data into controller and measure the output and behavior. The unit testing readiness beats the traditional way of testing web apps by creating test pages.

Angular has turned out to be one of the most widely used web development frameworks. The MVVM pattern (model view view-model) has helped Angu...

5 Reasons why Angular is the best web development framework - TCMHACK

5 Reasons why Angular is the best web development framework

In this blog, let’s see what we should expect from the Angular 8 release. 

Good News. Angular 8 is coming - TCMHACK

Good News. Angular 8 is coming

Visual Studio Code 1.34 has been released and includes enhancements for Remote Development as Preview. In addition, new features for the editor and the debugging as well as a new documentation are on board.

Microsoft has released the latest version of its free source code editor Visual Studio Code. The April release, VS Code 1.34, includes some new features, including previewing for VS-Code Insiders, a Python tutorial for use with Azure Functions, and What&rsquo;s New for Vetur. A debugging milestone is also announced by Microsoft.

<h2>Remote Development for Insiders</h2>

In April, Microsoft worked on new VS Code&nbsp;Extensions&nbsp;for remote development on WSL, SSH servers and in containers. Already earlier this month &ndash; before the Microsoft build 2019 &ndash; Remote Development for Visual Studio Code was announced on Twitter and caused many reactions there:

There are three preview extensions available for the Remote Development feature:

<ol>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl" target="_blank" rel="noreferrer noopener">Remote &ndash; WSL</a>&nbsp;for Windows Subsystem for Linux (WSL)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh" target="_blank" rel="noreferrer noopener">Remote SSH</a>&nbsp;for remote machines with an SSH server</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers" target="_blank" rel="noreferrer noopener">Remote Containers</a>&nbsp;for Docker Containers</li>
</ol>

So far, the new extensions are only running on&nbsp;<a href="https://code.visualstudio.com/insiders/" target="_blank" rel="noreferrer noopener">insider builds</a>&nbsp;of VS code that can be run alongside the stable build. The Visual Studio&nbsp;<a href="https://code.visualstudio.com/blogs/2019/05/02/remote-development" target="_blank" rel="noreferrer noopener">blog</a>&nbsp;has all the information you need about Remote Development.

<h2>Features in Visual Studio code 1.34</h2>

As a milestone Microsoft calls the possibility to debug in VS code 1.34 at the same time several Extensions. Especially when developing tightly coupled or interdependent extensions this should be useful.

The Vetur extension for Vue tooling offers some new features in VS Code 1.34 &ndash; semantic diagnostics, hover information, jump-to-definition, and the JavaScript expression reference search within the Vue Template Interpolation Region:
<img src="../../../../uploads/1744773806604-vetur-interpolation.gif" alt="" width="791" height="500">
In addition, the feature CodeLens should have become more stable when switching between editors. Python also gets&nbsp;<a href="https://code.visualstudio.com/docs/python/tutorial-azure-functions" target="_blank" rel="noreferrer noopener">new documentation</a>&nbsp;for deployment to Azure Functions, and some bugfixes are included again.

More details about all the new features in Visual Studio Code 1.34 is&nbsp;<a href="https://code.visualstudio.com/updates/v1_34" target="_blank" rel="noreferrer noopener">available from Microsoft</a>.

Visual Studio Code 1.34 has been released and includes enhancements for Remote Development as Preview.

Visual Studio Code 1.34: Remote Development as a preview feature - TCMHACK

Visual Studio Code 1.34: Remote Development as a preview feature

Adobe Flash is going away in 2020; better,&nbsp;support for Adobe Flash ends in 2020. Adobe won't support Flash anymore, and all major browser makers revealed plans to retire Flash in their browsers.

While that means that most browsers won't support Flash content anymore and that there won't be any more updates for Flash, it does not really mean that all Flash content on the Internet is suddenly going away.&nbsp;A Flash Games Preservation project&nbsp;aims to archive Flash games and make them available in a dedicated application so that users may still play them.

Google targets Chrome 87 as the target release for Flash removal in the web browser. While there is still a good 18 month until that deadline, things are going to get more annoying soon in regards to Flash.

More annoying, because Google tightened the Flash use screws already in Chrome 69. The browser, released in August 2018, changed the Flash permissions system from a permanent state to a session-only state.
<img src="../../../../uploads/1744773955094-flash-player-will-no-longer-be-supported-1024x393.png" alt="" width="1024" height="393">

Starting in Chrome 76, out July 2019, Flash is set to block by default. Chrome will still support Flash at this point, and it is even possible to switch the Flash setting to Ask First again, but that leads to a new problem for users who have set Flash to Ask First: Chrome displays a Flash deprecation warning on start if Ask First is set. The message states "Flash Player will no longer be supported after December 2020". The learn more link leads to the "Saying goodbye to Flash in Chrome" post from 2017.

The notification may display for a while or just flash for a brief moment. Considering that this is being tested in Chrome Canary currently, it seems likely that Google is still testing the new notification and system before it reaches the stable channel.

There is no option to disable the notification in Chrome (other than blocking Flash).
<img src="../../../../uploads/1744773992840-flash-settings-chrome-1024x448.png" alt="" width="1024" height="448">

To summarize: starting with Chrome 76, Flash is blocked by default. Users may still enable Flash by loading&nbsp;chrome://settings/content/flash&nbsp;and setting the technology to Ask First.

Any site permission given during a session is not saved anymore if it is a Flash permission, and it is discarded when the browser is closed. You may run Flash content then in different ways, e.g. by clicking on the "click to play" area of the Flash element to display a "site wants to Run Flash" prompt which you need to allow, or by adding the site to the allow list for Flash (which Chrome will remove when you close the browser).
<img src="../../../../uploads/1744774022840-screenshot-20.png" alt="" width="1000" height="480">

The easiest method to do the latter is to click on the icon in front of the URL, select Site Settings, and set Flash to allow on the page that opens. Things get a bit easier on consecutive sessions as you find the Flash control attached to the initial prompt when you click on the icon in front of the URL.

Note:&nbsp;Some video download extensions&nbsp;may not work properly anymore in Chrome until you enable Flash.

Google is not the only company that is making Flash use more annoying.&nbsp;Mozilla disabled Flash in Firefox 69 by default&nbsp;for users who still have it installed on their systems. Firefox does not include a native Flash solution like Chrome.

Adobe Flash is going away in 2020; better, support for Adobe Flash ends in 2020. Adobe won't support Flash anymore, and all major browser...

Chrome 76: Flash block and making Flash use more annoying - TCMHACK

Chrome 76: Flash block and making Flash use more annoying

Microsoft&nbsp;<a href="https://github.com/Microsoft/Terminal" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">released</a>&nbsp;the source code of a new Windows Terminal application today featuring multi-tab support, improved font rendering, and more.

The company&nbsp;<a href="https://devblogs.microsoft.com/commandline/introducing-windows-terminal/" target="_blank" rel="noreferrer noopener">plans</a>&nbsp;to add Windows Terminal to the Microsoft Store for Windows 10 devices soon to make it available to more users.

Windows Terminal won't replace any command line interface of the Windows operating system, at least not in the near future. Microsoft positions it as a new modern interface that developers and administrators may use instead of the command line interfaces that are included in the Windows operating system.

The decision to create a new Terminal application for Windows was made after it became clear that the Windows console host, conhost.exe, could not be used to implement many of the features that Microsoft and the community wanted.

<h3>Windows Terminal</h3>
<img src="../../../../uploads/1744774142548-windows-terminal-screenshot-1024x668.jpg" alt="" width="1024" height="668">

One of the big features of the new Windows Terminal application is multi-tab support. You may remember that Microsoft planned to introduce support for tabs natively to the Shell in the Windows 10 operating system but&nbsp;decided to remove&nbsp;the feature that it&nbsp;called Sets&nbsp;again from development builds.

Sets allowed anyone&nbsp;to combine multiple application windows in a single container for easier handling and manageability.

Windows Terminal's tab support feature adds options to launch multiple different terminals from a single command line interface. You can use it to run PowerShell, the Command Prompt, and any installed Linux Terminal, and to switch between the terminals with just a click on a tab in the program window.

The new terminal application is fully backwards compatible with existing solutions.

<figure><iframe style="width: 679px; height: 382px;" title="YouTube video player" src="https://www.youtube.com/embed/8gw0rXPMMPE?si=3N0D4HMxVjnS1bp_" width="679" height="382" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" referrerpolicy="strict-origin-when-cross-origin"></iframe></figure>

Microsoft notes that Windows Terminal uses a GPU accelerated DirectWrite/DirectX-based text rendering engine. It paves the way for using any text character, symbol, emoji, ligatures, or glyphs installed on the device next to improved text output and rendering improvements.
<img src="../../../../uploads/1744774228185-console-output.png" alt="" width="318" height="236">

Microsoft created a new monospaced font for Windows Terminal that includes programming ligatures and will be open sourced as well.

Windows Terminal will provide users with customization and configuration options. Settings are stored in structured text files so that users may tinker with the settings directly. One interesting feature is the ability to configure each Terminal individually.

<blockquote class="wp-block-quote">
These profiles can have their own combination of font styles and sizes, color themes, background blur/transparency levels, etc. You can now create your own custom-styled Terminal that is personalized to your unique taste!
</blockquote>

Microsoft released the source code of a new Windows Terminal application today featuring multi-tab support, improved font rendering, and more...

Microsoft unveils new open source Windows Terminal - TCMHACK

Microsoft unveils new open source Windows Terminal

WebRTC is constantly evolving and with it, it&rsquo;s most known function&nbsp;<code>getUserMedia()</code>. With it you can get access to the device&rsquo;s webcams and microphones and request a video stream, an audio stream or both.

In this article we will be focusing on the video constraints available to us when requesting a video stream through&nbsp;<code>getUserMedia()</code>. In a previous blog post we&rsquo;ve focused on the&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">audio constraints</a>.

<h3 id="mediastreamconstraints">MediaStreamConstraints</h3>

The&nbsp;<code>getUserMedia()</code>&nbsp;function receives only one parameter, a&nbsp;<code>MediaStreamConstraints</code>object used to specify what kind of tracks (audio, video or both) to request, and, optionally, any requirements for each track.

Here&rsquo;s a basic example of how this object is sent to the newer, promise based,&nbsp;<code>getUserMedia()</code>:

<pre class="wp-block-code"><code>var constraints = {
 audio: true,
 video: true
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
 /* use the stream */
}).catch(function(err) {
 /* handle the error */
});</code></pre>

The&nbsp;<code>constraints</code>&nbsp;object can have one or both of these 2 properties:

<ul>
<li>video &ndash; indicates whether or not a video track is required</li>
<li>audio &ndash; indicates whether or not an audio track is required</li>
</ul>

Here&rsquo;s how a basic constraint object that requires both an audio and a video stream looks like (the same one used above):

var constraints = { audio:true, video:true}

If you&rsquo;re just taking a picture and don&rsquo;t need an audio track just set the audio property to false like this:

<pre class="wp-block-code"><code>var constraints = {
 audio: false,
 video: true
}</code></pre>

If&nbsp;<code>true</code>&nbsp;is specified for video or audio, the resulting stream is&nbsp;required&nbsp;to have that particular media track in it, else the call to&nbsp;<code>getUserMedia()</code>&nbsp;will result in an&nbsp;<code>NotFoundError</code>error (see&nbsp;<a href="../../../../blog/common-getusermedia-errors/">common getUserMedia() Errors</a>&nbsp;for more details).

<h3 id="mediatrackconstraints">MediaTrackConstraints</h3>

The audio and video properties can take 2 types of values:

<ul>
<li>a Boolean value (true or false) as above</li>
<li>a&nbsp;<code>MediaTrackConstraints</code>&nbsp;object which provides specific properties like width and height that must be met by the track.</li>
</ul>

<h4 id="videotrackconstraintsresolution">Video Track Constraints: Resolution</h4>

One can use the&nbsp;<code>width</code>&nbsp;and&nbsp;<code>height</code>&nbsp;properties to request a certain resolution from the webcam. In this example the browser will request a 720p (1280&times;720) video stream:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: 1280,
 height: 720
 }
}</code></pre>

The browser will try to honor this, but may return a different resolution stream.From my experience this often happens because the webcam does not support the requested resolution (try requesting odd resolutions like 721&times;55 and see what happens). It might also be that the constraints were overridden by another&nbsp;<code>getUserMedia()</code>&nbsp;call from a different app on Mac (where webcam access is shared) or a different Chrome tab (shared access). Other reasons might exist too.

You can try the&nbsp;<a href="https://webrtchacks.github.io/WebRTC-Camera-Resolution/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">WebRTC camera resolution finder</a>&nbsp;to see what resolutions are supported by your browser and webcam combo.

<h4 id="keywords">Keywords</h4>

If the resolution is important to you and the device and browser can not guarantee it then you can use the&nbsp;<code>min</code>,&nbsp;<code>max</code>&nbsp;and&nbsp;<code>exact</code>&nbsp;keywords to help you get the best resolution from any device.&nbsp;These keywords apply to&nbsp;any&nbsp;MediaTrackConstraint property.

If for example you&rsquo;re doing image recognition in video streams and absolutely require 1280&times;720 resolution use this constraint :

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: {
 exact: 1280
 },
 height: {
 exact: 720
 }
 }
}</code></pre>

In the example above, if no camera exists that supports the exact resolution, then the returned promise will be rejected with&nbsp;<code>OverconstrainedError</code>, and the user will not be prompted(see&nbsp;<a href="../../../../blog/common-getusermedia-errors/">common getUserMedia() Errors</a>&nbsp;for details).

The following constraint also requests a of 1280&times;720 resolution but it also mentions 320&times;240 as the minimum resolution since not all webcams support 1280&times;720 and in some use cases it&rsquo;s better to get something rather than nothing:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: {
 min: 320,
 max: 1280
 },
 height: {
 min: 240,
 max: 720
 }
 }
}</code></pre>

Values without the&nbsp;<code>min</code>,&nbsp;<code>max</code>&nbsp;and&nbsp;<code>exact</code>&nbsp;keywords are considered&nbsp;<code>ideal</code>&nbsp;values, which itself is a keyword but it is not mandatory. These 2 examples do the same thing:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: 1280,
 height: 720
 }
}</code></pre>

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: {
 ideal: 1280
 },
 height: {
 ideal: 720
 }
 }
}</code></pre>

<h4 id="videotrackconstraintsgettingthefrontorrearcameraonmobiledevices">Video Track Constraints: Getting The Front Or Rear Camera On Mobile Devices</h4>

One can use the&nbsp;<code>facingMode</code>&nbsp;property for the video track constraint. Accepted values are:&nbsp;<code>user</code>&nbsp;(front camera),&nbsp;<code>environment</code>&nbsp;(rear camera),&nbsp;<code>left</code>&nbsp;and&nbsp;<code>right</code>.

Here&rsquo;s how to request a video stream that should&nbsp;ideally&nbsp;come from the back camera:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: 640,
 height: 480,
 facingMode: "environment"
 }
}</code></pre>

or

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: 640,
 height: 480,
 facingMode: {
 ideal: "environment"
 }
 }
}</code></pre>

Here&rsquo;s how to request a video stream that should&nbsp;absolutely&nbsp;come from the back camera:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: 640,
 height: 480,
 facingMode: {
 exact: "environment"
 }
 }
}</code></pre>

I am not sure how well these are supported by mobile browsers.

<h4 id="videotrackconstraintsframerate">Video Track Constraints: Frame Rate</h4>

Since frame rate has a direct impact on video quality but also bandwidth, in some cases, like publishing a video stream over low bandwidth connections, it might be a good idea to limit the frame rate. I was able to obtain a 60fps stream from the Logitech C925E by using:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 width: 320,
 height: 240,
 frameRate: {
 ideal: 60,
 min: 10
 }
 }
}</code></pre>

Keep in mind the frame rate of a stream coming from a webcam depends a lot on the light in the room.

<h3 id="usingacertainwebcamormicrophonedevice">Using a Certain Webcam or Microphone Device</h3>

There is one constraint property that applies to both audio and video tracks:&nbsp;<code>deviceId</code>. It specifies the device ID (or an array of IDs which) which should be used for capturing that stream. The device ID is unique and will be the same across browsing sessions on the same origin. You will need to first obtain the device id using&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices" target="_blank" rel="noopener"><code>MediaDevices.enumerateDevices()</code></a>.

Once you know the&nbsp;<code>deviceId</code>&nbsp;you can ask for a specific webcam or microphone:

<pre class="wp-block-code"><code>{
 audio: true,
 video: {
 deviceId: {
 exact: "the_device_id"
 }
 }
}</code></pre>

There&rsquo;s also&nbsp;<code>groupId</code>, a shared id by all media sources that come from the same physical device. For example: a microphone and speaker that come from the same headset will share the same group ID.

<a href="https://webrtc.github.io/samples/src/content/devices/input-output/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">This example</a>&nbsp;allows you to switch between the available devices used for input (mic &amp; cam) and output (speaker).

<h3 id="mediadevicesgetsupportedconstraints">MediaDevices.getSupportedConstraints()</h3>

Chrome 53, Firefox 44 and Safari 11 added support for&nbsp;<code>MediaDevices.getSupportedConstraints()</code>. The function returns a dictionary listing the constraints supported by the user agent.

<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints#Result" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Click here</a>&nbsp;to run it for your current browser.

The function seems to return a lot of false positives,&nbsp;<code>track.getSettings()</code>&nbsp;gives better results.

<h3 id="mediastreamtrackgetsettings">MediaStreamTrack.getSettings()</h3>

You can also check which constraints are supported by using&nbsp;<code>track.getSettings()</code>. It returns an object containing all applicable constraints, including those supported by the browser but whose defaults have not been changed through code.

Here&rsquo;s how to use the function and print the result to the console:

<pre class="wp-block-code"><code>navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
 video.srcObject = stream;
 stream.getTracks().forEach(function(track) {
 console.log(track.getSettings());
 })
});</code></pre>

This&nbsp;<a href="https://codepen.io/naicuoctavian/pen/EbZwMy" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">code pen</a>&nbsp;will write in page the result of&nbsp;<code>track.getSettings()</code>&nbsp;for your browser.

The function has been added in Chrome 59 and it&rsquo;s also supported by Firefox and Safari 11.

<h3 id="oldconstraints">Old Constraints</h3>

The&nbsp;<a href="https://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">specifications for the constraints object</a>&nbsp;has changed in the past. Constraints using the old spec looked like this:

<pre class="wp-block-code"><code>var constraints = {
 audio: true,
 video: {
 mandatory: {
 minWidth: 640,
 maxWidth: 640,
 minHeight: 480,
 maxHeight: 480
 }
 }
}</code></pre>

The old spec was the only one supported by Chrome until Chrome 59 (June 2017) which added support for the new one. Older versions of Chrome can also use the new spec through&nbsp;<a href="https://github.com/webrtc/adapter" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">adapter.js</a>

Firefox 38+ (May 2015) and Safari 11 both support the new video constraints spec.

WebRTC is constantly evolving and with it, it’s most known function getUserMedia(). With it you can get access to the device’s webcams...

getUserMedia() Video Constraints - TCMHACK

getUserMedia() Video Constraints

The&nbsp;<a href="https://www.w3.org/TR/mediacapture-streams/" target="_blank" rel="noopener">Media Capture and Streams spec</a>&nbsp;governs the cross browser audio options that should be implemented by all browsers and, in it&rsquo;s&nbsp;<a href="https://www.w3.org/TR/mediacapture-streams/" target="_blank" rel="noopener">latest Candidate Recommendation incarnation</a>, it defines quite a few audio constraints.

Here&rsquo;s the full list with explanations&nbsp;<a href="https://www.w3.org/TR/mediacapture-streams/#def-constraint-volume" target="_blank" rel="noopener">from both the spec</a>&nbsp;and from my knowledge around how digital sound works:

<ul>
<li><code>sampleRate</code>: specifies a desired sample rate, not sure if it should be used as an encoding setting or as a hardware requirement, higher is better (Audio CDs for example have 44000 samples/s or 44kHz)</li>
<li><code>sampleSize</code>: each sample&rsquo;s size in bits, higher is better (Audio CDs have a sample size of 16 bits/sample )</li>
<li><code>volume</code>: it takes values between 0.0 (silence) and 1.0 (max volume), it&rsquo;s used as a multiplier for each sample&rsquo;s value</li>
<li><code>echoCancellation</code>: whether or not to use echo cancellation to try and remove the audio that went to the speakers from the input that comes through the mic</li>
<li><code>autoGainControl</code>: whether or not to modify the volume of the input from the mic</li>
<li><code>noiseSuppression</code>: whether or not to try and remove the background noise from the audio signal</li>
<li><code>latency</code>: specified in seconds, controls the time between the start of the sound processing and the data being made available to the next step, not so sure why you&rsquo;d want higher latency but audio codecs do differ in latency</li>
<li><code>channelCount</code>: specifies the number of channels to use with 1 being mono, 2 being stereo. It works with some webcams and laptops with dual mics.</li>
</ul>

A surprisingly comprehensive list &ndash; at least&nbsp;<a href="http://audior.ec/blog/audio-quality-and-bitrate-in-flash-as3-web-apps/" target="_blank" rel="noopener">when comparing with the options Flash gave us</a>&nbsp;&ndash; but just as surprising most of them are not widely supported by browsers. Understandably some of them are new (autoGainControl and noiseSuppression) but others (sampleRate, sampleSize, and echoCancellation) were added to the spec as early as February 2014. Adding support for these constraints would open up&nbsp;<a href="https://hacks.mozilla.org/2012/09/its-opus-it-rocks-and-now-its-an-audio-codec-standard/" target="_blank" rel="noopener">Opus&rsquo; flexibility</a>to developers.

<h3 id="browsersupportincludingsafari11">Browser Support (Including Safari 11)</h3>

I&rsquo;ve used&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings" target="_blank" rel="noopener"><code>MediaStreamTrack.getSettings()</code></a>&nbsp;to log to console the settings supported by each browser as&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints" target="_blank" rel="noopener"><code>MediaDevices.getSupportedConstraints()</code></a>&nbsp;returns too many false positives . I also tested the latest versions of Chrome, Firefox and Safari to make sure changing the constraints has an effect.

<table class="wp-block-table">
<thead>
<tr>
<td>&nbsp;</td>
<th>CHROME 62</th>
<th>FIREFOX 56</th>
<th>SAFARI 11</th>
</tr>
</thead>
<tbody>
<tr>
<td>echoCancellation</td>
<td>supported, on by default</td>
<td>supported, on by default</td>
<td>supported, on by default</td>
</tr>
<tr>
<td>sampleRate</td>
<td>fixed: 48000</td>
<td>fixed: 48000</td>
<td>fixed: 44100</td>
</tr>
<tr>
<td>noiseSuppression</td>
<td>on by default, constraint not supported</td>
<td>supported, true by default</td>
<td>no</td>
</tr>
<tr>
<td>autoGainControl</td>
<td>on by default, constraint not supported</td>
<td>supported, false by default</td>
<td>no</td>
</tr>
<tr>
<td>channelCount</td>
<td>no</td>
<td>supported, records max avb. channels by default</td>
<td>no</td>
</tr>
<tr>
<td>volume</td>
<td>no</td>
<td>no</td>
<td>supported, defaults to 1 (the maximum)</td>
</tr>
</tbody>
</table>

Use&nbsp;<a href="https://codepen.io/naicuoctavian/pen/EbZwMy" target="_blank" rel="noopener" aria-label=" (opens in a new tab)">this code pen</a>&nbsp;to check future browser support (does not work in Safari because Safari does not allow getUserMedia() in cross origin iframes).

<h3 id="usingaudioconstraintswithgetusermedia">Using Audio Constraints With getUserMedia()</h3>

All constraints can be sent to&nbsp;<code>getUserMedia()</code>&nbsp;as a property of the audio object inside the constraints object. Here&rsquo;s an example using the newer promise based&nbsp;<code>getUserMedia()</code>:

<pre class="wp-block-code"><code>var constraints = {
 audio: {
 sampleRate: 48000,
 channelCount: 2,
 volume: 1.0
 },
 video: true
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
 /* use the stream */
}).catch(function(err) {
 /* handle the error */
});</code></pre>

If you just want to use whatever defaults are set on the browser just pass true for the audio object:

<pre class="wp-block-code"><code>var constraints = { audio: true, video:true }</code></pre>

<h3 id="stereoaudiorecordingsinfirefox55and56">Stereo Audio Recordings in Firefox 55 and 56</h3>

<a href="https://www.mozilla.org/en-US/firefox/55.0/releasenotes/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Firefox 55</a>&nbsp;added support for stereo recordings so I was able to record a video with dual channel (stereo) audio with:

<ul>
<li>the Logitech C925e (dual mics)</li>
<li>the older Logitech C920 (dual mics)</li>
<li>a 15&Prime; Mid 2017 MacBook PRO (3 mics)</li>
</ul>
<img src="../../../../uploads/1744774797180-stereo-webm-recording-with-arrow-300x208.png" alt="" width="300" height="208">

The channel separation was very clear with the&nbsp;<a href="https://www.logitech.com/en-us/product/c925e-webcam" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Logitech C925e</a>&nbsp;where the mics are widely spaced apart as opposed to MacBook PRO&rsquo;s 3 microphones which&nbsp;<a href="https://www.ifixit.com/Teardown/MacBook+Pro+13-Inch+Touch+Bar+Teardown/73480#s148070" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">are closely grouped together on the right side of the keyboard</a>.

<a href="https://www.mozilla.org/en-US/firefox/56.0/releasenotes/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Firefox 56</a>&nbsp;also added support for the&nbsp;<code>channelCount</code>&nbsp;constraint meaning I was able to switch from stereo recording &ndash; which seems to be the default when using webcams with dual mics &ndash; to mono recordings which should take up less bandwidth. Here&rsquo;s how to request a mono stream:

<pre class="wp-block-code"><code>{
 audio: {
 channelCount: 1
 },
 video: true
}</code></pre>

A value of 0, the default, tells&nbsp;<code>getUserMedia()</code>&nbsp;to capture all of the available, supported, channels.

Chrome 62 records just mono audio and setting the&nbsp;<code>channelCount</code>&nbsp;constraint (<a href="https://blog.addpipe.com/audio-constraints-getusermedia/getSupportedConstraints()" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints</a>&nbsp;lists it as supported) to 2 has no effect. There&rsquo;s an&nbsp;<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=731170" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">open issue</a>&nbsp;requesting &amp; tracking&nbsp;<code>channelCount</code>,&nbsp;<code>sampleRate</code>&nbsp;and&nbsp;<code>sampleSize</code>&nbsp;implementations in Chrome.

UPDATE: Chrome 63 has implemented stereo audio recording.

<h3 id="echocancellationnoisesuppressionandautogain">Echo Cancellation, Noise Suppression and Auto Gain</h3>

The&nbsp;<code>echoCancellation</code>&nbsp;constraint works by default on&nbsp;Chrome,&nbsp;Firefox(<a href="https://stackoverflow.com/a/28911694/813988" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">supported since Firefox 46</a>) and&nbsp;Safari 11. It&rsquo;s especially noticeable when&nbsp;<a href="https://addpipe.com/media-recorder-api-demo/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">recording videos through this unmuted MediaRecorderAPI demo</a>. It&rsquo;s very aggressive on Firefox, much more than Chrome.

Here&rsquo;s the constraint one can use with a user agent that supports it but does not turn it on by default:

<pre class="wp-block-code"><code>{
 audio: {
 echoCancellation: true
 },
 video: true
}</code></pre>

<code>noiseSuppression</code>&nbsp;works beautifully in&nbsp;Firefox&nbsp;(it&rsquo;s on by default), I could clearly hear the noise picked up by the mic with it turned off:

<pre class="wp-block-code"><code>{
 audio: {
 noiseSuppression: false
 },
 video: true
}</code></pre>

Chrome&nbsp;definitely applies noise removal even if it does not support the constraint.

Safari 11&nbsp;does not support noise suppression at this time.

<code>autoGainControl</code>&nbsp;is turned off by default on Firefox. Here&rsquo;s how to turn it on:

<pre class="wp-block-code"><code>{
 audio: {
 autoGainControl: true
 },
 video: true
}</code></pre>

After turning it on it clearly lowered the volume when (almost) screaming into the mic.

<a href="https://testing.googleblog.com/2015/10/audio-testing-automatic-gain-control.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Chrome applies autoGainControl by default</a>, but you can&rsquo;t control it through the&nbsp;<code>autoGainControl</code>&nbsp;constraint, to turn it off you actually need to set&nbsp;<code>echoCancellation</code>&nbsp;to false or use the old

<pre class="wp-block-code"><code>{
 mandatory: {
 googAutoGainControl: false
 }
}</code></pre>

constraint. When testing on macOS the input level notch moved to the left as I moved the microphone towards the sound source (but not when&nbsp;<code>echoCancellation</code> was set to false).
<img src="../../../../uploads/1744774836257-screen-shot-2017-11-28-at-17.09" alt="" width="780" height="612">

<h3 id="keywords">Keywords</h3>

The keywords (&nbsp;<code>min</code>,&nbsp;<code>max</code>,&nbsp;<code>exact</code>&nbsp;and&nbsp;<code>ideal</code>) should also work with these audio constraints. Per the spec, in the example above, the&nbsp;<code>channelCount</code>&nbsp;property should be treated as an&nbsp;<code>ideal</code>&nbsp;property, and it should produce the same result as:

<pre class="wp-block-code"><code>{
 audio: {
 channelCount: {
 ideal: 1
 }
 },
 video: true
}</code></pre>

A more complex constraint which requests at least 1 channel audio but preferably 2 would be:

<pre class="wp-block-code"><code>{
 audio: {
 channelCount: {
 ideal: 2,
 min: 1
 }
 },
 video: true
}</code></pre>

A constraint which requests exactly 2 channel audio would be:

<pre class="wp-block-code"><code>{
 audio: {
 channelCount: {
 exact: 2
 }
 },
 video: true
}</code></pre>

The above constraint will result in an&nbsp;<code>OverconstrainedError</code>&nbsp;if the device does not have a dual mic webcam. For more details, check out&nbsp;<a href="../../../../blog/common-getusermedia-errors/">common getUserMedia errors</a>.

The Media Capture and Streams spec governs the cross browser audio options that should be implemented by all browsers and, in it’s latest...

getUserMedia() Audio Constraints - TCMHACK

getUserMedia() Audio Constraints

Once you get&nbsp;<code>getUserMedia()</code>&nbsp;working with&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">audio</a>&nbsp;and&nbsp;<a href="../../../../blog/getusermedia-video-constraints/">video constraints</a>&nbsp;you immediately start hitting problems like:

<ol>
<li>user has no webcam, just a microphone</li>
<li>user has (accidentally) denied access to the webcam</li>
<li>user plugs in the webcam/microphone after your&nbsp;<code>getUserMedia()</code>&nbsp;code has initialized</li>
<li>the device is already used by another app on Windows</li>
<li>Firefox only: the device is already used by another Firefox tab</li>
<li>Chrome only: the user dismisses the privacy dialog</li>
</ol>

To tackle these situations the&nbsp;<a href="https://www.w3.org/TR/mediacapture-streams/#overconstrainederror-object" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Media Capture and Streams spec</a>&nbsp;that governs&nbsp;<code>getUserMedia()</code>&nbsp;defines several errors that you can look out for in your code (and correctly inform the user).

The table below lists the top 5 errors. They&rsquo;re different between Firefox, which currently follows the spec more closely, and Chrome. On top of these 5, the spec also defines&nbsp;<code>AbortError</code>&nbsp;&amp;&nbsp;<code>SecurityError</code>, but I was never able to trigger them.

<table class="wp-block-table">
<thead>
<tr>
<th>FIREFOX 56</th>
<th>CHROME 62</th>
</tr>
</thead>
<tbody>
<tr>
<td>NotFoundError</td>
<td>DevicesNotFoundError</td>
</tr>
<tr>
<td>NotReadableError</td>
<td>TrackStartError</td>
</tr>
<tr>
<td>OverconstrainedError</td>
<td>ConstraintNotSatisfiedError</td>
</tr>
<tr>
<td>NotAllowedError</td>
<td>PermissionDeniedError</td>
</tr>
</tbody>
</table>

<h3 id="notfounderror">NotFoundError</h3>

This one&rsquo;s&nbsp; very common, it&rsquo;s thrown in these 3 cases:

<ol>
<li>when you&rsquo;re&nbsp;<a href="../../../../blog/getusermedia-video-constraints/">requesting just a video track through constraints</a>&nbsp;but&nbsp;the user does not have a webcam.</li>
<li>when you&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">request just an audio track</a>&nbsp;but&nbsp;the user does not have a microphonedevice:</li>
</ol>

<ul>
<li>the computer or device has no sound card or</li>
<li>the computer or device has a sound card but the recording&nbsp;device&nbsp;is disabled because there&rsquo;s no mic plugged in or</li>
<li>the recording&nbsp;device is disabled manually from the OS (can be done on Windows) but that&rsquo;s rare. <img src="../../../../uploads/1744775099043-2017-11-14-13_07_53-295x300.png" alt="" width="295" height="300"></li>
</ul>

<ol>
<li>when you&rsquo;re requesting both video and audio tracks but&nbsp;the user does not have a webcam OR a microphone&nbsp;(it&rsquo;s enough for one device to be missing for the error to be thrown)</li>
</ol>

Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;NotFoundError&rdquo; and the message &ldquo;The object can not be found here&rdquo;.

Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;DevicesNotFoundError&rdquo;.

<h3 id="notreadableerror">NotReadableError</h3>

It most commonly happens on Windows when the browser tries to access the webcam or mic but they&rsquo;re already in use (by Skype, etc.) &ndash;&nbsp; on Windows where processes get exclusive access to the webcam&nbsp;&ndash; but people have also been reporting the error showing up&nbsp;<a href="https://stackoverflow.com/a/36695835/813988" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">when using experimental constraints removed by Chrome</a>&nbsp;or&nbsp;<a href="https://stackoverflow.com/questions/44481163/webrtc-issue-in-chrome-59" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">because of bugs in the Chrome screen recording code</a>. On macOS, where processes share the webcam and microphone, I&rsquo;ve only seen it reported by Firefox.

The&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Mozilla Developer Network Web Docs explanation covers all these situations</a>:

<blockquote class="wp-block-quote">
Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device.
</blockquote>

On Windows Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;NotReadableError&rdquo; and it&rsquo;s message property set to &ldquo;Failed to allocate videosource&rdquo; when another app (or Firefox tab) is using the webcam or microphone.

On Windows Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;TrackStartError&rdquo;, the non-spec Chrome-specific version, with no message. Different Chrome tabs can share the same webcam.

On macOS it&rsquo;s only thrown by Firefox when another Firefox tab tries to get access to the webcam and mic. On macOs it&rsquo;s paired with the message: &ldquo;Concurrent mic process limit&rdquo;.

<h3 id="overconstrainederror">OverconstrainedError</h3>

<blockquote class="wp-block-quote">
The specified constraints resulted in no candidate devices which met the criteria requested. The error is an object of type&nbsp;<code>OverconstrainedError</code>, and has a&nbsp;<code>constraint</code>&nbsp;property whose string value is the name of a constraint which was impossible to meet, and a&nbsp;<code>message</code>&nbsp;property containing a human-readable string explaining the problem.
</blockquote>

It&rsquo;s thrown when you&rsquo;re requesting a constraint that can not be satisfied by the available hardware, for example a high frame rate or high resolution requested using the&nbsp;<code>min</code>&nbsp;or&nbsp;<code>exact</code>&nbsp;keywords.

Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;OverconstrainedError&rdquo; .

Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;ConstraintNotSatisfiedError&rdquo;, the non-spec Chrome-specific version.

Chrome &amp; Firefox will return the requested resolution or the closest one when using&nbsp;<code>ideal</code>&nbsp;values but if you start using the&nbsp;<code>min</code>&nbsp;keyword with high values or the&nbsp;<code>exact</code>keyword with unsupported values you will immediately trigger the error.

The error object will also mention the constraint that could not be satisfied through the&nbsp;<code>constraintName</code>&nbsp;property and the&nbsp;<code>message</code> &ldquo;Constraints could be not satisfied.&rdquo;.
<img src="../../../../uploads/1744775185524-screen-shot-2017-11-21-at-11.22" alt="" width="1024" height="293">

<h3 id="notallowederror">NotAllowedError</h3>

Is thrown when the user denies (or has previously denied) access to the webcam or microphone.

Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;NotAllowedError&rdquo; and the message &ldquo;The request is not allowed by the user agent or the platform in the current context&rdquo;.

Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code> property set to &ldquo;PermissionDeniedError&rdquo;.
<img src="../../../../uploads/1744775241851-screen-shot-2017-11-27-at-16.07" alt="" width="538" height="328">

<h3 id="typeerror">TypeError</h3>

It&rsquo;s thrown when the constraints object passed to&nbsp;<code>getUserMedia()</code>&nbsp;is empty or has all tracks (audio, video or both) set to false.

Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;TypeError&rdquo; and the message &ldquo;audio and/or video is required&rdquo;.

Chrome will throw a &ldquo;TypeError: Failed to execute &lsquo;getUserMedia&rsquo; on &lsquo;MediaDevices&rsquo;: At least one of audio and video must be requested&rdquo;.

<h3 id="permissiondismissederror">PermissionDismissedError</h3>

It&rsquo;s thrown by Chrome when the user closes the privacy dialog asking for mic and webcam access.
<img src="../../../../uploads/1744775282357-screen-shot-2017-11-27-at-16.10" alt="" width="431" height="234">

Dismissing the dialog is only possible on Chrome so there&rsquo;s no equivalent error on other browsers.&nbsp;It&rsquo;s not spec compliant&nbsp;so the error might be removed in Chrome 64 in the&nbsp;<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=721412" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">move towards spec compliant errors</a>.

<h3 id="handlingtheseerrors">Handling these errors</h3>

Handling these errors is quite simple when using the newer&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">promise based&nbsp;</a><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">getUserMedia()</a></code>. You can use the code below or&nbsp;<a href="https://codepen.io/naicuoctavian/pen/wPeZWO" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">this code pen.</a>

<pre class="wp-block-code"><code>var constraints = {
 video: false,
 audio: false
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
 /* do stuff */
}).catch(function(err) {
 //log to console first 
 console.log(err); /* handle the error */
 if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
 //required track is missing 
 } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
 //webcam or mic are already in use 
 } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
 //constraints can not be satisfied by avb. devices 
 } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
 //permission denied in browser 
 } else if (err.name == "TypeError" || err.name == "TypeError") {
 //empty constraints object 
 } else {
 //other errors 
 }
});</code></pre>

The code starts out with false for both the video and audio track to immediately trigger the&nbsp;<code>TypeError</code>&nbsp;.

Once you get getUserMedia() working with audio and video constraints you immediately start hitting problems like: user has no webcam, just a m...