前端 - 从接口渲染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  })

---

尝试了下面朋友的方法

export const getBackgroundNormal = () => {  return api({    method: 'get',    url: 'backgroundVideoNormal',    headers: { responseType: 'arraybuffer' }  }).then((res) => res.data)}onMounted(() => {  const video = document.querySelector('#homeVideo')  const mediaSource = new MediaSource()  video.src = URL.createObjectURL(mediaSource)  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)      })    }  })})

还是会报一样的错误

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)    })  }})