如何使用 react-native-video 获取视频流?

Posted

技术标签:

【中文标题】如何使用 react-native-video 获取视频流?【英文标题】:How to get video streaming with react-native-video? 【发布时间】:2021-08-05 13:22:03 【问题描述】:

我在 nodejs 上有以下代码的后端,其中我使用基于范围的视频流:

router.get('/video/:id', authenticateToken, (req, res) => 
  const range = req.headers.range;
  if (!range) 
    res.status(400).send("Requires Range header");
  

  // get video stats (about 61MB)
  const videoPath = `uploads/$req.params.id`;
  const videoSize = fs.statSync(videoPath).size;

  // Parse Range
  // Example: "bytes=32324-"
  const CHUNK_SIZE = 10 ** 6; // 1MB
  const start = Number(range.replace(/\D/g, ""));
  const end = Math.min(start + CHUNK_SIZE, videoSize - 1);

  // Create headers
  const contentLength = end - start + 1;
  const headers = 
    "Content-Range": `bytes $start-$end/$videoSize`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
  ;

  // HTTP Status 206 for Partial Content
  res.writeHead(206, headers);

  // create video read stream for this particular chunk
  const videoStream = fs.createReadStream(videoPath,  start, end );

  // Stream the video chunk to the client
  videoStream.pipe(res);
);

但是 react-native-video 不发送任何范围标头,当我尝试从服务器获取 mp4 视频时出现错误:

"error": "extra": -2147483648, "what": 1

使用 react-native-video 包:

<Video
  source=
    uri: `http://*server ip*/video/$exercise.content`,
    type: 'mp4',
  
/>

我应该改用什么?

【问题讨论】:

你在服务器端使用express或类似的东西吗? @SilvanBregy 是的,我使用 express js,正如您在代码和问题标签中看到的那样 啊,好吧,没看到.. :) 而不是自己做,尝试使用 express.static 静态地提供文件。当您的 【参考方案1】:

express static 解决了我的问题。感谢@SilvanBregy

app.use('/video', express.static('uploads'))

【讨论】:

什么是快递?我有同样的问题,但我不明白解决方案。 @bdroid Express 是我使用的 NodeJS Web 框架。 github.com/expressjs/express

以上是关于如何使用 react-native-video 获取视频流?的主要内容,如果未能解决你的问题,请参考以下文章

React-Native-Video 如何在视频未全屏或不在屏幕时暂停视频

在 react-native-video 中,视频播放完毕后如何重置视频播放器?

如何在 Windows 应用程序上安装 react-native-video?

在 react-native-video 中如何禁用搜索功能?

当我单击 react-native-video 播放器中的硬件后退按钮时如何锁定 LandScape 模式?

在 react-native-tvos@^0.63.4-0 上使用 react-native-video 时遇到问题