openvidu/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html

<div class="device-container-element" [class.mute-btn]="!isCameraEnabled">
	<mat-form-field id="video-devices-form" *ngIf="cameras.length > 0">
		<mat-select
			[disabled]="!hasVideoDevices"
			[compareWith]="compareObjectDevices"
			[value]="cameraSelected"
			(selectionChange)="onCameraSelected($event)"
		>
			<mat-select-trigger id="mat-select-trigger">
				<button
					mat-flat-button
					id="camera-button"
					[disableRipple]="true"
					[disabled]="!hasVideoDevices || cameraStatusChanging"
					[class.mute-btn]="!isCameraEnabled"
					(click)="toggleCam($event)"
					[matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
					[matTooltipDisabled]="!hasVideoDevices"
				>
					<mat-icon *ngIf="isCameraEnabled" id="videocam"> videocam </mat-icon>
					<mat-icon *ngIf="!isCameraEnabled" id="videocam_off"> videocam_off </mat-icon>
				</button>
				<span class="selected-text" *ngIf="!isCameraEnabled"> {{ 'PANEL.SETTINGS.DISABLED_VIDEO' | translate }} </span>
				<span class="selected-text" *ngIf="isCameraEnabled"> {{ cameraSelected.label }} </span>
			</mat-select-trigger>
			<mat-option *ngFor="let camera of cameras" [disabled]="!isCameraEnabled" [value]="camera" id="option-{{ camera.label }}">
				{{ camera.label }}
			</mat-option>
		</mat-select>
	</mat-form-field>

	<div id="video-devices-form" *ngIf="cameras.length === 0">
		<div id="mat-select-trigger">
			<button mat-icon-button id="camera-button" class="mute-btn" [disabled]="true">
				<mat-icon id="videocam_off"> videocam_off </mat-icon>
			</button>
			<span id="video-devices-not-found"> {{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }} </span>
		</div>
	</div>
</div>