add record on input functionality

src/composables/messageItem/useMessageItemComp.ts

@@ -5,6 +5,7 @@ export default function useMessageItemComp(m: string, id: string) {
   const winW = 350;
   const messageWidth = ref(0);
   const messageMarginTop = 75;
+  const test = ref("");
 
   const textFill = computed(() => {
     switch (m) {
@@ -44,15 +45,6 @@ export default function useMessageItemComp(m: string, id: string) {
     }
   }
 
-  // TODO implement func in order to reduce dual renderer height call startingOffset computed prop
-  const getRendererHeight = () => {
-    const messageRenderer = document.getElementById('messageRenderer');
-    if (messageRenderer) {
-      const rect = messageRenderer.getBoundingClientRect();
-      return rect.height;
-    }
-  }
-
   const startingOffset = computed(() => {
     const messageRenderer = document.getElementById('messageRenderer');
     if (messageRenderer) {

src/composables/streamRecorder/useStreamRecorder.ts

@@ -0,0 +1,20 @@
+export default function useStreamRecorder() {
+    let streamRecorder: MediaRecorder;
+    const chunks: Blob[] = [];
+    const initRecorder = async () => {
+           const stream = await  navigator.mediaDevices.getUserMedia({ audio: true });
+           streamRecorder = new MediaRecorder(stream);
+           streamRecorder.ondataavailable = (e: any) =>  { chunks.push(e.data) }
+           streamRecorder.onstop = (e: any) => {
+             const audioBlob = new Blob(chunks, {'type': 'audio/ogg; codecs=opus'} );
+             // do something with blob
+           }
+          return {
+            streamRecorder
+          }
+    }
+
+    return {
+      initRecorder
+    }
+}