如何使用 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 中如何禁用搜索功能?