stopRecording fix

MooseSaeed · Apr 2, 2022 · e0deafa · e0deafa
1 parent 09fed78
commit e0deafa
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -17622,7 +17622,9 @@ __webpack_require__.r(__webpack_exports__);
   data: function data() {
     return {
       recording: false,
-      lang: ""
+      lang: "",
+      socket: null,
+      stream: null
     };
   },
   methods: {
@@ -17639,18 +17641,25 @@ __webpack_require__.r(__webpack_exports__);
       this.startTranscript();
     },
     stopRecording: function stopRecording() {
-      WebSocket.close;
+      this.socket.close;
+      this.stream.getTracks().forEach(function (track) {
+        track.stop();
+      });
     },
     startTranscript: function startTranscript() {
+      var _this = this;
+
       navigator.mediaDevices.getUserMedia({
         audio: true,
         video: false
       }).then(function (stream) {
+        _this.stream = stream;
         var mediaRecorder = new MediaRecorder(stream, {
           mimeType: "audio/webm"
         });
         var language = document.querySelector("select").value;
         var socket = new WebSocket("wss://api.deepgram.com/v1/listen?language=" + language, ["token", "f5877aff8c5aa45112b63e645ddb3841472df7a6"]);
+        _this.socket = socket;
 
         socket.onopen = function () {
           mediaRecorder.addEventListener("dataavailable", function (event) {
@@ -17752,7 +17761,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
       id: "",
       recording: false,
       local: null,
-      path: ""
+      path: "",
+      socket: null,
+      stream: null
     };
   },
   methods: (_methods = {
@@ -17805,17 +17816,24 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
   }), _defineProperty(_methods, "initRecorder", function initRecorder() {
     this.startTranscript();
   }), _defineProperty(_methods, "stopRecording", function stopRecording() {
-    WebSocket.close;
+    this.socket.close;
+    this.stream.getTracks().forEach(function (track) {
+      track.stop();
+    });
   }), _defineProperty(_methods, "startTranscript", function startTranscript() {
+    var _this = this;
+
     navigator.mediaDevices.getUserMedia({
       audio: true,
       video: false
     }).then(function (stream) {
+      _this.stream = stream;
       var mediaRecorder = new MediaRecorder(stream, {
         mimeType: "audio/webm"
       });
       var language = document.querySelector("select").value;
       var socket = new WebSocket("wss://api.deepgram.com/v1/listen?language=" + language, ["token", "f5877aff8c5aa45112b63e645ddb3841472df7a6"]);
+      _this.socket = socket;
 
       socket.onopen = function () {
         mediaRecorder.addEventListener("dataavailable", function (event) {

diff --git a/resources/js/components/Markdowntoolbar.vue b/resources/js/components/Markdowntoolbar.vue
@@ -214,6 +214,8 @@ export default {
         return {
             recording: false,
             lang: "",
+            socket: null,
+            stream: null,
         };
     },
     methods: {
@@ -231,13 +233,17 @@ export default {
         },
 
         stopRecording() {
-            WebSocket.close;
+            this.socket.close;
+            this.stream.getTracks().forEach(function (track) {
+                track.stop();
+            });
         },
 
         startTranscript() {
             navigator.mediaDevices
                 .getUserMedia({ audio: true, video: false })
                 .then((stream) => {
+                    this.stream = stream;
                     const mediaRecorder = new MediaRecorder(stream, {
                         mimeType: "audio/webm",
                     });
@@ -248,6 +254,9 @@ export default {
                         "wss://api.deepgram.com/v1/listen?language=" + language,
                         ["token", process.env.MIX_VUE_APP_DEEPGRAM_KEY]
                     );
+
+                    this.socket = socket;
+
                     socket.onopen = () => {
                         mediaRecorder.addEventListener(
                             "dataavailable",

diff --git a/resources/js/components/Videoplayer.vue b/resources/js/components/Videoplayer.vue
@@ -198,6 +198,8 @@ export default {
             recording: false,
             local: null,
             path: "",
+            socket: null,
+            stream: null,
         };
     },
     methods: {
@@ -255,13 +257,17 @@ export default {
         },
 
         stopRecording() {
-            WebSocket.close;
+            this.socket.close;
+            this.stream.getTracks().forEach(function (track) {
+                track.stop();
+            });
         },
 
         startTranscript() {
             navigator.mediaDevices
                 .getUserMedia({ audio: true, video: false })
                 .then((stream) => {
+                    this.stream = stream;
                     const mediaRecorder = new MediaRecorder(stream, {
                         mimeType: "audio/webm",
                     });
@@ -272,6 +278,9 @@ export default {
                         "wss://api.deepgram.com/v1/listen?language=" + language,
                         ["token", process.env.MIX_VUE_APP_DEEPGRAM_KEY]
                     );
+
+                    this.socket = socket;
+
                     socket.onopen = () => {
                         mediaRecorder.addEventListener(
                             "dataavailable",