从接口渲染mp4视频遇到的问题， overload reslution failed?

Question

web端项目想通过接口拿到视频文件，但是显示执行到sourceBuffer.appendBuffer的时候报错了，不知道为什么？？？

这是渲染视频的逻辑

onMounted(() => {
  const video = document.querySelector('#homeVideo')

  const mediaSource = new MediaSource()
  video.src = URL.createObjectURL(mediaSource)

  mediaSource.addEventListener('sourceopen', () => {
    const sourceBuffer = mediaSource.addSourceBuffer(
      'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    )

    getBackgroundNormal().then((data) => {
      sourceBuffer.appendBuffer(data)
    })
  })
})

这是前端api接口

const getBackgroundNormal = () => {
  return api({
    method: 'get',
    url: 'backgroundVideoNormal',
    headers: { responseType: 'arraybuffer' }
  })
}

这里是我自己写的node返回视频文件的接口

 router.get('/backgroundVideoNormal', async (ctx) => {
    const video = fs.readFileSync(path.join(__dirname, 'bk.mp4'))
    ctx.type = 'video/mp4'
    ctx.body = video
  })

---

我在前端打印了接受到的data

能拿到视频数据的，就是appendBuffer这里不对

Answer 1

API接口:

const getBackgroundNormal = () => {
  return api({
    method: 'get',
    url: 'backgroundVideoNormal',
    headers: { responseType: 'arraybuffer' }
  }).then(response => response.data)
}

检查MediaSource.readyState属性：

mediaSource.addEventListener('sourceopen', () => {
  if (mediaSource.readyState === 'open') {
    const sourceBuffer = mediaSource.addSourceBuffer(
      'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    )

    getBackgroundNormal().then((data) => {
      sourceBuffer.appendBuffer(data)
    })
  }
})