Comments (12)
Thanks for all this info, I'll check as soon as I find the time :)
from webm-muxer.
Now I did it!
Buffers now is a unique Uint8Array and blob's constructor needs to receive an array of other arrays. So I put buffers in one array and it's work! The video is now playable and I can see total duration and playbacks.
Now I will move this logic of create the resultBuffer into webserver and It will create the unique video/webm from the buffers that contain the objects with data and position.
Thank you for your attention!
from webm-muxer.
Perfeito, glad I was able to help! I admit, these operations are a bit more advanced, or better said, require some expertise in buffer processing in JavaScript. But I'm sure you've learned a lot!
from webm-muxer.
Mh, weird. So, first of all, you don't actually need to do any interleaving yourself manually - the library will automatically interleave the chunks for you internally. The README section you referenced simply states that, since interleaving requires holding chunks in memory for a little while, you should try to avoid buffering too much of one medium when muxing very large/long files to keep memory usage low. All of this is of course irrelevant if you're muxing to an ArrayBufferTarget
anyway - it'll be stored in memory anyway. It is relevant if you're writing directly to disk, where you should avoid first muxing 2 gigabytes of video and then 1 gigabyte of audio.
I think something else in your usage of the library must be wrong - could you send me all the relevant code, and maybe a broken output file of you have them?
from webm-muxer.
The code where I'm using webm-muxer: https://github.com/HalexV/semana-javascript-expert08/blob/challenges/initial-template/app/pages/file-upload/src/worker/videoProcessor.js#L1705
If you want, you can run the project by yourself cloning my repo: https://github.com/HalexV/semana-javascript-expert08/tree/challenges
To run:
cd initial-template/app/
npm start
It will open the browser and you can access: http://localhost:3001/pages/file-upload/
This feature I'm working is an upload of mp4 videos to a server. The mp4 video is decoded and demuxed and while processing, the video is plotted in a canvas. The mp4 video is encoding to 144p and muxed to webm format.
The code is working in progress. Right now a video is selected automatically to be processed and after the video is processed, a blob file is generated in webm format and a download is initiated automatically.
I'm using target StreamTarget and I had to copy and paste your lib code into my code because I couldn't use it any other way.
The broken video file that I generated is in broken-video folder.
from webm-muxer.
Alright, I read a bit through your code. It seems like you're doing some Streams stuff - this is totally fine and works with WebM muxer, but you need to have streaming: true
specified in the options to ensure data is written sequentially. Streams operate solely on sequential data, meaning you can't "seek back", which webm-muxer
will do by default without streaming: true
. I see you have commented out streaming: true
in your code - have you tried with it on?
I have inspected your broken file with MKVToolNix, and the file header seems to have been written correctly:
The fact that the rest of the file (all the media chunks) is missing leads me to suspect that the seeking done by .finalize
failed because you're working with sequential streams. You therefore need to enable streaming: true
.
from webm-muxer.
This also makes me realize that "streaming" is kind of a bad name for this parameter - maybe something like "sequential" would be better? Need to see.
from webm-muxer.
Yes, I tried streaming: true
before open this issue and it worked, but when I play the video I can't see the total duration and I can't jump to anytime on the video and I need this features.
The stream stuff is to process the video on demand and send parts of the video to a server. The server will receive these parts and when finish it will join these parts in a one file.
I'm not an expert on this matter, so if I'm doing something conceptually wrong, I'm sorry.
When you will streaming this file on the server to the client of the user, the player on client needs the info about total duration and if it can jump to anytime on the video?
from webm-muxer.
Yes, you lose seeking and other features when streaming: true
is enabled - that's expected, because it writes a simpler version of the file to make sure it does not need to "jump back" to fix old parts of the file. Without streaming: true
, you need to make sure to join the chunks emitted by onData correctly! Simply concatenating the buffers, even sorted by position, will not work. You need to write the buffers in the order in which you receive them, making sure to write each buffer to the correct position. So, you do the following:
- Find the total length
s
of the file, this is basicallyMath.max(...chunks.map(x => x.position + x.data.byteLength))
- Allocate an empty buffer of size
s
, so something likelet buffer = new Uint8Array(s)
- Iterate over all chunks, in the order in which you received them, and copy the data into
buffer
at the correct position.
After this is done, you should have a correct file! I assume that's the only thing you've done wrong, concatening the buffers naively instead of writing each buffer at the correct position.
Does this make sense, or do you need help with anything else?
from webm-muxer.
Yes, It does! Thank you.
But I have some questions:
- How do I copy the data into
buffer
at the correct position? It's justbuffer[chunk.position] = chunk.data
? - The audio chunks and video chunks will have unique positions, so they will be in a possible alternate order, or we can have an audio chunk and a video chunk with the same position in the buffer?
from webm-muxer.
You can copy a buffer into another buffer using TypedArray.prototype.set. Doing buffer[i] =
will set just one piece of data, like one byte.
I'm not sure I understand your question regarding audio and video chunks. webm-muxer
will properly place these chunks automatically to ensure correct playback :)
from webm-muxer.
I tried this but it didn't work:
const fileLength = Math.max(
...this.#buffers.map((x) => x.position + x.data.byteLength)
);
const resultBuffer = new Uint8Array(fileLength);
for (const chunk of this.#buffers) {
// console.log(chunk.data.byteLength, chunk.position);
resultBuffer.set(chunk.data, chunk.position);
}
The resulted blob file size should be 21MB but instead it is 53MB and it doesn't play.
I'm feeling that this resultBuffer.set(chunk.data, chunk.position);
it's not so simple.
from webm-muxer.
Related Issues (20)
- Help getting audio from audio context working HOT 8
- Recording a <canvas> and audio stream HOT 12
- Need help with YouTube Live Ingest using HLS HOT 1
- Support transparency / alpha by encoding stream HOT 8
- Timeline for Firefox VideoEncoder support HOT 4
- Can microphone audio be synthesized when recording screen? HOT 2
- Are there plans to support demux webm file๏ผ HOT 2
- Provide package as ESM module HOT 2
- VideoDecoder? HOT 1
- Using with nodejs fs HOT 12
- How to use with PHP? HOT 10
- Writing to disk via node HOT 3
- is one chunk equals to one segment ? HOT 22
- webmmuxer throws Matroska cluster too big error even with 10 seconds keyframe interval. HOT 8
- Chrome throwing error and failing to export video HOT 2
- Dynamic browser support HOT 6
- StreamTarget onDone not available anymore since v4.0.0 HOT 1
- Stream to web storage HOT 2
- Video is flickering, seems to be related to slow Android device HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webm-muxer.