<p>This article introduces an experimental Vue feature called Hooks.</p>

<h2>Before you start</h2>

<p>This post is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.</p>

<p>You will need the following in your pc:</p>

<ul>
<li><a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener">Node.js version 10.x</a>&nbsp;and above installed. You can verify if you do by running the command below in your terminal/command prompt:</li>
</ul>

<pre class="wp-block-preformatted">node -v</pre>

<ul>
<li>A code editor: Visual Studio Code is highly recommended</li>
<li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue&rsquo;s latest version</a>, installed globally on your machine</li>
<li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue CLI 3.0</a>&nbsp;installed on your machine. To do this, uninstall the old CLI version first:</li>
</ul>

<pre class="wp-block-preformatted">npm uninstall -g vue-cli</pre>

<p>then install the new one:</p>

<pre class="wp-block-preformatted">npm install -g @vue/cli</pre>

<ul>
<li>Download a Vue starter project&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">here</a></li>
<li>Unzip the downloaded project</li>
<li>Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:</li>
</ul>

<pre class="wp-block-preformatted">npm install</pre>

<h2>Introduction: Hooks</h2>

<p>Initially, React components that contain state logic must be a class component. Even though there were already stateless functional components in React there was a need to create components that accommodate state logic without being classes. That was when Hooks was born. Hooks are a way to use state logic inside functional components, thereby eliminating the need for writing classes.</p>

<h2>What is wrong with classes?</h2>

<p>There is nothing wrong with classes, to begin with, but the React team found out that&nbsp;<a href="https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines" target="_blank" rel="noreferrer noopener">understanding how classes work has been a drawback to React adoption</a>. It can be difficult to understand and can become ambiguous as your project increases in size and complexity.</p>

<h3>But I don&rsquo;t normally use classes in Vue JS..</h3>

<p>If you are a Vue developer, you might wonder why classes are being discussed as you do not use classes by default in your Vue projects. While this is true, Vue JS lets you use functional components that are stateless with&nbsp;<a href="https://vuejs.org/v2/guide/mixins.html" target="_blank" rel="noreferrer noopener">mixins</a>. With Vue mixins you can define logic or a functionality in a particular file and use and even re-use it in a functional component.</p>

<h2>The problem with mixins</h2>

<p>In a&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">blog post</a>, some months back,&nbsp;<a href="https://twitter.com/sarah_edo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Sarah Drasner</a>&nbsp;a very popular Vue core team member wrote about her conversation with&nbsp;<a href="https://twitter.com/youyuxi?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Evan You</a>&nbsp;the creator of Vue JS. Sarah revealed that a mixin cannot consume or use state from another mixin, which makes chaining of encapsulated logic difficult to achieve. This is the mixin limitation that the Vue Hooks solves for.</p>

<h2>Introducing Vue Hooks</h2>

<p>Vue Hooks are basically an enhanced version of mixins, if you do not know what mixins are, they are a platform in Vue used to re-use logic between components (you will see a quick demo of mixins in this post). Vue Hooks lets you pass logic from one Hook to another and you can also use state in a Hook from another Hook. So just like in React, Hooks in Vue are defined in functions which can be a cleaner and more flexible way to define and share logic and can return state.</p>

<h2>Demo A: Vue mixins</h2>

<p>If you have followed this post from the start, you must have downloaded&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">the starter project file</a>&nbsp;and opened it up in your VS Code application. We are going to create a mixin that contains a counter logic and then import it into any component of choice. First, create a folder called mixins in the root directory and create a new file, call it&nbsp;<code>clickMixin.js</code>&nbsp;and copy the code block below inside it:</p>

<pre class="wp-block-preformatted">export default { 
    data (){
      return{
        count: 1,
        double: 2
      }
    },
    methods: {
      clicked(){
       this.count++; 
       this.double = this.count*2;
      }
    }
  }</pre>

<p>This mixin contains counter logic and also contains a variable that returns double the count, you see the export statement because it has to be imported into your component of choice. Open your&nbsp;<code>Test.vue</code>&nbsp;component and copy the code block below inside it:</p>

<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="clicked()"&gt;Button 1&lt;/button&gt;
    &lt;h2&gt;{{this.count}}&lt;/h2&gt;
    &lt;h2&gt;{{this.double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickMixin from '../Mixins/clickMixin'
export default {
  name: 'Test',
  mixins: [clickMixin]
}
&lt;/script&gt;</pre>

<p>Here you see how mixins are imported and registered under the name, it is a Vue instance property just like data or methods or computed properties. You also see that inside the template that you have access to this in JavaScript as it relates to the mixins (almost like the mixin was defined right inside the component). If you run the application in your dev server it should look like this:</p>

<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-453" src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/09/vuebutton1and2-1024x394.png" alt=""></figure>
</div>

<p>When you click button 1, the counter is increased by 1 and the lower figure is double the counter figure just as the template in your code suggests.</p>

<h2>Demo B: Vue Hooks</h2>

<p>You can recreate this logic with Vue Hooks easily, the point of the Hooks is to potentially replace mixins in the future. First of all, you have to install the vue-Hooks package with the node package manager. Open a new terminal in VS Code and run:</p>

<pre class="wp-block-preformatted">npm install vue-Hooks</pre>

<p>Then open up your&nbsp;<code>main.js</code>&nbsp;file and initialize Hooks with a line of command before the new Vue statement:</p>

<pre class="wp-block-preformatted">Vue.use(Hooks);</pre>

<p>Open the components folder and create a new file inside it, call it&nbsp;<code>Modal.vue</code>&nbsp;then navigate back to the root directory and create a new folder called Hooks. Inside the Hooks folder create a new file called&nbsp;<code>Hooks.js</code>&nbsp;and copy this code block below into it:</p>

<pre class="wp-block-preformatted">import { useData, useMounted, useEffect, useComputed, useUpdated} from 'vue-Hooks'
export default function clickedHook(){
const data = useData({ count:1 })
const double = useComputed(() =&gt; data.count * 2)
useMounted(()=&gt; {console.log('mounted')});
useUpdated(()=&gt; {console.log('updated')});
useEffect(()=&gt; {
     console.log('DOM re-renders....')
 });
return {
     data, double
   }
}</pre>

<p>Just like in React, Vue Hooks borrows the use-prefix syntax and uses it in the Vue way. You also notice that the lifecycle Hooks available for every Vue instance is accessible inside Vue Hooks, some of them are:</p>

<ul>
<li><code>useData</code>: handles initialization of data inside your Hook, so the count is initialized inside it</li>
<li><code>useComputed</code>: this is more like computed properties inside your Hook, so the double computation is done inside it</li>
<li><code>useMounted</code>: acts exactly like the mounted lifecycle Hook in your Vue instance but for Hooks</li>
<li><code>useUpdated</code>: acts exactly like the updated lifecycle Hook in your Vue instance but for Hooks</li>
<li><code>useEffect</code>: this handles logic on DOM re-render</li>
</ul>

<p>There are other properties you can import, the whole list can be found&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">here</a>&nbsp;on GitHub. You will notice it is exported as a function, open the&nbsp;<code>modal.vue</code>&nbsp;file you created earlier and copy this code block below inside it:</p>

<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="data.count++"&gt;Button 2&lt;/button&gt;
    &lt;h2&gt;{{data.count}}&lt;/h2&gt;
    &lt;h2&gt;{{double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickedHook from '../Hooks/Hooks'
export default {
  name: 'Modal',
  Hooks(){
    return clickedHook();
  }
}
&lt;/script&gt;</pre>

<p>Notice that after importing the Hooks file, you can access the data and the double constants earlier defined in the Hook inside this component. We also see that Hooks registration has the same syntax with data registration, with the function set up and the return object inside it.</p>

<h3><br>It is important to note that&hellip;</h3>

<ul>
<li>You can go ahead and use Vue Hooks right away (your Vue version must be 2.x)</li>
<li>There is&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/#article-header-id-5" target="_blank" rel="noreferrer noopener">speculation that Vue version 3.0 will ship with Vue</a>&nbsp;Hooks officially</li>
<li>It is experimental and so should not be used in production yet</li>
<li><a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">Read the Sarah Drasner blog post here</a>&nbsp;which contains even more examples too</li>
</ul>

<p>You can use npm or just go to&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener">GitHub with this link</a>&nbsp;to get the project repository.</p>

<h2>Conclusion</h2>

<p>This has been a quick overview of Hooks in Vue JS and how they might differ from the React Hooks that inspired it. We also highlighted mixins for readers who have not been introduced to the concept and we looked at an illustration using Hooks. Are you excited about Vue Hooks?</p>

This article introduces an experimental Vue feature called Hooks. This post is suited for developers of all stages includi...

Hooks are coming to Vue.js version 3.0 - TCMHACK

Hooks are coming to Vue.js version 3.0

<p>React's&nbsp;<code>useEffect</code>&nbsp;hooks combines&nbsp;<code>componentDidMount</code>,&nbsp;<code>componentDidUpdate</code>&nbsp;and&nbsp;<code>componentWillUnmount</code>&nbsp;lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple&nbsp;<code>useEffect</code>&nbsp;hooks to be called in a single component.</p>

<p>You can read more about the&nbsp;<code>useEffect</code>&nbsp;hook here:&nbsp;<a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">React docs</a></p>

<p>Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.</p>

<h2>componentDidMount eqivalent</h2>

<p>In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* ComponentDidMount code */
}, []);</code></pre>

<h2>componentDidUpdate eqivavlent</h2>

<p>In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case,&nbsp;<code>var1</code>&nbsp;and&nbsp;<code>var2</code>).</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* componentDidUpdate code */
}, [var1, var2]);</code></pre>

