{"id":1958,"date":"2019-06-17T14:14:51","date_gmt":"2019-06-17T12:14:51","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=1958"},"modified":"2023-12-20T20:01:11","modified_gmt":"2023-12-20T19:01:11","slug":"building-a-rear-view-mirror-app-with-electron-and-angular","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/building-a-rear-view-mirror-app-with-electron-and-angular\/","title":{"rendered":"Building a rearview mirror app with Electron and Angular"},"content":{"rendered":"

Coming up with the idea<\/h1>\n

Let me sketch the scenario which led me to implement the rear view mirror desktop application. I was trying to fix a rather strange bug, at some point I realized I was stuck and asked a colleague for help. When we both realized that we need to ask another developer if he has an idea how we could approach the problem we drew attention from even more colleagues and all of a sudden 4 people where standing behind me, looking at my screen, arguing about solutions, pointing at lines of code on my screen – it was pretty hectic.<\/p>\n

It felt like I was driving on the highway with 3 kids on the backseat of my car, having a noisy argument. I felt like I needed a rearview mirror to observe what the kids behind me are doing.<\/p>\n

\"\"<\/a><\/p>\n

In the following article I’ll guide you through the process of creating the application. The source code is available on GitHub https:\/\/github.com\/kaihenzler\/electron-rearview-mirror<\/a><\/p>\n

You can find the binaries at: https:\/\/github.com\/kaihenzler\/electron-rearview-mirror\/releases\/tag\/1.0.0<\/a><\/p>\n

\"\"<\/a><\/p>\n

Step 1: Looking for existing applications<\/h2>\n

Anytime I have such an idea I quickly look for already existing application on the internet. Because I’m using a Mac as my developer machine I started looking for apps in the Mac App Store. I found 4 applications which ranged from 1\u20ac – 4.50\u20ac and just display a rectangular image of your Laptop camera – not what I wanted. Looking for alternatives outside the Mac App Store also failed, I couldn’t find a suitable app that would fit my needs.<\/p>\n

Step 2: Let’s build it on my own<\/h2>\n

There is no suitable available for free on the internet, so “let me build it on my own” I thought. As my focus is on web development and I don’t have any experience in writing Mac application I figured I should use web technologies to build this app. Building it using web technologies would also result in a cross-platform application that should work on all major operating systems. When talking about web technologies and desktop application the first thing that comes to your mind is Electron<\/a>. I have never developed an electron application but on there website they state:<\/p>\n

\n

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.<\/p>\n<\/blockquote>\n

I though that this shouldn’t be a problem for me, as I’m pretty experience with web technologies.<\/p>\n

Step 3: Let’s use an Angular starter<\/h2>\n

As I’m very familiar with Angular I tried to look for an Electron starter-application that already bundles Angular. In hindsight I could have used plain JavaScript\/TypeScript to build it as pretty much no Angular-specific code was needed to do the job. Googling for “angular electron starter” gives you an amazing repo on GitHub that seems to include everything you need.<\/p>\n

https:\/\/github.com\/maximegris\/angular-electron<\/a><\/p>\n

Cloning the repository<\/p>\n

git clone https:\/\/github.com\/maximegris\/angular-electron.git<\/pre>\n
and installing the dependencies is all you need to get started<\/p>\n
npm install<\/pre>\n
to start the application you can execute the following in the project’s root folder<\/p>\n
npm run start<\/pre>\n
Step 4: Display the live camera video<\/h2>\n
Template<\/h3>\n
A couple of years ago I would’ve said that this is a huge effort and requires multiple developers to code for weeks to get this done for all operating systems. Luckily we live a world where modern Javascript and HTML API’s make our lives much simpler.<\/p>\n
We will do all of our work in the HomeComponent -> src\/app\/components\/home\/home.component.html\u00a0<\/strong><\/em><\/p>\n
let’s get rid of the current content of the file and setup the HTML Template<\/p>\n
<div class=\"container\">\r\n  <div class=\"camera-wrapper\">\r\n    <video #camera autoplay><\/video>\r\n  <\/div>\r\n<\/div><\/pre>\n
The important part is the <video><\/strong> tag in the inner div. The 2 wrapping div’s are just used for the styling and layout, we’ll get back to that later. We first add the autoplay<\/a> attribute to the <video><\/strong> element that starts playing a video once we connect a MediaStream. The second thing we’re going to add is the #camera<\/strong> Template Reference Variable<\/a> so we can easily select this element within our component class.<\/p>\n
Component<\/h3>\n
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: '.\/home.component.html',\r\n  styleUrls: ['.\/home.component.scss']\r\n})\r\nexport class HomeComponent implements AfterViewInit {\r\n\r\n  @ViewChild('camera')\r\n  camera: ElementRef<HTMLVideoElement>;\r\n\r\n  constructor() {\r\n  }\r\n\r\n  async ngAfterViewInit() {\r\n    try {\r\n      this.camera.nativeElement.srcObject = await navigator.mediaDevices.getUserMedia({\r\n        video: {\r\n          width: 590,\r\n          height: 165,\r\n        }\r\n      });\r\n    } catch (e) {\r\n      alert('could not connect stream ' + e);\r\n    }\r\n  }\r\n}<\/pre>\n
We first take a look at line 10+11. In this statement we are using the ViewChild()<\/strong> decorator of Angular to get a reference to the <video><\/strong> DOM Element we added in the step before. This gives us access to the raw DOM Element within the\u00a0ngAfterViewInit\u00a0<\/strong>lifecycle hook. We can now access it with\u00a0this.camera.nativeElement<\/strong><\/p>\n
In the next step we want to get the MediaStream of our laptop camera. Fortunately there is a very simple API for that. By simply calling navigator.mediaDevices.getUserMedia()<\/a> in line 18 we get a Promise of a MediaStream. We are using async\/await in combination with try\/catch to easily assign the MediaStream to the srcObject<\/a> attribute of the <video><\/strong> element.<\/p>\n
That was all the magic to get a live video of your webcam showing up in your Electron App.<\/p>\n
Step 5: Styling to make it look like a real rearview mirror<\/h2>\n
A quick Google search gives us a few promising images we can use for the background. The asset is also added to the GitHub Repo<\/a>, license and source is mentioned in the readme.md<\/strong> in the repository.<\/p>\n

\n\"\"<\/a><\/p>\n
Once we added the image to the src\/assets folder and renamed it to rear-view-background.png\u00a0<\/strong>we can look finally write some css to style our component. We are once again only working in the HomeComponent. I’m not going through all the things we are doing in here. But to summarize:<\/p>\n