0

`I have an API which send video data in chunks for large files. How can i append those data in a single blob so that i can create a final URL?

I have tried pushing data to blob parts and it is also get appended with correct data size in final blob. But video only play for 7 sec out of 31sec. I think only first chunk is getting appended only.

var MyBlobBuilder = function (this: any) {
    this.parts = []
  }

  MyBlobBuilder.prototype.append = function (part) {
    this.parts.push(part)
    this.blob = undefined
  }

  MyBlobBuilder.prototype.getBlob = function () {
    if (!this.blob) {
      this.blob = new Blob(this.parts, { type: 'video/mp4' })
    }
    return this.blob
  }
  let myBlobBuilder = new MyBlobBuilder()
  function handleResourceClick(resource: string) {
    dispatch(fetchFileType(resource)).then((x: any) => {
      let group = x.payload.data.sizeInKB / 5
      let start = 0
      for (let i = 0; i < 5 && start <= x.payload.data.sizeInKB; i++) {
        dispatch(
          getVideoUrl({ pdfUrl: resource, offset: start, length: group })
        ).then((res: any) => {
          if (isApiSuccess(res)) {
            myBlobBuilder.append(res.payload?.data)
          }
        })
        start = start + group
      }
    })
  }]
VC.One
  • 14,790
  • 4
  • 25
  • 57
Anurag
  • 11
  • 1
  • PS: I added the `video-streaming` tag to get you possible extra help from those specialists. I haven't tested your code but where/when do you call `getBlob` function? I mean, you are actually waiting until download is complete before you use **createObjectURL**, right? – VC.One Jan 20 '23 at 21:59
  • Also not thinking too hard so might be wrong, but isn't `payload.data` an Array anyway? If yes, then isnt the **push** command just adding arrays into another array (creating 2D array), maybe only `parts[0]` is registering as video data. Try using the either **concat** or the **spread** operator. See [example here of joining Arrays together](https://stackoverflow.com/questions/48865710/spread-operator-vs-array-concat). – VC.One Jan 20 '23 at 21:59
  • no its a binary data – Anurag Jan 23 '23 at 07:22
  • OK. Binary data is usually stored in an Array (sometimes called a Buffer or an ArrayBuffer). **(1)** If you are convinced you have all MP4 data in one array, check if `parts[4]` is **102** and `parts[5]` is **116**. If not then you don't have a correctly arranged MP4. **(2)** It's possible you are mixing random MP4 files of different settings as one MP4? Not obvious if your `getVideoUrl()` is getting pieces of one/same file or it just mixes totally different videos (_eg:_ they are not same FPS or picture size or encoder settings) as one blob. – VC.One Jan 24 '23 at 10:43

0 Answers0