How To Record A Video Using Angular

Here I recorded a video using MediaRecorder in Angular, So for that follow the below steps for a practical example.

Step 1

Install the @types/dom-mediacapture-record using below npm command

npm i @types/dom-mediacapture-record

JavaScript

Copy

No need to import this package into the app.module.ts file, We can directly use in our component.

Step 2

Add the below code to your tsconfig.json file for avoiding some elements-related errors.

tsconfig.json

"compilerOptions": {
    "strictPropertyInitialization": false
  },

JavaScript

Copy

If you have already added then avoid it.

Step 3

Now need to import some basic packages from @angular/core and declare the MediaRecorder variable into the component where you want to use it. 

Here I am using the app.component.ts file

import {   Component,  ViewChild,  OnInit,  ElementRef} from '@angular/core';
declare var MediaRecorder: any;

JavaScript

Copy

Let's share the whole ts file code, Please refer to the below app.component.ts file code

import {Component,  ViewChild,  OnInit,  ElementRef} from '@angular/core';
declare var MediaRecorder: any;
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    //Video Record and Play By Rajesh Gami
    videoElement: HTMLVideoElement;
    recordVideoElement: HTMLVideoElement;
    mediaVideoRecorder: any;
    videoRecordedBlobs: Blob[];
    isRecording: boolean = false;
    downloadVideoUrl: string;
    stream: MediaStream;
    @ViewChild('recordedVideo') recordVideoElementRef: ElementRef;
    @ViewChild('liveVideo') videoElementRef: ElementRef;
    constructor() {}
    async ngOnInit() {
        navigator.mediaDevices.getUserMedia({
            video: {
                width: 480
            }
        }).then(stream => {
            this.videoElement = this.videoElementRef.nativeElement;
            this.recordVideoElement = this.recordVideoElementRef.nativeElement;
            this.stream = stream;
            this.videoElement.srcObject = this.stream;
        });
    }
    startVideoRecording() {
        this.videoRecordedBlobs = [];
        let options: any = {
            mimeType: 'video/webm'
        };
        try {
            this.mediaVideoRecorder = new MediaRecorder(this.stream, options);
        } catch (err) {
            console.log(err);
        }
        this.mediaVideoRecorder.start();
        this.isRecording = !this.isRecording;
        this.onDataAvailableVideoEvent();
        this.onStopVideoRecordingEvent();
    }
    stopVideoRecording() {
        this.mediaVideoRecorder.stop();
        this.isRecording = !this.isRecording;
    }
    playRecording() {
        if (!this.videoRecordedBlobs || !this.videoRecordedBlobs.length) {
            return;
        }
        this.recordVideoElement.play();
    }
    onDataAvailableVideoEvent() {
        try {
            this.mediaVideoRecorder.ondataavailable = (event: any) => {
                if (event.data && event.data.size > 0) {
                    this.videoRecordedBlobs.push(event.data);
                }
            };
        } catch (error) {
            console.log(error);
        }
    }
    onStopVideoRecordingEvent() {
        try {
            this.mediaVideoRecorder.onstop = (event: Event) => {
                const videoBuffer = new Blob(this.videoRecordedBlobs, {
                    type: 'video/webm'
                });
                this.downloadVideoUrl = window.URL.createObjectURL(videoBuffer);
                this.recordVideoElement.src = this.downloadVideoUrl;
            };
        } catch (error) {
            console.log(error);
        }
    }
}

JavaScript

Copy

Put the same code in your component and verify once it is the correct one.

Here I have created some functions regarding our video recording functionality, and If you want to try other mime types then you can use them according to your requirement,

Refer to the below support mime types:

"video/webm",
"audio/webm",
"video/webm;codecs=vp8",
"video/webm;codecs=daala",
"video/webm;codecs=h264",
"audio/webm;codecs=opus",
"video/mpeg",

BASIC

Copy

Step 4

Put the HTML code as shown below 

app.component,html

<div style="text-align:center">
  <h1 style="margin-bottom:30px;">Video Record Using Angular by Rajesh Gami</h1>
  <video class="video" #liveVideo autoplay controls></video>
  <span class="m-1"></span>
  <video class="video" style="width:480px !important;" controls #recordedVideo></video>
  <br>
  <button class="btn btn-success btn-lg" *ngIf="!isRecording" (click)="startVideoRecording()">Start Recording</button>
  <button class="btn btn-warning btn-lg" *ngIf="isRecording" (click)="stopVideoRecording()">Stop Recording</button>
</div>

Markup

Copy

If you want to get a better UI then please add the below script to your main index.html, Here I am sharing the whole index.html code you can use only CSS and js.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video Record by RG</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/ng-drag-drop@4.0.0/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Markup

Copy

Let's save and run the app, Browser asks for your camera access give them.

Output

It looks like this and then click on Start Recording to start and Stop Recording to stop it. Once your recorder has done your recorded video show on right side, See below screenshot

You can play your recorded video by clicking on the play/pause icon.

Here I have attached the source code of this app so you can download it and for more blogs/articles follow my blog website which is mentioned in my C# Corner Profile.