Quality selector option is not visible in angular v12.2

[codenannu]

import videojs from "video.js";
import "videojs-seek-buttons";
// import "@silvermine/videojs-quality-selector";
import "videojs-contrib-eme";

declare var require: any;
require('@silvermine/videojs-quality-selector')(videojs);

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild('myYtPlyr') myYtPlyr: ElementRef;
ytPlyr: any;
options: object = {
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
responsive: true,
plugins: {
seekButtons: {
forward: 10,
back: 10
}
}
};

encToken: any = '********************';

ngOnInit(): void { }

ngAfterViewInit(): void {
	this.playYtVdo();
}

ngOnDestroy() {
	if (this.ytPlyr) this.ytPlyr.dispose();
}

playYtVdo() {
	setTimeout(() => {
		// this.playerSetting();
		this.ytPlyr = videojs('myYtPlyr', this.options);
		this.ytPlyr.eme();
		this.ytPlyr.src(
			{
				label: '720p',
				selected: true,
				src: 'https://dxip4wcd8mhk4.cloudfront.net/drm/65a25fd4-7a25-46f4-85e6-55bc38264d71/720p/drm/stream.mpd',
				type: 'application/dash+xml',
				//withCredentials: true,
				keySystems: {
					'com.widevine.alpha': {
						url: this.encToken,
					},
				},
			},
			{
				label: '480p',
				selected: false,
				src: 'https://dxip4wcd8mhk4.cloudfront.net/drm/65a25fd4-7a25-46f4-85e6-55bc38264d71/480p/drm/stream.mpd',
				type: 'application/dash+xml',
				//withCredentials: true,
				keySystems: {
					'com.widevine.alpha': {
						url: this.encToken,
					},
				},
			},
		);

		**this.ytPlyr.controlBar.addChild('QualitySelector');**

		this.ytPlyr.on('ready', (event: any) => {
			// this.ytPlyr.play();
		});
	}, 0);
}

}

[codenannu]

Hi Silvermine Team,

Please provide any solution to integrate in angular 12