I am using this library to upload videos from my web app to Vimeo. It is working fine. However, I need some assistance please in relation to the uploading speed. I have run two tests to determine why my implementation of the library is rather quite slow compared to uploading the same video directly onto the Vimeo Platform.
I observed a major thing which had me quite concerned and I just had to reach out for assistance. I observed that, when I opened my Task Manager in windows to observe the network performance, I can see that my upload using the library indicates that my upload speed is averaging/locking around 2Mbps while the upload directly is averaging around 20Mbps hence the upload directly on the Vimeo site is around 10 times faster.
I tried researching about this issue and the closest I got to an explanation is what one writer termed the size of the upload chunk. According to the writer, in their case, this problem was because the upload chunk was around 100Kb and the solution was just to change this size to make it bigger, say to 1Mb and the upload became faster. However, this was a whole different situation uploading to some other place, not Vimeo. Trying to look for the same situation in the library, I have realized that there doesn't seem to be any defined upload chunk size or its somewhere and I can't locate it.
My request is for you to kindly please assist me with tips and hints to make uploads from the library as fast as directly uploading to Vimeo.
Thank you for your assistance in advance.
That websemantics library, at current time, does not provide a version header in its requests. Because no version header is provided, the Vimeo API defaults to the version specified on your app management page. If you have an older application defaulting to <3.4, then that library will work for uploading. If you have a newer application defaulting to >3.4, that library will not work for uploading unless the library is modified to include a version header.
All that being said, the "upload chunk" size you mention only applies to uploads using open source tus. The websemantics library does not use tus, instead it uses an older resumable upload method that has been deprecated by Vimeo.
Vimeo provides a NodeJS library that is in active development and supported by Vimeo. Internally, the library uses the tus upload method, as implemented by Vimeo. The library will send the video file all at once, not in chunks, from the client.
I suggest migrating to the Vimeo Node library first, or another library that supports Vimeo's tus implementation, and once that is up and running, evaluate any upload speed issues you may encounter.
Related
I'm building a web app that uploads a local .mp4 to an S3 bucket. It's intended for low bandwidth environments. Is it possible to upload every 5th frame of an .mp4 in JavaScript on the frontend and upload this reduced .mp4?
I don't know if it's possible (I didn't find anything online) but it's certainly not easy.
It would be easier to maybe have an endpoint in a server that receives a video and returns a minified version. Like this:
Client --can you minify this video?---> Server
Client <--minified video---- Server
Client ---upload minified video---> S3 bucket
No, it’s not possible. Frames are not independent. Uploading a frame, without uploading the frames it references will crate a corrupt video.
You could make use of FFMPEG in your browser in fact. From ffmpeg.wasm:
ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It
enables video & audio record, convert and stream right inside
browsers.
Check out the different parameters in regards to your nth frame rate from the documentation on FFMPEG.org.
PS: It might be better solutions to shrink the upload size, ie. compress harder, resize the video dimensions, or combinations of all these, including lowering the frame rate.
I has being develop video uploading app using react-native.User can record video by in app camera.
Are there any way to reduce file size and/or uploading time also displaying/loading time in react-native or javascript? Are there any help to solve this one in front-end?
Yes, you can optimize file size and also display upload progress. FFmpeg is generally used to manipulate video files. With the help of WebAssembly, you can execute FFMpeg right within the app and manipulate video files. Refer to the GitHub link. [You may have to check if this works with React native]
The idea is to read the blob received from MediaRecorder (available in chrome and firefox, there is also npm package for react native) and pass it to FFMpeg WebAssembly port. Later the optimized bytes can be sliced using Blob and sent to the server (check the slice method in JavaScript Blob).
Recommendation
While you can perform all the above steps right within the client app, it is better to run video optimization utilities in the server rather than within the client app. The right approach to stream the data received from MediaRecorder at regular intervals to the server using either WebSocket or Ajax requests.
i'm wondering, since HTML and with javascript are mesmerizing together, if there is a solution in HTML5 to generate a video-file from many images?
For example, you're able to load a video into a canvas and make it appear as greyscaled video, by manipulating the canvas. However, I would like to know,
if there is somewhat a method to generate a video-file out of that greyscaled version. Would make sense, if you want to send the video via whatsapp etc.
Thank you
Here we go:
Article: http://techslides.com/convert-images-to-video-with-javascript
Demo: http://techslides.com/demos/image-video/create.html (select multiple images at once)
Code: [just view the source]
You can download .webm video file
#K3N answer mentions building an encoder. Luckily there is one - https://github.com/antimatter15/whammy - snippet from the article:
You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder.
There are currently no built-in API to do video encoding in HTML5. There are work in progress though, to allow basic video and audio recording - but it's not available at this time (audio recording is available in FireFox - it is also limited to streams).
If you are OK with gif animation you can encode the frames as a gif using one of the encoders out there (see below).
For video - there has been attempts, more or less successful, (the project I had in mind does not seem to be available anymore) but there has been issues from one browser to another.
There is the option of building an encoder yourself low-level style, following video encoding and file format specifications. It's doable but it's not a small project.
In any case, encoding video is a pretty performance hungry task even for native compiled applications. Running such a task in the browser will be a even more slow process and probably not practical for many users (and mobile devices will suck on those batteries).
The better approach IMO (at the moment at least, until the aforementioned API becomes available), is to send images to server and have a server in the back handling encoding jobs, then send the result to client. This way you can use multi-threading, offload the client, use native compiled encoders such as ffmpeg, and the resulting video can be streamed back.
Some resources
MediaStream Recording API
Gif encoder 1
Gif encoder 2 (NodeJS)
HTML5 Video recording information and status
Realtime video encoder (NodeJS/ffmpeg)
libvpx (requires emscripten/asm.js)
Hi I have built it using the code provided by tech-slides.
Also I made a template application where you can take list of images and turn them into video format. You have to edit the code according to your own needs. It is only supported in chrome and YouTube though. So basically in whammy.js you turn the images into canvas in a JavaScript file then turn the canvas into video using whammy.js function. You need to set event listener and load the videos into video tag. Whammy.js only produce webp file. To turn it into mp4:
Load it in YouTube then download it using YouTube as mp4. Hope it helps.
Just a follow on from #michal's answer, whammy is no longer maintained, however there's a modern fork of whammy encoder at ts-whammy.
See this answer to get a data URL for an image
import tsWhammy from "ts-whammy/src/libs";
// images can from: canvas.toDataURL(type, encoderOptions)
const images = [
"data:image/webp;base64,UklGRkZg....",
"data:image/webp;base64,UklGRkZg....",
];
// Make a 5 second video
const blob = tsWhammy.fromImageArrayWithOptions(images, { duration: 5 });
console.log(blob.type, blob.size);
Is it possible to send a images to the Pebble watch using PebbleKit Javascript sendAppMessage.
My idea is to load an image from the web and send it to the watch and display them there. If an image is not possible directly then I was thinking of drawing the image to a canvas and trying to get bitmap data from the canvas to send to the watch.
Is any of this possible now or am I thinking of things that have not been done yet. If possible how? If not done yet how might you do it?
Looking to brainstorm and share possible code ideas.
I should also mention that I do not want to use an iOS or Android app, only the PebbleKit JS.
There is a complete example of an app that uses JavaScript to download images in the pebble-hacks Github repository. This github projects hosts different non-official yet written by team pebble.
The one you are looking for is pebble-faces. The image download part is built in a separate source file to be easily re-used in your own project.
I also added a PHP port for the Python script here
https://github.com/logbon72/pebblebitmap
It might come in handy if your run PHP applications that need to do conversion on the fly.
We have a large number of people (10k+) who return to my clients' sites on a regular basis to use a web app we built, improve, and host for them. We have been making fairly frequent backward-incompatible updates to the web app's javascript as our app has improved and evolved. During deployments, the javascript is minified and concatenated into one file, loaded in the browser by require.js, and is uploaded to and hosted on Amazon S3. The file name & url currently doesn't change at all during updates. This last week we deployed a major refactor to the web app and got a few (but not a lot) of reports back that the app stopped working for some people, particularly in firefox. It seemed like a caching issue. We were able to see it initially in a few browsers in testing but it seemed to go away after a refresh or two.
It dawned on me that I really don't know what browser-caching ramifications deploying a new version of a javascript file (with the same name) on S3 will have and whether this situation warrants cache-busting or manipulating S3's headers or anything. Can someone help me get a handle on this? Are there actions I should be taking during deployments to ensure that browsers will immediately get the new version of a javascript file? If not, we run the risk of the javascript and the server API being out of sync and failing, which I think happened here.
Not sure if it matters, but the site's server runs Django and the app and DB are deployed to Heroku. Static files are deployed to S3 using S3Boto via Django's collectstatic command.
This depends a lot on the behaviour of S3 and the headers it sends when requesting files on S3. As you experienced, browsers will show different caching behaviour - so the best option is to use unique filenames.
I would suggest to use cachebuster hashes - in this way you can be sure that the new file always gets requested by browsers and you can use long cache-lifetime headers if you host the files on your own server.
You can for example create a MD5 hash of your minified file and append it (like mycss-322242fadcd23.css). Or you could use the revision number of your source control system. You have to use the cache buster in all links to this file, but you can normally easily do this in your templates where you embed your static resources. Depending on your application, you could probably use this Django plugin that should do this work for you.