diff --git a/package-lock.json b/package-lock.json
index 547a0a1..0fc337d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,11 @@
         "csstype": "^2.2.0"
       }
     },
+    "audio-recorder-polyfill": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/audio-recorder-polyfill/-/audio-recorder-polyfill-0.3.6.tgz",
+      "integrity": "sha512-yPFXIQMKfIsHTCiNt8Vm4e0UQbnJxeOaVUStEEkV1satYcxaG02ZNite8lpVMCAXJoNnxF2GHVGfIgukPXvtAw=="
+    },
     "csstype": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
diff --git a/package.json b/package.json
index 7cd0165..ae87b58 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,8 @@
     "jsmin": "^1.0.1",
     "typescript": "^3.7.2"
   },
-  "types": "./lib/index.d.ts"
+  "types": "./lib/index.d.ts",
+  "dependencies": {
+    "audio-recorder-polyfill": "^0.3.6"
+  }
 }
diff --git a/src/index.ts b/src/index.ts
index b3d5ca1..818e386 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
+import AudioRecorder from 'audio-recorder-polyfill'
 
 type ReactMediaRecorderRenderProps = {
   error: string;
@@ -60,7 +61,8 @@ export const ReactMediaRecorder = ({
   screen = false,
   mediaRecorderOptions = null,
 }: ReactMediaRecorderProps) => {
-  const mediaRecorder = useRef<MediaRecorder | null>(null);
+  window.MediaRecorder = AudioRecorder
+  const mediaRecorder = useRef<AudioRecorder | null>(null);
   const mediaChunks = useRef<Blob[]>([]);
   const mediaStream = useRef<MediaStream | null>(null);
   const [status, setStatus] = useState<StatusMessages>("idle");
@@ -104,7 +106,9 @@ export const ReactMediaRecorder = ({
   }, [audio, video, screen]);
 
   useEffect(() => {
+    console.log("test test")
     if (!window.MediaRecorder) {
+      alert("Unsupported Browser")
       throw new Error("Unsupported Browser");
     }
 
@@ -165,7 +169,18 @@ export const ReactMediaRecorder = ({
       if (isStreamEnded) {
         await getMediaStream();
       }
+
+      // mediaRecorder.current.onstop = onRecordingStop;
       mediaRecorder.current = new MediaRecorder(mediaStream.current);
+      mediaRecorder.current.addEventListener("dataavailable", event => {
+        onRecordingActive(event)
+      });
+
+      // mediaRecorder.current.ondataavailable = onRecordingActive;
+      mediaRecorder.current.addEventListener("stop", () => {
+        onRecordingStop()
+        mediaRecorder.current.stream.getTracks().forEach(track => track.stop())
+        console.log("executing stop event listener");})
       mediaRecorder.current.ondataavailable = onRecordingActive;
       mediaRecorder.current.onstop = onRecordingStop;
       mediaRecorder.current.onerror = () => {
@@ -215,8 +230,11 @@ export const ReactMediaRecorder = ({
   };
 
   const stopRecording = () => {
+    console.log("stop recording called ")
+    console.log(mediaRecorder.current, " current")
     if (mediaRecorder.current) {
       if (mediaRecorder.current.state !== "inactive") {
+        console.log("stopping the recording from stopRecording")
         setStatus("stopping");
         mediaRecorder.current.stop();
         mediaStream.current &&
diff --git a/tsconfig.json b/tsconfig.json
index 66996ee..4673d7f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,7 @@
 
     /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+     "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */