I have a purely front-end app (running locally without a proper back-end), and I would like to programmatically generate a downloadable video file (for instance a .mp4). No audio, each frame of the video will be generated from a canvas (or I guess an OffscreenCanvas) using PIXI, and I would like the video to be generated as fast as possible. I’m using Chrome, and I don’t really need to support any other browser.
I've investigated a bit my options and here is what I found:
MediaRecorder, it can directly generate an mp4 file, but the problem is that it only seems to support real-time encoding, which is too slow for me.
VideoEncoder (Chrome only, but that’s not a problem), it can encode frames as fast as the hardware/software permits, but it seems to only create raw video data, which then needs to be containerized in order to make a proper video file.
Assuming the second option is the most promising, I found a few npm packages for manipulating mp4 files:
mp4box, which does not have many downloads (I would prefer not to rely on possibly unmaintained libraries), and there is no clear example of generating an mp4 from scratch anyway, so I’m not sure it supports it.
mux.js, which has more downloads but seems very technical to use, and again I don’t see any simple example of containerizing raw video data.
Is there a way to combine those approaches, or any other way that I have missed?
Related
I have saved an MP4 video in a File type variable, is it possible to change the resolution of the video from the frontend?, without using other sources, just manipulating a single file.
try to use dashjs library but i think it works only with mpd videos.
You can transcode a video file on the frontend, i.e. in the browser, using a ffmpeg Javascript implementation.
The one below is well supported and includes examples of transcoding:
https://github.com/ffmpegwasm/ffmpeg.wasm
This will be slower than doing it server side or than using a program on your computer but it is much faster than this type of task used to be in the browser thanks to leveraging Web Assembly language.
You do need to be aware of the need for SharedArrayBuffer support:
Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list.
The link referred to above is here:
https://caniuse.com/sharedarraybuffer
I wanted to create a simple GUI app which selects one of the MP3 files and plays it. Can't seem to find the best library for doing that with PyQT. Therefore need some recommendation on it. Don't mind switch to JavaFX or something if it has more options.
I know GUI is probably outdated nowadays when everything is web. Would Javascript be a better choice?
try vlc module for python to play all types of audio and videos in case needed later. You should make use of the Qt example seen in examples folder when you unzip the downloaded tar file
I've been searching how to implement a web application which provide the functionality to edit videos. just like the youtube Editor. What are best and free libraries out there for building a web app like this?. A library which support react would be great!.
This might be the one you are looking for html5-videoEditor. This is more of a proof of concept than a fully functional web-application. Right now it allows you to load videos into the browser, they get automatically uploaded via WebsSocket to a node.js application, where those assets get transcoded (H264/WebM/OGG). Then you can create a composition (=new video), copy videos to the stage, trim them, transform them, stack them and then finally encode them on the server-side using AviSynth and ffmpeg Currently each encoding job will produce a H264 encoded video.
I have used html audio tags for playing multiple mp3 file in browser. I want to know if it is possible to record these mp3's into a single mp3 file in javascript(specifically)?. Or even if any module which can help me record these playing mp3's.
Generally, no.
It is possible to work with audio in JS but probably not in the way you want. See this question for more info.
I don't know what exactly you're trying to do but it seems like you would need to do it server-side, and even that would take effort to achieve (Since you would need to find a library that could merge multiple MP3s into a single file and then serve that as a download to the user. This would also require you to know how to install such software and make it available to your server-side code).
Objective
I am creating a web application and have been looking for an async file upload solution other than iframe and form support.
Browser Support
I am fully willing to exclude everything but IE9+. IE tends to be the browser I have the most trouble with.
Goal
I have a table and I want to be able to click on a link, show a file dialog and then upload the file immediately after selection. No page refresh.
More specifically I am trying to figure out how Trello does their file uploads. After looking through the javascript, I found that they bind the the file input to an on change listener, but after that I can't see what they are doing. Im under the impression that they use websockets with node.js to transfer data, but after doing a little research, most people say that websockets wouldn't be good for that. Trello blocks all versions of IE except 9 and 10 so I looked into HTML5 File upload think that may be a solution. However, after some research IE9 does not support the HTML5 File API.
Question
So finally I am looking for some way to upload files without the iframe and form solution. Can someone list the possible methods I could use?
Sidenote
I am using Rails for backend and Ember.js for front end.
If the browser does not support the File API and XMLHttpRequest level 2, there is no other way to upload files in an async/"ajaxy" manner other than reverting to the hidden iframe method. You could, of course, use Flash or Java, but neither of those (especially Java) seem like a good solution to me.
Regardless of the browser, you will have to include a file input element on the page if you want to provide a file chooser for the user. The onchange listener you speak of is vital to determining when the user has actually selected a file or files. In browsers that support the File API, you can also allow users to drop files they wish to upload onto your page. This behavior alone does not require a file input element.
IE9 and older do not support the File API.
I'm quite familiar with this territory as I maintain a fairly popular javascript-only upload library: Fine Uploader.