<h2>componentWillUnmount eqivavlent</h2>

<p>In order to have this hook run when the component is unmounted, we need to return a function from the hook. Dependency array doesn't affect this functionality.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<h2>All three combined</h2>

<pre class="wp-block-code"><code>useEffect(() =&gt; {

  /* componentWillMount code + componentDidUpdate code */

  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<p>Thank you for taking the time to read this post. If you've found this useful, please share and feel free to comment.</p>

Master React's useEffect hook with this cheat-sheet, showing how to replicate componentDidMount, componentDidUpdate, and componentWillUnmount behaviors with clean, concise code.

React: useEffect explained with lifecycle methods - TCMHACK

React: useEffect explained with lifecycle methods

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similar...

React vs. Angular: The Complete Comparison - TCMHACK

React vs. Angular: The Complete Comparison

<p>With the release of the&nbsp;<a href="https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md">VueJS 3 "Request for Comment" documentation</a>&nbsp;about two weeks ago, Evan You introduced the VueJS function-based API and has set the VueJS community ablaze. These new ideas are still in the "Request for Comments" stage, so they're far from set in stone, but because the RFC introduces such significant changes, I made a quick summary of what you need to know.</p>



<p><strong>NB: All this information and much more is in the RFC, so I do suggest you read that.</strong></p>



<h2>Setup</h2>



<p>VueJS 3 departs from the option-based API we've grown to love and introduces the&nbsp;<code>setup()</code>&nbsp;function, which will be where all the magic happens. This function single-handedly sets up the the logic for our component and returns data that's exposed to the template. The option-based API will continue to work even in VueJS 3, but this new function-based API will be the new standard.</p>



<p>For all the functionality we're used to from VueJS like reactive data, computed values, methods and watchers, we&nbsp;<code>import</code>&nbsp;functions from&nbsp;<code>vue</code>&nbsp;and use them in our&nbsp;<code>setup()</code>&nbsp;function. Here's a basic example from the RFC:</p>



<pre class="wp-block-code"><code>&lt;template>
  &lt;div>
    &lt;span>count is {{ count }}&lt;/span>
    &lt;span>plusOne is {{ plusOne }}&lt;/span>
    &lt;button @click="increment">count++&lt;/button>
  &lt;/div>
&lt;/template>

&lt;script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is NULL`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
&lt;/script></code></pre>



<h2>But why?</h2>



<p>If that example doesn't make it clear why this change was introduced, or if it feels like a step back in terms of usability, I understand. I had the same initial reaction and it took me a bit of time to figure out why this change was necessary. The v2.x API is widely loved and is often the reason why people move to VueJS from other frameworks like ReactJS or AngularJS, so a change this drastic seems like a strange idea.</p>



<h3>Encapsulation is king</h3>



<p>The component API was created in part to make it easier to reuse code across your application. While VueJS is seriously modular and uses components, the current option-based API doesn't allow for an easy extraction of functionality that relates to a single piece of functionality or data. You need to define your data(/state), computed values and methods separately, while they might all be related. This gets confusing when components grow and methods deal with different pieces of data.</p>



<p>This is where the new function-based API comes in. It allows you to extract all code related to a piece of logic and put it together in what they call a "composition function", which returns reactive state. An example given in the RFC uses one of those composition functions to&nbsp;<a href="https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#logic-composition">extract the logic of listening to the mouse position</a>:</p>



<pre class="wp-block-code"><code>function useMouse() {
  const x = value(0)
  const y = value(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// in consuming component
const Component = {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  },
  template: `&lt;div>{{ x }} {{ y }}&lt;/div>`
}</code></pre>



<p>If we compare this to how we would write this functionality in the v2.x API, we can see that the functionality related to using the mouse position is all over the place, where in the v3.x API, it's quite nicely grouped in a singular function:</p>



<pre class="wp-block-code"><code>&lt;template>
    &lt;div>
        {{ x }} {{ y }}
    &lt;/div>
&lt;/template>

&lt;script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
    };
  },
  mounted() {
    window.addEventListener('mousemove', this.update);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.update);
  },
  methods: {
    update(e) {
      this.x = e.pageX;
      this.y = e.pageY;
    },
  },
};
&lt;/script></code></pre>



<h3>And more</h3>



<p>Encapsulation isn't the only reason why these changes are useful, so here are two other reasons why this change might be what VueJS needs.</p>



<p>The current option-based API in VueJS has an issue in that it doesn't properly support TypeScript type inference. The proposed changes fix this issue, and achieve full typing support, with TS code looking almost the same as JS code as a cherry on top of an already very useful pie.</p>



<p>VueJS is loved for its extremely small bundle size and this change shrinks that bundle even more. Since function and variable names can be shortened with standard minification (while object/class methods and properties can't), the code simply compresses better.</p>

With the release of the&nbsp;VueJS 3 "Request for Comment" documentation&nbsp;about two weeks ago, Evan You introduced the VueJS function-based A...

VueJS is dead, long live VueJS! - TCMHACK

VueJS is dead, long live VueJS!

<p><strong>Node.js</strong>&nbsp;is a platform built on Chrome&rsquo;s JavaScript runtime for easily building fast, scalable network applications. Latest version&nbsp;<a href="https://deb.nodesource.com/setup_12.x" target="_blank" rel="noreferrer noopener">node.js ppa</a>&nbsp;is maintaining by its official website. We can add this PPA to your&nbsp;<strong>Ubuntu 19.04, 18.04 LTS, 16.04 LTS (Trusty Tahr) and 14.04 LTS (Xenial Xerus)</strong>&nbsp;systems and install node.js on Linux VPS with easy commands.</p>

<p>To install specific nodejs version, Visit our tutorial&nbsp;<a href="../../../../blog/how-to-install-and-manage-node-js-via-nvm/">Install Specific Nodejs Version with NVM</a>.</p>

<h2>Step 1 &ndash; Add Node.js PPA</h2>

<p>Node.js package is available in LTS release and the current release. It&rsquo;s your choice to select which version you want to install on the system as per your requirements. Let&rsquo;s add the PPA to your system to install Nodejs on Ubuntu.</p>

<p><strong>Use Current Release:</strong>&nbsp;At te last update of this tutorial, Node.js 12 is the current Node.js release available.</p>

<pre class="wp-block-preformatted">sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
</pre>

<p><strong>Use LTS Release :</strong>&nbsp;At the last update of this tutorial, Node.js 10.15.3 is the LTS release available.</p>

<pre class="wp-block-preformatted">sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
</pre>

<p>For this tutorial,&nbsp;<strong>I am using the latest current release</strong>&nbsp;and added their PPA to my system.</p>

<h2>Step 2 &ndash; Install Node.js on Ubuntu</h2>

<p>You can successfully add Node.js PPA to Ubuntu system. Now execute the below command install Node on and Ubuntu using apt-get. This will also install NPM with node.js. This command also installs many other dependent packages on your system.</p>

<pre class="wp-block-preformatted">sudo apt-get install nodejs
</pre>

<h2>Step 3 &ndash; Check Node.js and NPM Version</h2>

<p>After installing node.js verify and check the installed version. You can find more details about current version on node.js&nbsp;<a href="https://nodejs.org/download/" target="_blank" rel="noreferrer noopener">official website</a>.</p>

<pre class="wp-block-preformatted"><strong>node -v </strong>

v12.1.0
</pre>

<p>Also, check the npm version</p>

<pre class="wp-block-preformatted"><strong>npm -v </strong>

v12.3.1
</pre>

<h2>Step 4 &ndash; Create Demo Web Server (Optional)</h2>

<p>This is an optional step. If you want to test your node.js install. Let&rsquo;s create a web server with &ldquo;Hello World!&rdquo; text. Create a file&nbsp;<strong>server.js</strong></p>

<pre class="wp-block-preformatted"><strong>vim server.js</strong>
</pre>

<p>and add the following contentserver.js</p>

<pre class="wp-block-preformatted">var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
</pre>

<p>Now start the Node application using the command.</p>

<pre class="wp-block-preformatted"><strong>node server.js</strong>

debugger listening on port 5858
Server running at http://127.0.0.1:3000/
</pre>

<p>You can also start the application with debugging enabled with the following commands.</p>

<pre class="wp-block-preformatted"><strong>node --inspect server.js</strong>

Debugger listening on ws://127.0.0.1:9229/8976a32b-cf99-457c-85fb-e7288cbadac6
For help see https://nodejs.org/en/docs/inspector
Server running at http://127.0.0.1:3000/
</pre>

<p>The web server has been started on port 3000. Now access&nbsp;<strong>http://127.0.0.1:3000/</strong>&nbsp;URL in browser. Now you will need to configure a front-end server for your app.</p>

<ul>
<li>Read:&nbsp;<a href="../../../../blog/how-to-setup-nginx-as-frontend-server-for-node-js/">How to Setup Nginx as Frontend Server for Node.js</a></li>
</ul>

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

How to Install Latest Node.js and NPM on Ubuntu with PPA - TCMHACK

How to Install Latest Node.js and NPM on Ubuntu with PPA

<p>NGINX is a powerful and widely used for web server. It also used as frontend proxy server for multiple web application servers runs behind this. This tutorial will help you to setup your Nginx server as fronted proxy server for your Node.js application.</p>

<h2>1. Install Node.js</h2>

<p>First install the required packages for node.js installation and add PPA of nodejs available on launchpad. Afer that install nodejs with following commands.</p>

<pre class="wp-block-preformatted">$ sudo apt-get install python-software-properties python g++ make
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs
</pre>

<h2>2. Install Nginx</h2>

<p>Now install Nginx web server using apt-get. Nginx is available under default repositories.</p>

<pre class="wp-block-preformatted">$ sudo apt-get install nginx
</pre>

<h2>4. Create Test Node Server</h2>

<p>Now create a test node server app and run it on port 3000 on host 127.0.0.1. To create a node server create file&nbsp;<strong>~/MyApp/myapp.js</strong>&nbsp;.</p>

<pre class="wp-block-preformatted">$ cd ~/MyApp/
$ vi myapp.js
</pre>

<p>and add following content in javascript file.</p>

<pre class="wp-block-preformatted">var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello Worldn');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

</pre>

<p>Now use the following command to start nodejs in background</p>

<pre class="wp-block-preformatted">$ node myapp.js &amp;
</pre>

<p>and access this in browser. You will see result like below screenshot.</p>
<p><img src="../../../../uploads/1744772815532-nginx-with-nodejs-1.png" alt="" width="621" height="268"></p>
<h3>4. Configure NGINX</h3>

<p>After starting a demo server with node.js. Now start configuration with Nginx. Create a virtual host configuration file for your domain under<strong>&nbsp;/etc/nginx/conf.d/</strong>&nbsp;directory.</p>

<pre class="wp-block-preformatted">$ sudo vim /etc/nginx/conf.d/example.com.conf
</pre>

<p>and add the following content.</p>

<pre class="wp-block-preformatted">upstream myapp {
    server 127.0.0.1:3000;
    keepalive 8;
}

# the nginx server instance
server {
    listen 0.0.0.0:80;
    server_name example.com www.example.com;
    access_log /var/log/nginx/example.com.log;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_pass http://myapp/;
      proxy_redirect off;
    }
 }

</pre>

<p>After making all configuration, let&rsquo;s restart Nginx web server using following command.</p>

<pre class="wp-block-preformatted">$ sudo /etc/init.d/nginx restart
</pre>

<h2>5. Verify Setup</h2>

<p>Now access your server using domain name, you will see the same page shows on&nbsp;<strong><a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a></strong></p>
<p><strong><img src="../../../../uploads/1744772851450-nginx-with-nodejs-2.png" alt="" width="621" height="268"></strong></p>

NGINX is a powerful and widely used for web server. It also used as frontend proxy server for multiple web application servers runs behind this. ...

How to Setup Nginx as Frontend Server for Node.js - TCMHACK

How to Setup Nginx as Frontend Server for Node.js

<p><a href="https://github.com/creationix/nvm" target="_blank" rel="noreferrer noopener">NVM</a>&nbsp;is known as Node Version Manager, Similarily to RVM (Ruby Version Manager) for Ruby language. NVM provides an option for easy installation of Node.js. You can also install specific Node.js version or multiple Node.js versions on the same system using nvm and use the required version for application. This tutorial will help you to&nbsp;<strong>Install and Manage Node.js using NVM</strong>.</p>



<p>The default NVM installs under current users home directory, So nvm installation with one user will not be accessible to another user. Windows users can visit our other tutorial to install Nodejs on Windows system.</p>



<h2>Step 1 – Install NVM</h2>



<p>First of all, You need to install NVM on your system. A bash script is available to install nvm on your system. Use the following command to install NVM on your Linux system.</p>



<pre class="wp-block-preformatted">curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
</pre>



<p>Reload system environment using this command. It will set the required environment variables to use nvm on the system.</p>



<pre class="wp-block-preformatted">source ~/.profile     ## Debian based systems 
source ~/.bashrc      ## CentOS/RHEL systems 
</pre>



<h2>Step 2 – Find Available Node.js Version</h2>



<p>At this point, you have installed nvm on your system for the current user. Now find out the available version of Node.js to install. Use&nbsp;<code>ls-remote</code>&nbsp;option to list versions.</p>



<pre class="wp-block-preformatted">nvm ls-remote
</pre>



<p>You will see a long list of available versions.</p>



<pre class="wp-block-preformatted">  ...
  ...
       v10.12.0
       v10.13.0   (LTS: Dubnium)
       v10.14.0   (LTS: Dubnium)
       v10.14.1   (LTS: Dubnium)
       v10.14.2   (LTS: Dubnium)
       v10.15.0   (Latest LTS: Dubnium)
        v11.0.0
        v11.1.0
        v11.2.0
        v11.3.0
        v11.4.0
        v11.5.0
        v11.6.0
        v11.7.0
        v11.8.0
</pre>



<h2>Step 3 – Node.js Installation with NVM</h2>



<p>Now install the node.js version you need to use for running node.js application. Below command will install node.js&nbsp;<strong>v8.10.0</strong>&nbsp;the LTS release on your system.</p>



<pre class="wp-block-preformatted">nvm install v10.15.0
</pre>



<p>You can have also installed the latest version of Node.js.</p>



<pre class="wp-block-preformatted">nvm install v11.8.0
</pre>



<p>Repeat the above command with the different-2 node.js versions to install multiple versions of node.js on your system.</p>



<h2>Step 4 – Set Node.js Default Version</h2>



<p>As you have installed multiple node.js versions, You can select the specific version of node.js as default version used by system and load in the environment. Use below command to list currently installed version and default set version.</p>



<pre class="wp-block-preformatted"><strong>nvm list</strong>

       v10.15.0
        v11.8.0
-&gt;       system
node -&gt; stable (-&gt; v11.8.0) (default)
stable -&gt; 11.8 (-&gt; v11.8.0) (default)
iojs -&gt; N/A (default)
unstable -&gt; N/A (default)
lts/* -&gt; lts/dubnium (-&gt; v10.15.0)
lts/argon -&gt; v4.9.1 (-&gt; N/A)
lts/boron -&gt; v6.16.0 (-&gt; N/A)
lts/carbon -&gt; v8.15.0 (-&gt; N/A)
lts/dubnium -&gt; v10.15.0
</pre>



<p>You can see that Node.js version 11.8.0 is set as the default version. You can change the default Node.js version. Below command will set 10.15.0 as default Node.js version.</p>



<pre class="wp-block-preformatted">nvm use v10.15.0
</pre>



<p>Now verify current active version of node.js</p>



<pre class="wp-block-preformatted">node --version

v10.15.0
</pre>



<h2>Step 5 – Run Applition with Specific Version</h2>



<p>If you have multiple node.js applications on your system and want to run each with a specific version of node.js. NVM provides you an option to use node.js version for running any application. For example</p>



<pre class="wp-block-preformatted">nvm run v10.15.0 app.js
</pre>



<h2>Step 6 – Remove Unused Node.js Version</h2>



<p>This command will provide a list of installed versions of node.js on your system.</p>



<pre class="wp-block-preformatted">nvm list
</pre>



<p>Now remove any version installed on your system using the following command. Below command will remove Node.js version 10.15.0 from your system.</p>



<pre class="wp-block-preformatted">nvm remove v10.15.0</pre>

NVM&nbsp;is known as Node Version Manager, Similarily to RVM (Ruby Version Manager) for Ruby language. NVM provides an option for easy installati...

How to Install and Manage Node.js via NVM - TCMHACK

How to Install and Manage Node.js via NVM

<p>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.</p>

<p>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>.</p>

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

<p>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.</p>

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

<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>

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

<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>

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

<p>var constraints = { audio:true, video:true}</p>

<p>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:</p>

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

<p>If&nbsp;<code>true</code>&nbsp;is specified for video or audio, the resulting stream is&nbsp;<em>required</em>&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).</p>

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

<p>The audio and video properties can take 2 types of values:</p>

<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>

<p>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:</p>

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

<p><strong>The browser will try to honor this, but may return a different resolution stream.</strong>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.</p>

<p>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.</p>

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

<p>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;<em>any</em>&nbsp;MediaTrackConstraint property.</p>

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

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

<p>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).</p>

<p>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:</p>

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

<p>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:</p>

<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>

<p>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>.</p>

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

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

<p>or</p>

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

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

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

<p>I am not sure how well these are supported by mobile browsers.</p>

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

<p>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:</p>

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

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

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

<p>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>.</p>

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

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

<p>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.</p>

<p><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).</p>

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

<p>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.</p>

<p><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.</p>

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

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

<p>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.</p>

<p>Here&rsquo;s how to use the function and print the result to the console:</p>

<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>

<p>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.</p>

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

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

<p>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:</p>

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

<p>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></p>

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

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

<p>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.</p>

<p>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:</p>

<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>

<p>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.</p>

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

<p>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.</p>

<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<br>max avb. channels by<br>default</td>
<td>no</td>
</tr>
<tr>
<td>volume</td>
<td>no</td>
<td>no</td>
<td>supported, defaults<br>to 1 (the maximum)</td>
</tr>
</tbody>
</table>

<p>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).</p>

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

<p>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>:</p>

<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>

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

<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>

<p><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:</p>

<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>
<p><img src="../../../../uploads/1744774797180-stereo-webm-recording-with-arrow-300x208.png" alt="" width="300" height="208"></p>

<p>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>.</p>

<p><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:</p>

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

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

<p>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.</p>

<p>UPDATE: Chrome 63 has implemented stereo audio recording.</p>

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

<p>The&nbsp;<code>echoCancellation</code>&nbsp;constraint works by default on&nbsp;<strong>Chrome</strong>,&nbsp;<strong>Firefox</strong>(<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;<strong>Safari 11</strong>. 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.</p>

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

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

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

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

<p><strong>Chrome</strong>&nbsp;definitely applies noise removal even if it does not support the constraint.</p>

<p><strong>Safari 11</strong>&nbsp;does not support noise suppression at this time.</p>

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

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

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

<p><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</p>

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

<p>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).</p>
<p><img src="../../../../uploads/1744774836257-screen-shot-2017-11-28-at-17.09" alt="" width="780" height="612"></p>

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

<p>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:</p>

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

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

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

<p>A constraint which requests exactly 2 channel audio would be:</p>

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

<p>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>.</p>

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

<p>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:</p>

<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>

<p>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).</p>

<p>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.</p>

<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>

<p>This one&rsquo;s&nbsp;<br>very common, it&rsquo;s thrown in these 3 cases:</p>

<ol>
<li>when you&rsquo;re&nbsp;<a href="../../../../blog/getusermedia-video-constraints/">requesting just a video track through constraints</a>&nbsp;but&nbsp;<strong>the user does not have a webcam</strong>.</li>
<li>when you&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">request just an audio track</a>&nbsp;but&nbsp;<strong>the user does not have a microphone<em>device</em></strong>:</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;<em>device</em>&nbsp;is disabled because there&rsquo;s no mic plugged in or</li>
<li>the recording&nbsp;<em>device</em> is disabled manually from the OS (can be done on Windows) but that&rsquo;s rare.<br><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;<strong>the user does not have a webcam OR a microphone</strong>&nbsp;(it&rsquo;s enough for one device to be missing for the error to be thrown)</li>
</ol>

<p>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;.</p>

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

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

<p>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;<br>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.</p>

<p>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>:</p>

<blockquote class="wp-block-quote">
<p>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.</p>
</blockquote>

<p>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.</p>

<p>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.</p>

<p>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;.</p>

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

<blockquote class="wp-block-quote">
<p>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.</p>
</blockquote>

<p>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.</p>

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

<p>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.</p>

<p>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.</p>

<p>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;.</p>
<p><img src="../../../../uploads/1744775185524-screen-shot-2017-11-21-at-11.22" alt="" width="1024" height="293"></p>

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

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

<p>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;.</p>

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

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

<p>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.</p>

<p>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;.</p>

<p>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;.</p>

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

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

<p>Dismissing the dialog is only possible on Chrome so there&rsquo;s no equivalent error on other browsers.&nbsp;<strong>It&rsquo;s not spec compliant</strong>&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>.</p>

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

<p>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></p>

<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>

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

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

Common getUserMedia() Errors - TCMHACK

Common getUserMedia() Errors

<h2><strong>What's great about TypeScript</strong></h2>

<h3><strong>Starts and ends with JavaScript</strong></h3>

<p>TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.</p>

<p>TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).</p>

<h3><strong>Strong tools for large apps</strong></h3>

<p>Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.</p>

<p>&nbsp;</p>

<p>Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.</p>

<h3><strong>State of the art JavaScript</strong></h3>

<p>TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components.</p>

<p>These features are available at development time for high-confidence app development, but are compiled into simple JavaScript that targets ECMAScript 3 (or newer) environments.</p>

<p>Learn more at&nbsp;<a href="http://typescript.com/" target="_blank" rel="noreferrer noopener">typescript.com</a>!</p>

<h2><strong>What you will learn</strong></h2>

<ul>
<li>Basic types</li>
<li>Classes</li>
<li>Exports/Imports</li>
</ul>

<p>This Codelab is a prerequisite for the angular codelab (link TBD).</p>

<div class="wp-block-button"><a class="wp-block-button__link" href="https://angular-presentation.firebaseapp.com/typescript/intro" target="_blank" rel="noopener noreferrer">Launch the CodeLab</a></div>

TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries...