This commit is contained in:
Hanusiak Piotr 2022-02-08 11:54:18 +01:00
parent 6f7bdf8fe4
commit d6f0c19838
6 changed files with 40 additions and 65 deletions

View File

@ -19,7 +19,6 @@
export let game: Game;
let selectedCamera: string | undefined = undefined;
let selectedMicrophone: string | undefined = undefined;
let volume = 0;
const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
@ -61,12 +60,7 @@
}
});
const unsubscribeLocalVolumeStore = localVolumeStore.subscribe((value) => {
volume = value ?? 0;
});
onDestroy(() => {
unsubscribeLocalVolumeStore();
unsubscribeLocalStreamStore();
});
@ -95,7 +89,7 @@
<img class="background-img" src={cinemaCloseImg} alt="" />
</div>
{/if}
<HorizontalSoundMeterWidget {volume} />
<HorizontalSoundMeterWidget volume={$localVolumeStore} />
<section class="selectWebcamForm">
{#if $cameraListStore.length > 1}

View File

@ -7,7 +7,6 @@
import LL from "../i18n/i18n-svelte";
let stream: MediaStream | null;
let volume = 0;
const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
if (value.type === "success") {
@ -17,13 +16,8 @@
}
});
const unsubscribeLocalVolumeStore = localVolumeStore.subscribe((value) => {
volume = value ?? 0;
});
onDestroy(() => {
unsubscribeLocalStreamStore();
unsubscribeLocalVolumeStore();
});
let isSilent: boolean;
@ -59,7 +53,7 @@
<div class="is-silent">{$LL.camera.my.silentZone()}</div>
{:else if $localStreamStore.type === "success" && $localStreamStore.stream}
<video class="my-cam-video" use:srcObject={stream} autoplay muted playsinline />
<SoundMeterWidget {volume} />
<SoundMeterWidget volume={$localVolumeStore} />
{/if}
</div>

View File

@ -11,7 +11,7 @@
import type { Streamable } from "../../Stores/StreamableCollectionStore";
import Woka from "../Woka/Woka.svelte";
import { onDestroy, onMount } from "svelte";
import { onMount } from "svelte";
import { isMediaBreakpointOnly } from "../../Utils/BreakpointsUtils";
export let clickable = false;
@ -30,11 +30,6 @@
let embedScreen: EmbedScreen;
let videoContainer: HTMLDivElement;
let minimized = isMediaBreakpointOnly("md");
let volume = 0;
const unsubscribe = volumeStore.subscribe((value) => {
volume = value ?? 0;
});
if (peer) {
embedScreen = {
@ -54,10 +49,6 @@
onMount(() => {
resizeObserver.observe(videoContainer);
});
onDestroy(() => {
unsubscribe();
});
</script>
<div
@ -103,7 +94,7 @@
/>
<img src={blockSignImg} draggable="false" on:dragstart|preventDefault={noDrag} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget {volume} />
<SoundMeterWidget volume={$volumeStore} />
{/if}
</div>

View File

@ -1,4 +1,4 @@
import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
import { AudioContext, IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
/**
* Class to measure the sound volume of a media stream
@ -6,41 +6,15 @@ import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "
export class SoundMeter {
private instant: number;
private clip: number;
//private script: ScriptProcessorNode;
private analyser: IAnalyserNode<IAudioContext> | undefined;
private dataArray: Uint8Array | undefined;
private context: IAudioContext | undefined;
private source: IMediaStreamAudioSourceNode<IAudioContext> | undefined;
constructor() {
constructor(mediaStream: MediaStream) {
this.instant = 0.0;
this.clip = 0.0;
//this.script = context.createScriptProcessor(2048, 1, 1);
}
private init(context: IAudioContext) {
this.context = context;
this.analyser = this.context.createAnalyser();
this.analyser.fftSize = 2048;
const bufferLength = this.analyser.fftSize;
this.dataArray = new Uint8Array(bufferLength);
}
public connectToSource(stream: MediaStream, context: IAudioContext): void {
if (this.source !== undefined) {
this.stop();
}
this.init(context);
this.source = this.context?.createMediaStreamSource(stream);
if (this.analyser !== undefined) {
this.source?.connect(this.analyser);
}
//analyser.connect(distortion);
//distortion.connect(this.context.destination);
//this.analyser.connect(this.context.destination);
this.connectToSource(mediaStream, new AudioContext());
}
public getVolume(): number {
@ -78,4 +52,29 @@ export class SoundMeter {
this.dataArray = undefined;
this.source = undefined;
}
private init(context: IAudioContext) {
this.context = context;
this.analyser = this.context.createAnalyser();
this.analyser.fftSize = 2048;
const bufferLength = this.analyser.fftSize;
this.dataArray = new Uint8Array(bufferLength);
}
private connectToSource(stream: MediaStream, context: IAudioContext): void {
if (this.source !== undefined) {
this.stop();
}
this.init(context);
this.source = this.context?.createMediaStreamSource(stream);
if (this.analyser !== undefined) {
this.source?.connect(this.analyser);
}
//analyser.connect(distortion);
//distortion.connect(this.context.destination);
//this.analyser.connect(this.context.destination);
}
}

View File

@ -543,23 +543,21 @@ export const obtainedMediaConstraintStore = derived<Readable<MediaStreamConstrai
}
);
export const localVolumeStore = readable<number | null>(null, (set) => {
export const localVolumeStore = readable<number | undefined>(undefined, (set) => {
let timeout: ReturnType<typeof setTimeout>;
const unsubscribe = localStreamStore.subscribe((localStreamStoreValue) => {
clearInterval(timeout);
if (localStreamStoreValue.type === "error") {
set(null);
set(undefined);
return;
}
const soundMeter = new SoundMeter();
const mediaStream = localStreamStoreValue.stream;
if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) {
set(null);
set(undefined);
return;
}
soundMeter.connectToSource(mediaStream, new AudioContext());
const soundMeter = new SoundMeter(mediaStream);
let error = false;
timeout = setInterval(() => {

View File

@ -36,7 +36,7 @@ export class VideoPeer extends Peer {
private onBlockSubscribe: Subscription;
private onUnBlockSubscribe: Subscription;
public readonly streamStore: Readable<MediaStream | null>;
public readonly volumeStore: Readable<number | null>;
public readonly volumeStore: Readable<number | undefined>;
public readonly statusStore: Readable<PeerStatus>;
public readonly constraintsStore: Readable<ObtainedMediaStreamConstraints | null>;
private newMessageSubscribtion: Subscription | undefined;
@ -73,15 +73,14 @@ export class VideoPeer extends Peer {
};
});
this.volumeStore = readable<number | null>(null, (set) => {
this.volumeStore = readable<number | undefined>(undefined, (set) => {
let timeout: ReturnType<typeof setTimeout>;
const unsubscribe = this.streamStore.subscribe((mediaStream) => {
if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) {
set(null);
set(undefined);
return;
}
const soundMeter = new SoundMeter();
soundMeter.connectToSource(mediaStream, new AudioContext());
const soundMeter = new SoundMeter(mediaStream);
let error = false;
timeout = setInterval(() => {