Angular+Nodejs+S3应用程序视频在iPhone上不起作用

edqdpe6u  于 2023-01-20  发布在  Node.js
关注(0)|答案(2)|浏览(114)

适用于:Windows PC,Ubuntu PC,Mac OS Chrome
不适用于:iPhone Chrome浏览器、iPhone Safari浏览器、苹果电脑Safari浏览器
视频无法播放,没有错误。图像在所有平台上都能正常工作。
我正在用nodejs和multer将原始视频上传到S3,试图使用ffmpeg将视频编码到,但没有帮助。

public upload(file) {
    const fileStream = fs.createReadStream(file.path)
    let fileKey = `${file.filename}`

    const uploadParams = {
      Bucket: bucketName,
      Body: fileStream,
      Key: fileKey,
    }
    return s3.upload(uploadParams).promise()
}

节点:

public async download(fileKey) {
    const downloadParams = {
      Key: fileKey,
      Bucket: bucketName,
    }
    try {
      const object = await s3.getObject(downloadParams).promise() // This throws error if image not found and catch get it
      return {readStream: s3.getObject(downloadParams).createReadStream(), object}
    } catch (err) {
      throw new NotFoundError()
    }
}

router.get('/file', async (req, res) => {
  const { key } = req.query
  const { readStream, object } = await Container.get(S3Service).download(key)
  if (readStream.httpCode) {
    res.json({ error: 'error' })
    return
  }
  if(key.split('.')[1] === 'mp4') {
    const range = req.headers.range
    const bytes = range.replace(/bytes=/, '').split('-')
    const start = parseInt(bytes[0], 10)
  
    const total = object.ContentLength
    const end = bytes[1] ? parseInt(bytes[1], 10) : total - 1
    const chunksize = end - start + 1
    res.status(206)
    res.set('Content-Type', object.ContentType)
    res.set('Content-Length', chunksize)
    res.set('Content-Disposition', 'inline')
    res.set('Accept-Ranges', 'bytes')
    res.set('Accept-Encoding', 'Identity')
    res.set('Content-Range', 'bytes ' + start + '-' + end + '/' + total)
    res.set('X-Playback-Session-Id', req.header('X-Playback-Session-Id'))
    res.set('Connection', 'keep-alive')
    res.set('Last-Modified', object.LastModified)
    res.set('ETag', object.ETag)
  } else {
    res.type('png')
  }
  readStream.pipe(res)
})

Angular :

<video playsinline muted autoplay controls="true" preload="metadata">
  <source [src]="message.files[0].fileUrl" type="video/mp4" />
  <source [src]="message.files[0].fileUrl" type="video/avi" />
  <source [src]="message.files[0].fileUrl" type="video/ogg" />
  <source [src]="message.files[0].fileUrl" type="video/webm" />
</video>
ar5n3qh5

ar5n3qh51#

开发人员,
似乎浏览器的能力问题。尝试运行在chrome开发工具的网站作为iPhone和尝试做同样的ie
有时候不是所有的浏览器都支持所有的功能,主要是移动的浏览器,我们没有开发选项,看看开发工具出了什么问题
此致,
穆罕默德

szqfcxe2

szqfcxe22#

据我所知,要在苹果设备上处理视频,您的服务器必须支持范围请求才能播放视频。
范围请求:https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests
你可以google更多关于safari的细节和栈溢出的范围请求

相关问题