Facemotion detection can be seen in Machine Learning projects with python and Tensorflow. As a web application most of us haven't seen or even don't know that it exists. Yes we can create our own face motion detection web app with face-api that is written on top of tensorflow.js. We can detect the face emtion just with our camera. We get the percentage of our emotion based on the facial expression. We can do many other stuffs like who the person is based on images,can get the age and many more.Check this <a href="https://github.com/justadudewhohacks/face-api.js" rel="noopener noreferrer" target="_blank">doc</a> for more. In this tutorial we are going to create a web app which detects the facemotion of a user with the camera on your laptop. Few stuffs to know before creating the app.<ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" rel="noopener noreferrer" target="_blank">Promise.all()</a></li><li><a href="https://www.w3schools.com/html/html5_canvas.asp" rel="noopener noreferrer" target="_blank">canvas</a></li><li><a href="https://www.w3schools.com/Jsref/met_element_addeventlistener.asp" rel="noopener noreferrer" target="_blank">addEventListener()</a></li></ul><h2> </h2><h2>Project Structure</h2><pre class="ql-syntax" spellcheck="false">	root/----models
 |-----//copy from my git project ----face-api.min.js----index.html ----script.js
</pre>Copy files for models folder from <a href="https://github.com/sujanchhetri/FacemotionDetector/tree/master/models" rel="noopener noreferrer" target="_blank">here</a>. Create a file `index.html`.<pre class="ql-syntax" spellcheck="false"> &lt;!DOCTYPE html&gt;
	&lt;html lang="en"&gt;
	&lt;head&gt;
	 &lt;meta charset="UTF-8"&gt;
	 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
	 &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
	 	 &lt;link rel="shortcut icon" type=" https://www.apkmirror.com/wp-content/uploads/2020/08/01/5f35e9fea7d39.png" href="images/logo.png"&gt;
	

	 &lt;title&gt;FacemotionDetector&lt;/title&gt;
	 
	&lt;/head&gt;
	&lt;body&gt;
	&lt;/body&gt;
	&lt;/html&gt;
</pre> Add some CSS inside body.<pre class="ql-syntax" spellcheck="false">////////
&lt;style&gt;
	 body {
	 margin: 0;
	 padding: 0;
	 width: 100vw;
	 height: 100vh;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 }
	 canvas {
	 position: absolute;
	 }
&lt;/style&gt;
////
</pre> Create a file `face-api.min.js`.Copy the files from <a href="https://github.com/sujanchhetri/FacemotionDetector/blob/master/face-api.min.js" rel="noopener noreferrer" target="_blank">here</a>. Create a file `script.js`.<pre class="ql-syntax" spellcheck="false">const video = document.getElementById('video')


Promise.all([
&nbsp; faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
&nbsp; faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
&nbsp; faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
&nbsp; faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)


function startVideo() {
&nbsp; navigator.getUserMedia(
&nbsp; &nbsp; { video: {} },
&nbsp; &nbsp; stream =&gt; video.srcObject = stream,
&nbsp; &nbsp; err =&gt; console.error(err)
&nbsp; )
}


video.addEventListener('play', () =&gt; {
&nbsp; const canvas = faceapi.createCanvasFromMedia(video)
&nbsp; document.body.append(canvas)
&nbsp; const displaySize = { width: video.width, height: video.height }
&nbsp; faceapi.matchDimensions(canvas, displaySize)
&nbsp; setInterval(async () =&gt; {
&nbsp; &nbsp; const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
&nbsp; &nbsp; const resizedDetections = faceapi.resizeResults(detections, displaySize)
&nbsp; &nbsp; canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
&nbsp; &nbsp; faceapi.draw.drawDetections(canvas, resizedDetections)
&nbsp; &nbsp; faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
&nbsp; &nbsp; faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
&nbsp; }, 100)
})

</pre> Call the `script.js` and `face-api.min.js` in `index.html`. <pre class="ql-syntax" spellcheck="false"> &lt;script defer src="face-api.min.js"&gt;&lt;/script&gt;&lt;script defer src="script.js"&gt;&lt;/script&gt; 
</pre> Add thee below code in the body tag of `index.html`.<pre class="ql-syntax" spellcheck="false">&lt;video id="video" width="720" height="560" autoplay muted&gt;&lt;/video&gt;
</pre> Hurray your app is ready.Open index.html in a browser and give permission for camera if the browser asks. <a href="https://projecthubatblogue.netlify.app/" rel="noopener noreferrer" target="_blank">source code</a> Happy coding ...

Facemotion Detection App with face-api

Related blogs

About us: