'How to stream partially in react-native-video?

I am using node backend to provide mp4 video to be streamed. this code is returning the video as a chunk.

app.get('/video', (req, res) => {
    i++;
    const range = req.headers.range;
    if (!range) {
        res.status(400).send("Requires Range header");
    }
    else {
        console.log(`Range = ${range}`);
    }

    // get video stats
    const videoSize = fs.statSync(videoPath).size;

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

    // Create headers
    const contentLength = end - start + 1;
    console.log(`video hit (${i}). chunkSize=${CHUNK_SIZE}. start = ${start}. end = ${end}. contentLength = ${contentLength}, videoSize = ${videoSize}`);
    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 });
    // console.log(videoStream);

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

And I use react-native-video for streaming the video.

<Video
source={{
    uri: this.state.source.uri,
    type: 'mp4',
    headers: {
        'range': bytes=0-'
    }
}}

But it stopped after the first chunk is played. How can I load the next chunk? I tried setting the headers range more than 0 to try loading the next chunk like this.

headers: {
    'range': 'bytes=1000-'
}

The backend is called properly, but it give an error on the front-end

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

And actually, I found the code to return video as a chunk while searching how to stream a video. But I don't get what's the point of using the chunk since react-native-video can just stream from direct url. Can anyone explain whether I should just use direct url or keep using the chunk method and looking for the solution?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source