{"version":3,"sources":["webpack:///./src/components/VideoFrame.vue?0733","webpack:///src/components/VideoFrame.vue","webpack:///./src/components/VideoFrame.vue?01d4","webpack:///./src/components/VideoFrame.vue","webpack:///./src/components/VideoFrame.vue?5c73"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","style","getDisplay","ref","videoWidth","videoHeight","domProps","stream","muted","on","playInCanvas","isUserVideo","callAccepted","isHost","callEnded","_e","isRecording","isPause","recordedData","length","recordVideo","_v","pauseRecording","_s","stopRecording","$event","downloaded","staticRenderFns","name","components","props","MediaStream","Boolean","callerId","String","customerName","customerEmail","caller","uploadVideo","Function","comp","data","timeMargin","recordingStream","recorder","interval","ratio","loading","videoId","totalChunk","index","mounted","window","onresize","setVideoSize","setCanvasSize","console","log","beforeDestroy","methods","c","$vuetify","breakpoint","lgAndUp","screen","width","canvas","document","getElementById","v","height","uploadChunk","formData","append","chunk","recordChunk","that","stop","recordedBlob","ondataavailable","push","event","Blob","video","e","target","left","txt","txtPos","ctx","getContext","captureStream","MediaRecorder","getText","font","strokeStyle","measureText","y","x","loop","paused","ended","clearRect","drawImage","strokeText","setTimeout","addTimeStamp","setInterval","start","finalizeUpload","d","Date","toString","replaceAll","fileName","FormData","component","VBtn","VCard","VIcon","VSpacer","VToolbar"],"mappings":"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","file":"js/chunk-a03368be.2ba50396.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('v-card',{staticClass:\"d-flex justify-center top-container\",attrs:{\"color\":\"transparent\",\"flat\":\"\"}},[_c('v-card',{staticClass:\"pa-0 video-container\",style:(_vm.getDisplay('video-container')),attrs:{\"color\":\"transparent\",\"flat\":\"\"}},[_c('video',{ref:\"video\",staticClass:\"video\",attrs:{\"autoplay\":\"\",\"width\":_vm.videoWidth,\"height\":_vm.videoHeight},domProps:{\"srcObject\":_vm.stream,\"muted\":_vm.muted},on:{\"play\":_vm.playInCanvas}})]),(_vm.isUserVideo && !_vm.callAccepted && _vm.isHost && !_vm.callEnded)?_c('v-card',{staticClass:\"d-flex justify-center video-box\",attrs:{\"width\":_vm.videoWidth,\"height\":_vm.videoHeight}}):_vm._e(),_c('canvas',{staticClass:\"video-box\",style:(_vm.getDisplay('video-box')),attrs:{\"id\":\"myCanvas\"}})],1),(_vm.isHost && _vm.callAccepted && _vm.isUserVideo)?_c('v-toolbar',{attrs:{\"color\":\"transparent\",\"flat\":\"\"}},[_c('v-spacer'),(\n        _vm.isHost &&\n        !_vm.isRecording &&\n        _vm.callAccepted &&\n        !_vm.callEnded &&\n        _vm.isUserVideo &&\n        !_vm.isPause &&\n        !_vm.recordedData.length\n      )?_c('v-btn',{staticClass:\"ma-2\",attrs:{\"text\":\"\",\"color\":\"primary\"},on:{\"click\":_vm.recordVideo}},[_c('v-icon',[_vm._v(\"mdi-record-rec\")]),_vm._v(\"Record Video \")],1):_vm._e(),((_vm.isRecording || _vm.isPause) && _vm.isUserVideo)?_c('v-btn',{staticClass:\"ma-2\",attrs:{\"color\":_vm.isPause ? 'success' : 'warning',\"text\":\"\"},on:{\"click\":_vm.pauseRecording}},[_c('v-icon',[_vm._v(_vm._s(!_vm.isPause ? \"mdi-pause\" : \"mdi-play\"))]),_vm._v(_vm._s(!_vm.isPause ? \"Pause Recording\" : \"Resume Recording\")+\" \")],1):_vm._e(),(_vm.isRecording && _vm.isUserVideo)?_c('v-btn',{staticClass:\"ma-2\",attrs:{\"color\":\"error\",\"text\":\"\"},on:{\"click\":_vm.stopRecording}},[_c('v-icon',[_vm._v(\"mdi-stop-circle\")]),_vm._v(\"Stop Recording \")],1):_vm._e(),(_vm.callAccepted && !_vm.callEnded)?_c('v-btn',{attrs:{\"color\":_vm.muted ? 'warning' : 'info',\"text\":\"\"},on:{\"click\":function($event){_vm.muted = !_vm.muted}}},[(_vm.muted)?_c('v-icon',{staticClass:\"ml-2 mr-2\"},[_vm._v(\"mdi-microphone\")]):_vm._e(),_vm._v(\" \"+_vm._s(_vm.muted ? \"Unmute\" : \"\")+\" \"),(!_vm.muted)?_c('v-icon',[_vm._v(\"mdi-microphone-off\")]):_vm._e()],1):_vm._e(),(!_vm.isRecording && _vm.isUserVideo && _vm.recordedData.length && !_vm.downloaded)?_c('br'):_vm._e()],1):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <!-- l:{{ recordedData.length }} -->\n    <v-card color=\"transparent\" class=\"d-flex justify-center top-container\" flat>\n      <v-card\n        color=\"transparent\"\n        :style=\"getDisplay('video-container')\"\n        class=\"pa-0 video-container\"\n        flat\n      >\n        <video\n          class=\"video\"\n          ref=\"video\"\n          :srcObject.prop=\"stream\"\n          :muted=\"muted\"\n          autoplay\n          @play=\"playInCanvas\"\n          :width=\"videoWidth\"\n          :height=\"videoHeight\"\n        />\n      </v-card>\n\n      <v-card\n        class=\"d-flex justify-center video-box\"\n        :width=\"videoWidth\"\n        :height=\"videoHeight\"\n        v-if=\"isUserVideo && !callAccepted && isHost && !callEnded\"\n      >\n      </v-card>\n\n      <canvas id=\"myCanvas\" :style=\"getDisplay('video-box')\" class=\"video-box\"></canvas>\n    </v-card>\n    <v-toolbar color=\"transparent\" flat v-if=\"isHost && callAccepted && isUserVideo\">\n      <v-spacer></v-spacer>\n      <v-btn\n        v-if=\"\n          isHost &&\n          !isRecording &&\n          callAccepted &&\n          !callEnded &&\n          isUserVideo &&\n          !isPause &&\n          !recordedData.length\n        \"\n        text\n        color=\"primary\"\n        class=\"ma-2\"\n        @click=\"recordVideo\"\n      >\n        <v-icon>mdi-record-rec</v-icon>Record Video\n      </v-btn>\n      <!--  -->\n      <v-btn\n        v-if=\"(isRecording || isPause) && isUserVideo\"\n        :color=\"isPause ? 'success' : 'warning'\"\n        class=\"ma-2\"\n        text\n        @click=\"pauseRecording\"\n      >\n        <v-icon>{{ !isPause ? \"mdi-pause\" : \"mdi-play\" }}</v-icon\n        >{{ !isPause ? \"Pause Recording\" : \"Resume Recording\" }}\n      </v-btn>\n      <v-btn\n        v-if=\"isRecording && isUserVideo\"\n        color=\"error\"\n        class=\"ma-2\"\n        text\n        @click=\"stopRecording\"\n      >\n        <v-icon>mdi-stop-circle</v-icon>Stop Recording\n      </v-btn>\n      <!-- <v-btn text v-if=\"callAccepted\" @click=\"muted = !muted\">\n        <v-icon v-if=\"muted\">mdi-microphone</v-icon>\n        <v-icon v-else>mdi-microphone-off</v-icon>\n      </v-btn> -->\n      <v-btn\n        v-if=\"callAccepted && !callEnded\"\n        :color=\"muted ? 'warning' : 'info'\"\n        text\n        @click=\"muted = !muted\"\n      >\n        <!-- {{ muted ? \"Microphone is muted\" : \"\" }} -->\n        <v-icon class=\"ml-2 mr-2\" v-if=\"muted\">mdi-microphone</v-icon>\n        {{ muted ? \"Unmute\" : \"\" }}\n        <v-icon v-if=\"!muted\">mdi-microphone-off</v-icon>\n      </v-btn>\n      <br v-if=\"!isRecording && isUserVideo && recordedData.length && !downloaded\" />\n      <!-- <v-btn\n        v-if=\"!isRecording && isUserVideo && recordedData.length && !downloaded\"\n        text\n        class=\"ma-2\"\n        @click=\"downloadVideo\"\n        color=\"success\"\n        :loading=\"loading\"\n      >\n        <v-icon>mdi-upload</v-icon>Upload Video\n      </v-btn> -->\n    </v-toolbar>\n  </div>\n</template>\n\n<script>\nimport axios from \"axios\";\nimport * as fun from \"../plugins/common\";\nexport default {\n  name: \"VideoFrame\",\n  components: {},\n  props: {\n    stream: MediaStream,\n    callAccepted: Boolean,\n    callEnded: Boolean,\n    isHost: Boolean,\n    isUserVideo: Boolean,\n    callerId: String,\n    customerName: String,\n    customerEmail: String,\n    caller: String,\n    uploadVideo: Function,\n    comp: Boolean,\n  },\n  data() {\n    return {\n      timeMargin: 20,\n      recordingStream: null,\n      recorder: null,\n      recordedData: [],\n      isRecording: false,\n      videoHeight: 480,\n      videoWidth: 640,\n      downloaded: false,\n      interval: 60000,\n      ratio: 0.75,\n      loading: false,\n      videoId: \"\",\n      totalChunk: 0,\n      index: 0,\n      isPause: false,\n      muted: true,\n    };\n  },\n  mounted() {\n    if (!this.comp) {\n      window.onresize = this.setVideoSize;\n      this.setVideoSize();\n      this.setCanvasSize();\n    }\n\n    console.log(\"video mounted\");\n  },\n  beforeDestroy() {},\n  methods: {\n    getDisplay(c) {\n      if (this.isHost) {\n        if (c == \"video-container\" && !this.isUserVideo) {\n          return \"display:none\";\n        }\n      } else {\n        if (this.isUserVideo) {\n          if (c == \"video-container\" && this.callEnded) {\n            return \"display:none\";\n          }\n          if (c == \"video-box\") {\n            return \"display:block\";\n          }\n        } else {\n          if (c == \"video-box\") {\n            return \"display:none\";\n          }\n          if (c == \"video-container\") {\n            return \"display:block\";\n          }\n        }\n      }\n    },\n    setVideoSize() {\n      if (!this.comp) {\n        if (this.$vuetify.breakpoint.lgAndUp) {\n          this.videoWidth = 640;\n        } else {\n          this.ratio = 0.8;\n          this.videoWidth = screen.width - 20;\n          this.videoHeight = screen.width * this.ratio;\n        }\n      }\n    },\n    setCanvasSize(v) {\n      var canvas = document.getElementById(\"myCanvas\");\n      if (!v) {\n        canvas.width = this.videoWidth;\n        canvas.height = this.videoHeight;\n      } else {\n        canvas.width = v.width;\n        canvas.height = v.width * this.ratio;\n      }\n    },\n\n    uploadChunk(chunk) {\n      if (this.isRecording) {\n        this.index += 1;\n        const formData = new FormData();\n        formData.append(\"chunk\", chunk);\n        formData.append(\"index\", this.index);\n        formData.append(\"videoId\", this.videoId);\n\n        axios\n          .post(this.serverURL + \"/upload_chunk\", formData, {\n            withCredentials: true,\n          })\n          .then((response) => {\n            // console.log(response);\n            this.totalChunk += 1;\n          })\n\n          .catch((reason) => {\n            console.log(reason);\n          });\n      }\n    },\n    recordChunk() {\n      var that = this;\n\n      this.recorder.stop();\n      var recordedBlob = null;\n      // var canvas = document.getElementById(\"myCanvas\");\n      // this.recordingStream = canvas.captureStream(30);\n      // var recorder = new MediaRecorder(this.recordingStream);\n      this.recordedData = [];\n      this.recorder.ondataavailable = (event) => {\n        that.recordedData.push(event.data);\n        recordedBlob = new Blob(that.recordedData, { type: \"video/webm\" });\n        this.uploadChunk(recordedBlob);\n        this.recorder.start();\n\n        // localStorage.setItem(\"recordedData\", that.recordedData);\n      };\n      // let recordedBlob = new Blob(this.recordedData, { type: \"video/webm\" });\n      // this.recordedData = [];\n      // recorder.ondataavailable = (event) => {\n      //   // that.recordedData.push(event.data);\n      //   recordedBlob = new Blob(event.data, { type: \"video/webm\" });\n      //   this.uploadChunk(recordedBlob);\n      //   // localStorage.setItem(\"recordedData\", that.recordedData);\n      // };\n\n      // recorder.start();\n    },\n\n    playInCanvas(e) {\n      var video = e.target;\n      var that = this;\n      var canvas = document.getElementById(\"myCanvas\");\n      // this.recordingStream = canvas.captureStream(30);\n      this.setCanvasSize(video);\n      canvas.style.left = screen.width / 2 - canvas.width / 2 + \"px\";\n      var ctx = canvas.getContext(\"2d\");\n      this.recordingStream = canvas.captureStream(30);\n      this.recorder = new MediaRecorder(this.recordingStream);\n      // var index = 0;\n\n      // var mediaRecorder = new MediaRecorder(this.recordingStream, {\n      //   mimeType: \"video/webm; codecs=vp9\", // Specify video format; adjust as needed\n      // });\n\n      // // When data is available, upload it\n      // //\n      // mediaRecorder.ondataavailable = (event) => {\n      //   if (event.data && event.data.size > 0) {\n      //     this.uploadChunk(event.data); // Implement this method to upload the chunk\n      //   }\n      // };\n\n      // // Start recording. Here, we set timeslice to 1000 (1 second) to get data every second\n      // mediaRecorder.start(1000);\n\n      var txt, txtSize, txtPos;\n      var getText = function () {\n        ctx.font = that.timeMargin + \"px Arial\";\n        ctx.strokeStyle = \"#fff\";\n        txt = fun.showTime();\n        txtSize = ctx.measureText(txt);\n        txtPos = {\n          y: that.timeMargin + 10,\n          x: 10,\n        };\n      };\n\n      (function loop() {\n        if (!video.paused && !video.ended) {\n          that.videoHeight = video.width * that.ratio;\n          ctx.clearRect(0, 0, video.width, that.videoHeight);\n          ctx = canvas.getContext(\"2d\");\n          ctx.drawImage(video, 0, 0, video.width, that.videoHeight);\n          getText();\n          ctx.strokeText(txt, txtPos.x, txtPos.y);\n          setTimeout(loop, 1000 / 30); // drawing at 30fps\n        }\n      })();\n    },\n    addTimeStamp() {\n      var that = this;\n      var canvas = document.getElementById(\"myCanvas\");\n      var ctx = canvas.getContext(\"2d\");\n\n      var txt, txtSize, txtPos;\n      var getText = function () {\n        ctx.font = that.timeMargin + \"px Arial\";\n        txt = fun.showTime();\n        txtSize = ctx.measureText(txt);\n        txtPos = {\n          y: that.timeMargin,\n          x: 10,\n        };\n      };\n      setInterval(() => {\n        getText();\n        ctx.clearRect(txtPos.x, 0, canvas.width, this.timeMargin + 10);\n        getText();\n        ctx.strokeText(txt, txtPos.x, txtPos.y);\n      }, 1000);\n    },\n    recordVideo() {\n      this.videoId = fun.guid();\n      this.isRecording = true;\n      // setTimeout(this.recordChunk(), 10000);\n      this.recorder.start();\n      setInterval(this.recordChunk, this.interval);\n    },\n    // recordVideo() {\n    //   var that = this;\n    //   this.recorder = new MediaRecorder(this.recordingStream);\n    //   this.recordedData = [];\n    //   this.recorder.ondataavailable = (event) => {\n    //     that.recordedData.push(event.data);\n    //     // localStorage.setItem(\"recordedData\", that.recordedData);\n    //   };\n    //   this.recorder.start();\n    //   this.isRecording = true;\n    // },\n\n    stopRecording() {\n      // this.recorder.stop();\n      this.isRecording = false;\n      this.finalizeUpload();\n    },\n\n    pauseRecording() {\n      this.isRecording = !this.isRecording;\n      this.isPause = !this.isPause;\n    },\n\n    finalizeUpload() {\n      var d = new Date().toString().replaceAll(\" \", \"_\");\n      var fileName = \"inventory_video_\" + d + \".webm\";\n      if (this.comp) {\n        var data = new FormData();\n\n        data.append(\"fileName\", fileName);\n        data.append(\"videoId\", this.videoId);\n        data.append(\"totalChunk\", this.totalChunk);\n        this.loading = true;\n        this.uploadVideo(data);\n        this.downloaded = true;\n        this.loading = false;\n      }\n    },\n  },\n};\n</script>\n\n<style lang=\"css\" scoped>\n/* .video {\n  width: 100%;\n  height: 100%;\n} */\n.video-box {\n  position: absolute;\n  top: 8px;\n\n  /* border: 1px solid black; */\n}\n\n/* .video-container {\n  visibility: hidden;\n\n} */\n#recordingVideo {\n  visibility: hidden;\n  display: none;\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoFrame.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoFrame.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VideoFrame.vue?vue&type=template&id=05c57b4e&scoped=true&\"\nimport script from \"./VideoFrame.vue?vue&type=script&lang=js&\"\nexport * from \"./VideoFrame.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VideoFrame.vue?vue&type=style&index=0&id=05c57b4e&lang=css&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"05c57b4e\",\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VCard } from 'vuetify/lib/components/VCard';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VSpacer } from 'vuetify/lib/components/VGrid';\nimport { VToolbar } from 'vuetify/lib/components/VToolbar';\ninstallComponents(component, {VBtn,VCard,VIcon,VSpacer,VToolbar})\n","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoFrame.vue?vue&type=style&index=0&id=05c57b4e&lang=css&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoFrame.vue?vue&type=style&index=0&id=05c57b4e&lang=css&scoped=true&\""],"sourceRoot":""}