ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Improved user-settings component 

- Changed replaceTrack to republishTrack until replaceTrack issue is fixed (https://github.com/OpenVidu/openvidu/pull/700)
- Fixed bug in mat options 
- Added audio detector
pull/707/head
csantosm 2022-02-25 14:36:36 +01:00
parent 99a5c945b3
commit f23f39dd6f
4 changed files with 104 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
View File

@ -47,6 +47,12 @@
bottom: 0px;
}
#audio-wave-container {
position: absolute;
right: 20px;
top: 30px;
}
.cameraMessageContainer {
height: 100%;
width: 100%;
@ -1074,7 +1080,7 @@
padding: 35px;
}
.videoContainer{
width: 90%;
width: 100%;
}
}
@media (min-width: 768px) {

17
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
View File

@ -34,6 +34,9 @@
<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone is not available</span>
</div>
<div id="audio-wave-container" *ngIf="stream.type === 'CAMERA'">
<ov-audio-wave [streamManager]="stream.streamManager"></ov-audio-wave>
</div>
</div>
</div>
</div>
@ -56,11 +59,8 @@
</div>
<div class="two" fxFlex="80" fxLayoutAlign="center center">
<mat-form-field class="alternate-theme">
<mat-select
placeholder="Camera Options"
[ngModel]="!isVideoMuted && !!cameraSelected ? cameraSelected.device : 'None'"
(selectionChange)="onCameraSelected($event)"
>
<mat-label>Camera Options</mat-label>
<mat-select [disabled]="isVideoMuted" (selectionChange)="onCameraSelected($event)">
<mat-option *ngFor="let camera of cameras" [value]="camera.device">
{{ camera.label }}
</mat-option>
@ -86,11 +86,8 @@
</div>
<div class="two" fxFlex="80" fxLayoutAlign="center center">
<mat-form-field class="alternate-theme">
<mat-select
placeholder="Microphone Options"
[ngModel]="!isAudioMuted && microphoneSelected ? microphoneSelected.device : 'None'"
(selectionChange)="onMicrophoneSelected($event)"
>
<mat-label>Microphone Options</mat-label>
<mat-select [disabled]="isAudioMuted" (selectionChange)="onMicrophoneSelected($event)">
<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">
{{ microphone.label }}
</mat-option>

19
openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
View File

@ -98,9 +98,14 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
// Is New deviceId different from the old one?
if (this.deviceSrv.needUpdateVideoTrack(videoSource)) {
const mirror = this.deviceSrv.cameraNeedsMirror(videoSource);
const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
//TODO: Uncomment this when replaceTrack issue is fixed
// const pp: PublisherProperties = { videoSource, audioSource: false, mirror };
// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
// TODO: Remove this when replaceTrack issue is fixed
const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
await this.openviduService.republishTrack(pp);
await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
this.cameraSelected = videoSource;
this.deviceSrv.setCameraSelected(this.cameraSelected);
}
@ -115,8 +120,14 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
const audioSource = event?.value;
// Is New deviceId different than older?
if (this.deviceSrv.needUpdateAudioTrack(audioSource)) {
const pp: PublisherProperties = { audioSource, videoSource: false };
await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
//TODO: Uncomment this when replaceTrack issue is fixed
// const pp: PublisherProperties = { audioSource, videoSource: false };
// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
// TODO: Remove this when replaceTrack issue is fixed
const mirror = this.deviceSrv.cameraNeedsMirror(this.cameraSelected.device);
const pp: PublisherProperties = { videoSource: this.cameraSelected.device, audioSource, mirror };
await this.openviduService.republishTrack(pp);
this.microphoneSelected = audioSource;
this.deviceSrv.setMicSelected(this.microphoneSelected);
}

147
openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts
View File

@ -163,22 +163,6 @@ export class OpenViduService {
return await this.OV.initPublisherAsync(targetElement, properties);
}
//TODO: This method is used by republishTrack. Check if it's neecessary
// private destroyPublisher(publisher: Publisher): void {
// if (!!publisher) {
// // publisher.off('streamAudioVolumeChange');
// if (publisher.stream.getWebRtcPeer()) {
// publisher.stream.disposeWebRtcPeer();
// }
// publisher.stream.disposeMediaStream();
// if (publisher.id === this.participantService.getMyCameraPublisher().id) {
// this.participantService.setMyCameraPublisher(publisher);
// } else if (publisher.id === this.participantService.getMyScreenPublisher().id) {
// this.participantService.setMyScreenPublisher(publisher);
// }
// }
// }
async publish(publisher: Publisher): Promise<void> {
if (!!publisher) {
if (publisher === this.participantService.getMyCameraPublisher()) {
@ -220,39 +204,41 @@ export class OpenViduService {
}
}
// Used replaceTrack instead
// republishTrack(videoSource: string, audioSource: string, mirror: boolean = true): Promise<void> {
// return new Promise(async (resolve, reject) => {
// if (!!videoSource) {
// this.log.d('Replacing video track ' + videoSource);
// this.videoSource = videoSource;
// }
// if (!!audioSource) {
// this.log.d('Replacing audio track ' + audioSource);
// this.audioSource = audioSource;
// }
// this.destroyPublisher(this.participantService.getMyCameraPublisher());
// const properties: PublisherProperties = {
// videoSource: this.videoSource,
// audioSource: this.audioSource,
// publishVideo: this.participantService.hasCameraVideoActive(),
// publishAudio: this.participantService.hasCameraAudioActive(),
// mirror
// };
// TODO: Remove this method when replaceTrack issue is fixed
// https://github.com/OpenVidu/openvidu/pull/700
republishTrack(properties: PublisherProperties): Promise<void> {
const {videoSource, audioSource, mirror} = properties;
return new Promise(async (resolve, reject) => {
if (!!videoSource) {
this.log.d('Replacing video track ' + videoSource);
this.videoSource = videoSource;
}
if (!!audioSource) {
this.log.d('Replacing audio track ' + audioSource);
this.audioSource = audioSource;
}
this.destroyPublisher(this.participantService.getMyCameraPublisher());
const properties: PublisherProperties = {
videoSource: this.videoSource,
audioSource: this.audioSource,
publishVideo: this.participantService.hasCameraVideoActive(),
publishAudio: this.participantService.hasCameraAudioActive(),
mirror
};
// const publisher = await this.initPublisher(undefined, properties);
// this.participantService.setMyCameraPublisher(publisher);
const publisher = await this.initPublisher(undefined, properties);
this.participantService.setMyCameraPublisher(publisher);
// publisher.once('streamPlaying', () => {
// this.participantService.setMyCameraPublisher(publisher);
// resolve();
// });
publisher.once('streamPlaying', () => {
this.participantService.setMyCameraPublisher(publisher);
resolve();
});
// publisher.once('accessDenied', () => {
// reject();
// });
// });
// }
publisher.once('accessDenied', () => {
reject();
});
});
}
sendSignal(type: Signal, connections?: Connection[], data?: any): void {
const signalOptions: SignalOptions = {
@ -273,33 +259,36 @@ export class OpenViduService {
this.log.d(`Replacing ${videoType} track`, props);
if (videoType === VideoType.CAMERA) {
let mediaStream: MediaStream;
const oldMediaStream = this.participantService.getMyCameraPublisher().stream.getMediaStream();
const isFirefoxPlatform = this.platformService.isFirefox();
const isReplacingAudio = !!props.audioSource;
const isReplacingVideo = !!props.videoSource;
//TODO: Uncomment this section when replaceTrack issue is fixed
// https://github.com/OpenVidu/openvidu/pull/700
throw('Replace track feature has a bug. We are trying to fix it');
// let mediaStream: MediaStream;
// const oldMediaStream = this.participantService.getMyCameraPublisher().stream.getMediaStream();
// const isFirefoxPlatform = this.platformService.isFirefox();
// const isReplacingAudio = !!props.audioSource;
// const isReplacingVideo = !!props.videoSource;
if (isReplacingVideo) {
if (isFirefoxPlatform) {
// Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
// NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
oldMediaStream.getVideoTracks()[0].stop();
}
mediaStream = await this.createMediaStream(props);
// Replace video track
const videoTrack: MediaStreamTrack = mediaStream.getVideoTracks()[0];
await this.participantService.getMyCameraPublisher().replaceTrack(videoTrack);
} else if (isReplacingAudio) {
if (isFirefoxPlatform) {
// Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
// NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
oldMediaStream.getAudioTracks()[0].stop();
}
mediaStream = await this.createMediaStream(props);
// Replace audio track
const audioTrack: MediaStreamTrack = mediaStream.getAudioTracks()[0];
await this.participantService.getMyCameraPublisher().replaceTrack(audioTrack);
}
// if (isReplacingVideo) {
// if (isFirefoxPlatform) {
// // Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
// // NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
// oldMediaStream.getVideoTracks()[0].stop();
// }
// mediaStream = await this.createMediaStream(props);
// // Replace video track
// const videoTrack: MediaStreamTrack = mediaStream.getVideoTracks()[0];
// await this.participantService.getMyCameraPublisher().replaceTrack(videoTrack);
// } else if (isReplacingAudio) {
// if (isFirefoxPlatform) {
// // Firefox throw an exception trying to get a new MediaStreamTrack if the older one is not stopped
// // NotReadableError: Concurrent mic process limit. Stopping tracks before call to getUserMedia
// oldMediaStream.getAudioTracks()[0].stop();
// }
// mediaStream = await this.createMediaStream(props);
// // Replace audio track
// const audioTrack: MediaStreamTrack = mediaStream.getAudioTracks()[0];
// await this.participantService.getMyCameraPublisher().replaceTrack(audioTrack);
// }
} else if (videoType === VideoType.SCREEN) {
let newScreenMediaStream;
try {
@ -315,6 +304,20 @@ export class OpenViduService {
}
}
private destroyPublisher(publisher: Publisher): void {
if (!!publisher) {
if (publisher.stream.getWebRtcPeer()) {
publisher.stream.disposeWebRtcPeer();
}
publisher.stream.disposeMediaStream();
if (publisher.id === this.participantService.getMyCameraPublisher().id) {
this.participantService.setMyCameraPublisher(publisher);
} else if (publisher.id === this.participantService.getMyScreenPublisher().id) {
this.participantService.setMyScreenPublisher(publisher);
}
}
}
private async createMediaStream(pp: PublisherProperties): Promise<MediaStream> {
let mediaStream: MediaStream;
const isFirefoxPlatform = this.platformService.isFirefox();