Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How do recordings work? #6

Closed
bryankaplan opened this issue Apr 6, 2021 · 9 comments
Closed

How do recordings work? #6

bryankaplan opened this issue Apr 6, 2021 · 9 comments
Labels
question Further information is requested

Comments

@bryankaplan
Copy link

It's nice that there's a record button. It would be nicer if recorded videos could be accessed somehow. And it would be even nicer if information was provided about where such videos are stored, and whether they can be deleted.
@miroslavpejic85
Copy link
Owner

miroslavpejic85 commented Apr 6, 2021 •
edited

Hi bryankaplan, welcome!
The recording actually it's stored to your local browser blob: https://developer.mozilla.org/en-US/docs/Web/API/Blob and is automatically downloaded on end to your pc/mobile. https://github.com/miroslavpejic85/mirotalk/blob/master/www/js/client.js#L1642
Do you say that it is better to store it in the cloud or similar, Right?
Thanks.

@bryankaplan
Copy link
Author

Cool! I just tried it and it worked. But the previous two times I tried it, I was not prompted for a download. I'm not sure whether there was an error.

What happens if the blob exceeds maximum size?

@miroslavpejic85
Copy link
Owner

Thanks :), You can follow Your browser log on console: press F12 then look on console
Regarding Blob, It depends on how much ram memory you have and disk space, for example for chrome:
https://chromium.googlesource.com/chromium/src/+/224e43ce1ca4f6ca6f2cd8d677b8684f4b7c2351/storage/browser/blob/README.md#blob-storage-limits
ref: https://stackoverflow.com/questions/28307789/is-there-any-limitation-on-javascript-max-blob-size

@bryankaplan
Copy link
Author

I know how to look on the console. I was only pointing out that I didn't look on the console previously when I didn't receive a download prompt because I didn't know I was supposed to receive one.

That link does not seem to answer my question. I'm aware that blobs have a maximum size. That's why I'm asking you what happens when a recording exceeds it.

@miroslavpejic85
Copy link
Owner

Hi bryankaplan, Sorry i misunderstood,

It hasn't happened to me yet, but if recording exceeds Blob, probably go on error and the rec will be not saved.
I should try to make a recording on a device with little ram and disk space for a long time...to see what happen,
in order to be able to give you a certain answer, anyway thanks for this question :)

Have a nice day.

@miroslavpejic85
Copy link
Owner

I just did 1 hour of video recording from a old mobile phone, and I was unable to exceed the Blob size :),
But I have noticed that, when a video size is big, the download is not immediate, some time pass before it comes processed and downloaded. Therefore I added a popup messages, when you stop recording: eb45d7c

@rudrathedev
Copy link
Contributor

@bryankaplan so, u typically wanna point out for fast processing of large videos ?

@bryankaplan
Copy link
Author

@bryankaplan so, u typically wanna point out for fast processing of large videos ?

@anshuman2166AppproDev I don't understand what you're trying to ask.

@miroslavpejic85 miroslavpejic85 added the question Further information is requested label May 3, 2021
@miroslavpejic85
Copy link
Owner

miroslavpejic85 commented Jun 4, 2021 •
edited

HI @bryankaplan.

Trying to reach 2GB + of video recording is difficult for me, but I tried to allocate a buffer in the Blob with a size greater than 2GB, and In fact it generates an error as I imagined. So to your question what happens if the Blob size is exceeded, it goes into error and the recording is not saved. Although it is difficult that someone make a recording of that size. 🙂

Here how to reproduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Blob</title>
    <script>
        function testBlob() {
            var byteLength = 2200000000; // 2GB OK | 2,2GB KO
            var buffer = new ArrayBuffer(byteLength);
            var blob = new Blob([buffer]);

            function bytesToSize(bytes) {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            };

            var blobSizeInGB = bytesToSize(blob.size);
            console.log( blobSizeInGB );
        }
    </script>
</head>
<body>
    <button onclick="testBlob()">testBlob</button>
</body>
</html>

Output

blob.html:9 Uncaught RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at testBlob (blob.html:9)
    at HTMLButtonElement.onclick (blob.html:25)

I also added the file size on recording info, and if for some reason the recording failed, I print to user the error.message : 697de25

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@bryankaplan @miroslavpejic85 @rudrathedev