I've recently taken up leaning some more JS and started working on a video player using React.But I am stumped on this issue I am having; I can not import files larger than 2gb and I cannot find any information on streaming the files from local directories, every doc I find either uses smaller than 2gb files, or uses remote files, like a w3.org link.
How should I go about streaming said files. Should I be using HLS, DASH, or something else?
As an example:
import video from './content/filename.mp4';
This will throw the error saying:
RangeError [ERR_FS_FILE_TOO_LARGE]: File size (filesize) is greater
than 2 GB
Making it impossible for me to playback in the default video player or something like video-react or videojs. The one solution I can think up is splitting the files into chunks, but I can't seem to find any reliable ways to do that.
In normal html and js, the same files load normally (I dynamically load the src based on the query parameters) and play in the default video player, so I assume this is a Webpack limit to avoid crashing the browser.
Thanks in advance!
Related
I realise this is almost certainly a very stupid question, but my brain's not working and I really need to know the answer. I have a React/NextJS site on which I would like to show a rather large video file, over 20mb probably, using react-player. The video file will be stored in Next's /public folder, as it should be. Will having such a large file as part of my site slow down its loading time, bundle size, affect Lighthouse scores etc? Or will react-player 'stream' the file after the initial page load?
I have successfully implemented video sharing in my app using react native and firebase, but I want to ensure videos being stored are no more than 1080x1080 (maybe 720 depending how it looks).
Videos are max 8 seconds long, I am trying my best to keep them under 5MB each if possible. I was able to do some compressing on the client side (crop to square/trim), but I am hoping to be able to compress the videos even more without losing that quality via cloud functions (storage trigger).
After doing some looking around, it looks like Moviepy is a good option, but it use's python and I am not sure how I can use this script inside of a cloud function storage trigger.
Here is what that looks like:
//Not sure how this will import
import moviepy.editor as mp
//Can I get the video here from the bucket path in a cloud function?
clip = mp.VideoFileClip("video-stored.mp4")
clip_resized = clip.resize(height=1080) # make the height 1080px ( According to moviePy documenation The width is then computed so that the width/height ratio is conserved.)
//resize video, then we need to store it in the same location (same file path)
clip_resized.write_videofile("video-stored-resized.mp4")
I would love to hear some suggestions regarding video compressing via a cloud function and thoughts on using the above script/module with cloud functions.
At this point, firebase functions does not support languages other than node.js.
Thus, there are 2 solutions.
if you would like to keep using moviepy.
Writing a part to call moviepy-related apis when firebase storage is triggered in node.js and having the python api in any preferred environments. (I guess you should use pubsub provided by gcp to call the python apis)
writing all parts in node.js
There is a great module called fluent-ffmepg in node.js too but I know adding a watermark with the module is not as easy as moviepy is...
By the way, when I tried to combine vids in firebase functions, I was not able to make it maybe because of the limitation of the environment.
So, I personally recommend the very first solution: ofc it depends on your situation such as how big your video files are.
I'm working in an AngularJS app that uses webpack for bundling the resources. Currently we are creating a single app.js file that contains the CSS as well. The size of the app.js is around 6MB. If we break the app.js into multiple chunks does that improve the page performance. My colleagues convinces me if we break the single JS file into 2 or 3 then the page load time will increase twice or thrice. Is that really true? I remember reading some where having a single file is better than multiple. I don't really remember the reasons now. Do I really need to break the app.js file for page performance? or what other options I can apply here?
A single file is better because it requires fewer connections (means less overhead), but this is really negligible when talking about < 5 files. When splitting parts of your file you do gain the ability to cache the files separately, which is often a great win. Therefore I'd recommend splitting the files in logically cachable sections (like vendor code and custom code).
Also note that if the client and server support http/2, the fewer connections reason is also gone since http/2 supports connection re-use.
Note that there is no real difference for the initial load time, since in that case all files will need to be downloaded anyway.
A single file will usually mean better performance. You should also ensure that this file is properly cached (on the browser side) and gzipped when served by your webserver.
I did a practical test in Chrome (Mac 54.0.2840.98 (64-bit)) to prove whether there is really a performance gain in breaking a huge JS file into many. I created a 10MB js file and made three copies of it. Concatenated all the 3 copied and created a 30MB file. I measured the time it took for the single file that is referenced using a normal script tag at the page bottom and it's around 1 minute. Then I referenced the 3 10MB script files one after other and it took nearly 20seconds to load everything. So there is a really a performance gain in breaking a huge JS file into many. But there is a limit in the no. of files the browser can download parallely.
I've got data generated by a desktop application. These data are organized in a 2-levels folders system : each folder is a physical representation of one object, with an image file, a property file and different text files. There is no way I can change this structure.
I'm willing to show these data with a mobile application. I started something with Intel XDK, but I feel more comfortable with java. So I'm building a POC with Codename One. The final goal is to get these data on the mobile device with a DropBox integration. But for now (in dev phase), I'm going to manually download the data in a user folder on the device.
In netbeans, I put a sample of these data in the src/ folder, but when I try to read them, I've got an error telling me that nested directories are not allowed:
ERROR: resources cannont be nested in directories in Codename One! Invalid resource: /00002/page.properties
Any suggestion on how I can move on with the development, using with static folders ?
Resource files must be placed in the root of the src directory to be packaged and can't be deeper. The reasoning is that we don't generate a JAR but rather a native package where hierarchies are pretty different.
If you need this exact structure just extract them into the FileSystemStorage on the first activation then you can use the hierarchy that's available there.
I have successfully ported some Python code to App Engine that uses PIL's ImageFont and ImageDraw to generate a dynamic image. The only remaining problem is that the original code loads a TrueType font using a call like this:
titlefont = ImageFont.truetype("Verdana Bold.ttf", titlefontsize)
I can't just upload the font file and access it directly in GAE (at least I don't think I can?!). I guess it might be possible somehow to dump font data in a datastore blob, load that and feed it into PIL, but this seems less than elegant, and quite wasteful if everybody who uses PIL for image generation does the same thing. Currently I'm stuck with ImageFont.load_default() though, which gives pretty horrendous looking results.
Is there some clever way of working with alternative fonts in GAE PIL? Some additional API I'm missing that will return usable font objects?
Any file in your applications directory will be uploaded along with your application when you deploy it.
So yes, you should be able to "just" access any file you need by keeping it in or under your application directory, moving it there if necessary.
If you want to serve those files, that's something different. https://developers.google.com/appengine/docs/python/gettingstarted/staticfiles
But try including your .ttf file where your app can locate it and it should just work.