Implementing Javascript Video like Youtube Editor - javascript

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.

Related

is it possible to change the resolucion of a video file with javascript from the front end?

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

How to generate a downloadable video file in front-end Javascript?

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?

How to play MP3 in GUI using PyQT

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

HTML5 javascript image recognition on mobile

I am starting a new project where i need to have image recognition in a browser application that runs on desktop browsers, iOS and Android. The images should be scanned by using either the webcam or the device camere. So i assume using HTML5 with javascript is the way to go. The only problem is that i cannot find a decent library for this. I did find libraries that compare images by pixelarrays, and libs that can do face tracking and stuff, but none that suits my needs at first sight.
Anyone know how i can best approach this problem?
Thank you.
You will first need to find a solution on how to import your local pictures into a canvas element on your website. Either you upload them to the server first, or (if you want to use live pictures from webcams), you could use this jQuery plugin: http://www.xarg.org/project/jquery-webcam-plugin/
It uses some Flash, but as far as I know, there's no other way to get webcam pictures into the browser easily.
From canvas element you can read the pictures into pixel arrays and then use existing libraries (maybe transcode them into javascript) to do whatever you like.
There is another more recent (without JQuery) Library available to stream webcam content into canvas.
http://cbrandolino.github.io/camvas/
In HTML5 you can definitely do it through JavaScript with a bit of browser detection, here are some useful links:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
This little javascript project used google images to recognize the content of the image:
https://github.com/xc0d3rz/npm-imagerecognition
Probably could be helpful to solve part of your problem.

Component to upload multiple images with client side crop

I'm looking a quick way to add an (multi) image unloader with client side crop to an ASP.NET MVC site and for some reason the search seems to be much more complicated than I thought :(
upload image (can be via form post or custom, just has to work with ASP.NET)
custom crop possibility before upload
(preferred) multiple images at once
It doesn't matter if js/jquery, silverlight or flash is used, it just has to work, its an internal application and I can force people to have the necessary plugins installed.
Basically this is exactly what I want:
http://i-load.radactive.com/
But they are out of business and it seems impossible to get a license :(
**UPDATE**
This should be an all in one solution, I currently do not have the time to figure out how to connect multiple components.
I'm willing to purchase a component that does this, but I simply can't find one, which I find rather strange.
An internal application where you are comfortable with ASP.NET then Silverlight would be the good direction to look in.
There is free multiple file uploader which is designed to work with an ASP.NET server end here: http://silverlightuploader.codeplex.com/
There are number of ways to manipulate an image in Silverlight, either natively or with other Silverlight tools such as: http://writeablebitmapex.codeplex.com/
Finally you can re-encode images to common formats such as PNG with: http://imagetools.codeplex.com/
Whether you could actually combine these as is to acheive your goals would be another matter.

Categories