How To Record Video In Angular 12

In this article, we will learn how to record video and how to make blob URL in Angular 12.

What is Blob URL?

There are clouds available that provide a service as BLOB (Binary Large Object) storage, which supports the storage of large amounts of unstructured object data, such as text or binary data. eg- Azure Blob storage.

Prerequisites:

• Basic knowledge of Angular.
• Code editor likes VS Code.

First, create a new project in Angular using this command.

ng new AngularVideoDemo

Open the app.component.ts and paste the following code into it.

import { Component, ViewChild, ElementRef } from '@angular/core';

declare var MediaRecorder: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('recordedVideo') recordVideoElementRef: ElementRef | any;
  @ViewChild('video') videoElementRef: ElementRef | any;

  htmlVideoElement: HTMLVideoElement | any;
  recordVideoElement: HTMLVideoElement | any;
  mediaRecorder: any;
  recordedBlobs: Blob[] | any;
  isRecording: boolean = false;
  downloadUrl: string | any;
  stream: MediaStream | any;

  constructor() { }

  ngOnInit() {
    navigator.mediaDevices
      .getUserMedia({
        video: {
          width: 360
        }
      })
      .then(stream => {
        this.htmlVideoElement = this.videoElementRef.nativeElement;
        this.recordVideoElement = this.recordVideoElementRef.nativeElement;

        this.stream = stream;
        this.htmlVideoElement.srcObject = this.stream;
      });
  }

  startRecording() {
    this.recordedBlobs = [];
    let options: any = { mimeType: 'video/webm' };

    this.mediaRecorder = new MediaRecorder(this.stream, options);

    this.mediaRecorder.start();
    this.isRecording = !this.isRecording;
    this.onDataAvailableEvent();
    this.onStopRecordingEvent();
  }

  stopRecording() {
    this.mediaRecorder.stop();
    this.isRecording = !this.isRecording;
  }

  playRecording() {
    if (!this.recordedBlobs || !this.recordedBlobs.length) {
      console.log('cannot play.');
      return;
    }
    this.recordVideoElement.play();
  }

  onDataAvailableEvent() {
    try {
      this.mediaRecorder.ondataavailable = (event: any) => {
        if (event.data && event.data.size > 0) {
          this.recordedBlobs.push(event.data);
        }
      };
    } catch (error) {
      console.log(error);
    }
  }

  onStopRecordingEvent() {
    this.mediaRecorder.onstop = (event: Event) => {
      const videoBuffer = new Blob(this.recordedBlobs, {
        type: 'video/webm'
      });
      this.downloadUrl = window.URL.createObjectURL(videoBuffer);
      this.recordVideoElement.src = this.downloadUrl;
      console.log(this.downloadUrl);
    };
  }
}

Open the app.component.html and paste the following code into it.

<div style="text-align:center">
  <video class="video" #video autoplay></video>
  <span class="m-1"></span>
  <br><br>
  <button class="btn btn-primary btn-lg" *ngIf="!isRecording" (click)="startRecording()">Start Recording</button>
  <button class="btn btn-warning btn-lg" *ngIf="isRecording" (click)="stopRecording()">Stop Recording</button>
  <br><br>
  <video class="video" style="width:360 !important;" controls #recordedVideo>
  </video>
</div>

Now add this CDN to your main index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Output

Conclusion

In this article, we have learned about recording videos and how to make blob URL in Angular 12. You can download the code from my Github repository.

If you have any questions or issues about this article, please let me know.

Also, check How To Capture Photo Using ngx-webcam In Angular 12