Recently, I've been working on integrating Media Recorder into my Angular 9 application by following the instructions provided at this link. However, I have encountered some issues along the way.
When I access the page with the Media Recorder component, I notice that my camera light turns on, indicating that it has been detected. However, all I see below is a blank space:
https://i.stack.imgur.com/FdO2G.png
None of the buttons seem to be functional and I am unsure as to why this might be happening.
Upon checking my console log, I came across the following:
https://i.stack.imgur.com/IA7Y2.png
I would appreciate any insights you could offer after reviewing my mediarecorder.ts component code:
/// <reference types="@types/dom-mediacapture-record" />
import { Component, OnInit, AfterViewInit } from '@angular/core';
import {PatientsService} from '../patients.service';
// declare var MediaRecorder:any;
@Component({
selector: 'app-mediarecord',
templateUrl: './mediarecord.component.html',
styleUrls: ['./mediarecord.component.scss']
})
export class MediarecordComponent implements AfterViewInit,OnInit {
constraints; video; mediaRecorder; options;
private recordedChunks: any[] = [];
streams: string[] = [];
audioChunks: any[];
videoChunks: any[];
constructor(private signalHub: PatientsService)
{
this.constraints = { audio: true, video: true };
}
ngOnInit() {
// const video = document.createElement('video');
// this.video = document.getElementsByClassName('video')[0];
// console.log(this.video);
}
ngAfterViewInit() {
this.runMedia();
}
successCallback(stream) {
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
this.options = { mimeType: 'video/webm; codecs=vp9' };
console.log("Oh no");
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
this.options = { mimeType: 'video/webm; codecs=vp8' };
} else {
// ...
}
this.mediaRecorder = new MediaRecorder(stream, this.options);
console.log(this.mediaRecorder);
console.log(this.options);
this.mediaRecorder.ondataavailable = this.handleDataAvailable;
this.mediaRecorder.start();
console.log(this.mediaRecorder);
console.log("oo");
}
stopVideo() {
this.mediaRecorder.stop();
}
handleDataAvailable(blob) {
console.log(blob);
this.recordedChunks.push(blob.data);
}
errorCallback(error) {
console.log('navigator.getUserMedia error: ', error);
}
runMedia() {
this.streams.push("f");
console.log(this.constraints);
navigator.mediaDevices.getUserMedia(this.constraints)
.then((stream) => {
console.log(stream);
this.successCallback(stream);
})
.catch(this.errorCallback);
}
}
In my HTML file, I understand that I need methods to bind these functionalities with the TypeScript component:
<video id="Recording" width="800" height="400" playsinline autoplay ></video>
<div>
<button id="start" (click) = "ngAfterViewInit()" >Start camera</button>
<button id="record" >Start Recording</button>
<button id="play" >Play</button>
<button id="download">Download</button>
</div>
<div>
<h4>Media Stream Constraints options</h4>
<p>Echo cancellation: <input type="checkbox" id="echoCancellation"></p>
</div>
<div>
<span id="errorMsg"></span>
</div>
Additionally, I have an index.d.ts file providing type definitions for w3c MediaStream Recording 1.0, and a lib.dom.ts file obtained via npm install @types/dom-mediacapture-record.