Merge pull request #61 from TECH7Fox/develop

JSSIP Migration
TECH7Fox · Mar 27, 2022 · ee248ee · ee248ee
2 parents d25d3da + 7bb63d6
commit ee248ee
Show file tree

Hide file tree

Showing 4 changed files with 332 additions and 166 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,6 @@
   },
   "dependencies": {
     "lit": "^2.2.0",
-    "sip.js": "^0.20.0"
+    "jssip": "^3.9.0"
   }
 }
diff --git a/src/audioVisualizer.ts b/src/audioVisualizer.ts
@@ -1,20 +1,48 @@
 export class AudioVisualizer {
     shouldStop: boolean;
-    audioContext: any;
-    processFrame: any;
+    audioContext: AudioContext;
     analyser: any;
+    renderRoot: any;
+    visualValueCount: number;
+    visualMainElement: any;
+    visualElements: any;
 
-    constructor(audioContext: AudioContext, processFrame: (data: any) => void, stream: any) {
+    constructor(renderRoot: any, stream: MediaStream, visualValueCount: number) {
         this.shouldStop = false;
-        this.audioContext = audioContext;
-        this.processFrame = processFrame;
-        this.connectStream = this.connectStream.bind( this );
+        this.renderRoot = renderRoot;
+        this.visualValueCount = visualValueCount;
+        this.visualMainElement = this.renderRoot.querySelector('#audioVisualizer');
+        this.audioContext = new AudioContext();
+        this.initDOM();
         this.connectStream(stream);
     }
 
     public stop() {
         this.shouldStop = true;
     }
+
+    initDOM() {
+        this.visualMainElement!.innerHTML = '';
+        let i;
+        for ( i = 0; i < this.visualValueCount; ++i ) {
+            const elm = document.createElement( 'div' );
+            this.visualMainElement!.appendChild( elm );
+        }
+
+        this.visualElements = this.renderRoot.querySelectorAll('#audioVisualizer div');
+    };
+
+    processFrame(data: any) {
+        const dataMap: any = { 0: 15, 1: 10, 2: 8, 3: 9, 4: 6, 5: 5, 6: 2, 7: 1, 8: 0, 9: 4, 10: 3, 11: 7, 12: 11, 13: 12, 14: 13, 15: 14 };
+        const values: any = Object.values( data );
+        let i;
+        for ( i = 0; i < this.visualValueCount; ++i ) {
+            const value = (values[ dataMap[ i ] ] / 255);// + 0.025;
+            const elmStyles = this.visualElements[ i ].style;
+            elmStyles.transform = `scaleY( ${ value } )`;
+            elmStyles.opacity = Math.max( .25, value );
+        }
+    };
 
     connectStream(stream: any) {
         this.analyser = this.audioContext.createAnalyser();
@@ -28,11 +56,9 @@ export class AudioVisualizer {
 
     initRenderLoop() {
         const frequencyData = new Uint8Array(this.analyser.frequencyBinCount);
-        const processFrame = this.processFrame || ( () => {} );
-
         const renderFrame = () => {
             this.analyser.getByteFrequencyData(frequencyData);
-            processFrame(frequencyData);
+            this.processFrame(frequencyData);
 
             if (this.shouldStop !== true) {
                 requestAnimationFrame(renderFrame);