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
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
},
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;
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);
}
}
}
Join the conversation! Your thoughts help the community grow.