{"version":3,"sources":["webpack:///./src/components/VideoFrame copy.vue?c15f","webpack:///src/components/VideoFrame copy.vue","webpack:///./src/components/VideoFrame copy.vue?1fb5","webpack:///./src/components/VideoFrame copy.vue","webpack:///./src/components/VideoFrame copy.vue?0b5b"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","style","getDisplay","ref","videoWidth","videoHeight","domProps","stream","isUserVideo","on","playInCanvas","callAccepted","isHost","_v","_e","isRecording","callEnded","recordedData","length","recordVideo","stopRecording","downloaded","loading","downloadVideo","staticRenderFns","name","components","props","MediaStream","Boolean","callerId","String","customerName","customerEmail","caller","uploadVideo","Function","comp","data","timeMargin","recordingStream","recorder","ratio","videoId","totalChunk","index","mounted","window","onresize","setVideoSize","setCanvasSize","console","log","beforeDestroy","methods","c","$vuetify","breakpoint","lgAndUp","screen","width","canvas","document","getElementById","v","height","recordChunk","that","start","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","d","Date","toString","replaceAll","fileName","FormData","append","component","VBtn","VCard","VCardTitle","VIcon","VToolbar"],"mappings":"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","file":"js/chunk-49d48718.9216af75.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 mb-6 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.isUserVideo},on:{\"play\":_vm.playInCanvas}})]),(_vm.isUserVideo && !_vm.callAccepted && _vm.isHost)?_c('v-card',{staticClass:\"d-flex justify-center mb-6 video-box\",attrs:{\"width\":_vm.videoWidth,\"height\":_vm.videoHeight}},[_c('v-card-title',{staticClass:\"text-center\"},[_vm._v(\"Inventory Video Will Appear Here\")])],1):_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\":\"\"}},[(\n        _vm.isHost &&\n          !_vm.isRecording &&\n          _vm.callAccepted &&\n          !_vm.callEnded &&\n          _vm.isUserVideo &&\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.isUserVideo)?_c('v-btn',{staticClass:\"ma-2\",attrs:{\"color\":\"warning\",\"text\":\"\"},on:{\"click\":_vm.stopRecording}},[_c('v-icon',[_vm._v(\"mdi-stop-circle\")]),_vm._v(\"Stop Recording \")],1):_vm._e(),(!_vm.isRecording && _vm.isUserVideo && _vm.recordedData.length && !_vm.downloaded)?_c('br'):_vm._e(),(!_vm.isRecording && _vm.isUserVideo && _vm.recordedData.length && !_vm.downloaded)?_c('v-btn',{staticClass:\"ma-2\",attrs:{\"text\":\"\",\"color\":\"success\",\"loading\":_vm.loading},on:{\"click\":_vm.downloadVideo}},[_c('v-icon',[_vm._v(\"mdi-upload\")]),_vm._v(\"Upload Video \")],1):_vm._e()],1):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <v-card\n      color=\"transparent\"\n      class=\"d-flex justify-center mb-6 top-container\"\n      flat\n    >\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=\"!isUserVideo\"\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 mb-6 video-box\"\n        :width=\"videoWidth\"\n        :height=\"videoHeight\"\n        v-if=\"isUserVideo && !callAccepted && isHost\"\n      >\n        <v-card-title class=\"text-center\"\n          >Inventory Video Will Appear Here</v-card-title\n        >\n      </v-card>\n\n      <canvas\n        id=\"myCanvas\"\n        :style=\"getDisplay('video-box')\"\n        class=\"video-box\"\n      ></canvas>\n    </v-card>\n    <v-toolbar\n      color=\"transparent\"\n      flat\n      v-if=\"isHost && callAccepted && isUserVideo\"\n    >\n      <v-btn\n        v-if=\"\n          isHost &&\n            !isRecording &&\n            callAccepted &&\n            !callEnded &&\n            isUserVideo &&\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      <v-btn\n        v-if=\"isRecording && isUserVideo\"\n        color=\"warning\"\n        class=\"ma-2\"\n        text\n        @click=\"stopRecording\"\n      >\n        <v-icon>mdi-stop-circle</v-icon>Stop Recording\n      </v-btn>\n      <br\n        v-if=\"!isRecording && isUserVideo && recordedData.length && !downloaded\"\n      />\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\n      ratio: 0.75,\n      loading: false,\n      videoId: \"\",\n      totalChunk: 0,\n      index: 0,\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    async 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        try {\n          const response = await axios.post(\n            this.serverURL + \"/upload_chunk\",\n            formData,\n            {\n              headers: {\n                \"Content-Type\": \"multipart/form-data\",\n              },\n            }\n          );\n          console.log(\"Chunk uploaded:\", response.data);\n          this.totalChunk += 1;\n        } catch (error) {\n          console.error(\"Upload error:\", error);\n        }\n      }\n    },\n    recordChunk() {\n      var that = this;\n      this.recorder.start();\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.stop();\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    // },\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    stopRecording() {\n      // this.recorder.stop();\n      this.isRecording = false;\n    },\n    downloadVideo(msg) {\n      // if (this.downloaded || !this.recordedData.length) {\n      //   return;\n      // }\n      // let recordedBlob = new Blob(this.recordedData, { type: \"video/webm\" });\n      // var recordingSrc = URL.createObjectURL(recordedBlob);\n      var d = new Date().toString().replaceAll(\" \", \"_\");\n      var fileName = \"inventory_video_\" + d + \".webm\";\n      if (this.comp) {\n        var data = new FormData();\n        // data.append(\"blob\", recordedBlob, fileName);\n        data.append(\"fileName\", fileName);\n        data.append(\"videoId\", this.videoId);\n\n        data.append(\"totalChunk\", this.totalChunk);\n        this.loading = true;\n        this.uploadVideo(data);\n        this.downloaded = true;\n        this.loading = false;\n        // } else {\n        //   var a = document.createElement(\"a\");\n        //   document.body.appendChild(a);\n        //   a.style = \"display: none\";\n        //   a.href = recordingSrc;\n        //   a.download = fileName;\n        //   a.click();\n        //   window.URL.revokeObjectURL(recordingSrc);\n        //   if (msg) {\n        //     alert(\"Your video will be downloaded\");\n        //   }\n        //   this.downloaded = true;\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 copy.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 copy.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VideoFrame copy.vue?vue&type=template&id=681eeabc&scoped=true&\"\nimport script from \"./VideoFrame copy.vue?vue&type=script&lang=js&\"\nexport * from \"./VideoFrame copy.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VideoFrame copy.vue?vue&type=style&index=0&id=681eeabc&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  \"681eeabc\",\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 { VCardTitle } from 'vuetify/lib/components/VCard';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VToolbar } from 'vuetify/lib/components/VToolbar';\ninstallComponents(component, {VBtn,VCard,VCardTitle,VIcon,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 copy.vue?vue&type=style&index=0&id=681eeabc&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 copy.vue?vue&type=style&index=0&id=681eeabc&lang=css&scoped=true&\""],"sourceRoot":""}