openvidu-components: Detected audio with start/stop speakings events

Added an audio wave icon for helping to detect when a publisher is speaking

openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css

@@ -0,0 +1,64 @@
+@keyframes normal {
+	0%{
+		height: 20%;
+	}
+	50%{
+		height: 40%;
+	}
+	100%{
+		height: 20%;
+	}
+}
+@keyframes loud {
+	0%{
+		height: 30%;
+	}
+	50%{
+		height: 80%;
+
+	}
+	100%{
+		height: 30%;
+	}
+}
+
+.audio-container{
+	background-color: var(--ov-tertiary-color);
+	padding: 5px;
+	max-width: 15px;
+	max-height: 15px;
+	height: 15px;
+	width: 15px;
+	border-radius: 50%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.stick{
+	margin: auto;
+	height: 80%;
+	width: 3px;
+	background: var(--ov-light-color);
+	border-radius: 8px;
+}
+
+.pause {
+	animation-play-state:paused;
+	height: 1px;
+}
+
+.play {
+	animation-duration: 1.2s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	animation-play-state:running;
+}
+
+
+.normal{
+	animation-name: normal;
+}
+
+.loud{
+	animation-name: loud;
+}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html

@@ -0,0 +1,5 @@
+<div class="audio-container">
+	<div class="stick normal" [ngClass]="isSpeaking ? 'play' : 'pause'"></div>
+	<div class="stick loud" [ngClass]="isSpeaking ? 'play' : 'pause'"></div>
+	<div class="stick normal" [ngClass]="isSpeaking ? 'play' : 'pause'"></div>
+</div>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioWaveComponent } from './audio-wave.component';
+
+describe('AudioWaveComponent', () => {
+  let component: AudioWaveComponent;
+  let fixture: ComponentFixture<AudioWaveComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AudioWaveComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AudioWaveComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { PublisherSpeakingEvent, StreamManager } from 'openvidu-browser';
+
+@Component({
+	selector: 'ov-audio-wave',
+	templateUrl: './audio-wave.component.html',
+	styleUrls: ['./audio-wave.component.css']
+})
+export class AudioWaveComponent implements OnInit {
+	isSpeaking: boolean = false;
+	audioVolume: number = 0;
+
+	@Input()
+	set streamManager(streamManager: StreamManager) {
+		console.log('streamManager', streamManager);
+
+		if(streamManager) {
+			streamManager.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => {
+				this.isSpeaking = true;
+			});
+
+			streamManager.on('publisherStopSpeaking', (event: PublisherSpeakingEvent) => {
+				this.isSpeaking = false;
+			});
+
+			// streamManager.on('streamAudioVolumeChange', (event: any) => {
+			// 	// The loudest sounds on your system will be at 0dB
+			// 	// and silence in webaudio is -100dB.
+			// 	this.audioVolume = 100 + event.value.newValue;
+			// 	console.log('Publisher audio volume change from ' + event.value.oldValue + ' to' + event.value.newValue);
+			// 	console.log('AUDIO VOLUME', this.audioVolume);
+			// });
+		}
+
+	}
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css

@@ -30,6 +30,13 @@
 	padding: 10px;
   }
 
+  #audio-wave-container {
+	position: absolute;
+    right: 0;
+    z-index: 1;
+    padding: 5px;
+  }
+
   .fullscreen {
 	top: 40px;
   }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html

@@ -31,9 +31,13 @@
 		<ng-content select="[network-quality]"></ng-content>
 	</div>
 
+	<div id="audio-wave-container">
+		<ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave>
+	</div>
+
 	<ov-video
 		(dblclick)="toggleVideoEnlarged()"
-		[streamManager]="this._stream.streamManager"
+		[streamManager]="_stream.streamManager"
 		[mutedSound]="mutedSound"
 	></ov-video>
 

openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts

@@ -59,7 +59,7 @@ import { ParticipantsPanelComponent } from './components/panel/participants-pane
 import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
 import { PanelComponent } from './components/panel/panel.component';
 import { StreamDirective } from './directives/stream/stream.directive';
-import { BrowserModule } from '@angular/platform-browser';
+import { AudioWaveComponent } from './components/audio-wave/audio-wave.component';
 
 @NgModule({
 	declarations: [
@@ -81,6 +81,7 @@ import { BrowserModule } from '@angular/platform-browser';
 		ParticipantItemComponent,
 		ParticipantsPanelComponent,
 		VideoconferenceComponent,
+  		AudioWaveComponent,
 		PanelComponent,
 	],
 	imports: [
@@ -135,6 +136,7 @@ import { BrowserModule } from '@angular/platform-browser';
 		LayoutComponent,
 		StreamComponent,
 		VideoComponent,
+		AudioWaveComponent,
 		ParticipantConnectionsPipe,
 		CommonModule,
 		StreamDirective

openvidu-components-angular/projects/openvidu-angular/src/public-api.ts

@@ -30,6 +30,7 @@ export * from './lib/components/session/session.component';
 export * from './lib/components/layout/layout.component';
 export * from './lib/components/stream/stream.component';
 export * from './lib/components/video/video.component';
+export * from './lib/components/audio-wave/audio-wave.component';
 
 // Models
 export * from './lib/models/participant.model';