2

I'd like to upload data chunk to server while recording a video(not after recording). I tried to go with react-native-camera or react-native-vision-camera.

but as far as I know, recordAsync method only resolves the final version of recorded video.

Is there any smart way to get video chunk or stream during recording.

or should I use react-native-fs or rn-fetch-blob or something like that?

== update ==

I could probably achieve it like it gets done in the link below.

https://medium.com/react-native-training/build-youtube-alike-livestreams-with-react-native-8dde24adf543

Otani Shuzo
  • 1,118
  • 1
  • 11
  • 22

1 Answers1

0

If your problem is with regards to uploading a large file to the server, maybe you can go with react-native-background-upload, and show a progress notification, this will upload the file even when the app is in background.

There is also a package where in chunck upload is possible by breaking the file into multiple chunks : react-native-chunk-upload

import ChunkUpload from 'react-native-chunk-upload';

const chunk = new ChunkUpload({
    path: response.path, // Path to the file
    size: 10095, // Chunk size (must be multiples of 3)
    fileName: response.fileName, // Original file name
    fileSize: response.size, // Original file size

    // Errors
    onFetchBlobError: (e) => console.log(e),
    onWriteFileError: (e) => console.log(e),
});

chunk.digIn(this.upload.bind(this));

upload(file, next, retry, unlink) {
    const body = new FormData();

    body.append('video', file.blob); // param name

    axios.post('url', body, {
        headers: {
            "Content-Type": "multipart/form-data",
            "Accept": 'application/json',


            // Customize the headers
            "x-chunk-number": file.headers["x-chunk-number"],
            "x-chunk-total-number": file.headers["x-chunk-total-number"],
            "x-chunk-size": file.headers["x-chunk-size"],
            "x-file-name": file.headers["x-file-name"],
            "x-file-size": file.headers["x-file-size"],
            "x-file-identity": file.headers["x-file-identity"]
        }
    }).then((res) => {
        ...
      })
Akshay Shenoy
  • 1,194
  • 8
  • 10
  • Thanks! My question is Can I get a chunk of video data while keeping video-recording taking place? not chunking data after recording a video, but getting it in the middle of recording? – Otani Shuzo Jan 12 '22 at 05:37
  • Any reason why you want to achieve it during recording? – Akshay Shenoy Jan 12 '22 at 05:47
  • I'm making a video recording app for cars(dash cam). What I wanna avoid is the app records video all-or-nothing way. so I wanna upload, long video(let's say 1 hour) by splitting it into small chunks like 10 mins during recording, so recording data can be persisted and restored from the cloud later even if the app crashes and loses some data. – Otani Shuzo Jan 12 '22 at 23:21
  • What I wanna do is basically something like this! https://medium.com/react-native-training/build-youtube-alike-livestreams-with-react-native-8dde24adf543 read a stream of video and upload it to some cloud server when it reaches every 20MB. – Otani Shuzo Jan 12 '22 at 23:49
  • Not sure if there is any react-native library(none that I can see), but you can achieve it if you have native android/ios knowledge. You can use something like **FFMPEG**, which is a huge sdk, but you can use only that module which you want. It has functionality of uploading video while recording it. – Akshay Shenoy Jan 13 '22 at 03:30
  • Also, you can checkout https://mux.com/blog/live-streaming-with-react-native/, since what you want is nearly a streaming concept, maybe this can help. – Akshay Shenoy Jan 13 '22 at 03:37