Video Recording In Angular

The Code Points August 21, 2022 0

In this article, we will learn about how video record in Angular.

So, let's start

First, we need to create a new angular application using following command.

ng new AngularVideoRecording

Now add the following code under the app.module.ts.

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);
    };
  }
}

Now, open the app.component.html file and add the following code for video recording and preview.

<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 below CDN link into the root index.html file for jQuery and Bootstrap.

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

Conclusion

In this article, we learned how video record in Angular and showing preview with demo application.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.