I have an Node.js server for serve audio and video files by stream.
This server accepts ranges (byte serving).
My goal is request an audio or video from the client (browser) and only fetch an small chunk of the file (320kb for example) and before finish of reproduce this chunk, request the next range of the file and repeat the process until the file is totally consumed.
how can achive this? Can i achive this with Audio/Video API html5? how can i define the size of the chunk that i want consume?
You should not have to do anything - all major modern browsers will support range requests automatically if you use the tag, for example, and request the file in 'chunks', and if your server supports range requests as you say.
You can see it in action by using the developer tools in your browser and observing the network tab.
I'm not aware, however, of a way to specify the chunk size yourself - if that is really important to you, you could use the Media Source Extension mechanism which essentially allows you handle the download, and any manipulation you want to do to the streamed file, before you pass it to the browser video player.
One thing to be aware of - for mp4 files, the header need to be at the start of the file to enable you to stream it. By default it is at the end so you need to move it - there are many tools which will allow you do this. See here for example:
http://multimedia.cx/eggs/improving-qt-faststart/
Related
I wanna enable users of my web app to upload videos with a maximum lenght of 10s and cropped/scaled to a certain resolution. There for users should be able to trim there selected video to 10s before uploading it with a simple editor.
Is there any library or examples enabling client side video editting to cut video length as well as croping before uploading it to a server? I found some canvas approaches for filters, single video frames and export to webM videos but nothing bringing it all together. So anyone done that before?
Apreciate any ideas :)
Tipicaly video processing is a server thing because it's easier to find and run complex (often compiled) libraries (like ffmpeg) there than in browser and it may cause less performance problems for end user. Anyway I think there are two options:
1. Process video on server - send file and configuration
The first approach assume that you prepare client side "editor" based on canvas which simulate video editing. After setup of all filters, crops etc. the client might send original video file and video processing configuration which would be used on a server to do the same thing
Depends on which language you prefer on backend side implementation might be different so I don't give you ready snippet of code.
Of course you can switch order of tasks and upload original file at first place then smiulate video processing on client side and after all send mentioned configuration to backend and process video.
2. Process video within WebAssembly
If you really need to keep everything on client side you can try with WebAssembly ports of libraries like https://github.com/ffmpegwasm/ffmpeg.wasm and send already processed video file to server.
I have a program that plays songs from the server. To make it more efficient i split the audio file on server into segments and the send them to the client using Ajax as base64 encoded. The HTML5 native audio player plays the base64 audio segment but when playing the next audio segment, it pauses a little and then plays. The retrieved segments are stored in IndexedDB for quick access but still it causes a pause in the playback. How to make the program more efficient as well as fix the audio pause happening between switching segments.
Is there any other way of appending audio file to a currently playing audio source without any pause using Javascript?
The Media Source Extensions API can do that, but note that you are just reinventing Range requests and caching, which are exactly what browsers already do for fetching media, but they do it better since they don't add the overhead of base64 on it.
So the "other way" is to configure your server to accept Range requests, to serve your file the most basically as possible in a single file, and to let the browser do its job.
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 am trying to stream an mp3 via javascript/html5 or flash on my webserver.
The javascript/html front end calls a script on the server which begins generating an mp3 file.
I want the file to begin playback immediately once enough audio is buffered, and to continue playing.
I am new to streaming and want to know the best method to do this in both apache server and windows iis.
At first I thought I would need to use an actual streaming protocol, such as rtp or rtsp, but it seems like it maybe better using a custom javascript player that takes the mp3 file in via http.
However the concern with http is that the file transfer will stop once the incomplete tail of the mp3 file is hit. Is there a way around this, perhaps altering the config to make the apache/iis server wait until the file is complete before terminating the transfer?
I also looked into m3u files but this seems to require a complete mp3 file, although I'm not clear on it.
Any advice/solutions/examples will be appreciated.
I don't have the exact solution, but you can try this http://learningsfromdotnet.blogspot.com/2011/11/playing-mp3-using-audio-tag-html-5-in.html.
I was trying to stream MP3 file from IIS server, had issue with Chrome because it makes a request with "Range" header. If you can make similar request with "Range" header and from server stream the piece of MP3, it might work.
im just interested how firefox plugins like DownloadHelper, is able to automatically find .flv URL
There are a bunch of possible approaches and DownloadHelper seems to implement a couple of them. If you extract the .xpi file (which is a ZIP file) and look in the components folder, you'll see a bunch of different handlers for getting videos. I haven't looked at it thoroughly but you'll notice that dhYoutubeProbe.js basically extracts the video ID from the DOM and then plugs that into a standard YouTube URL pattern for fetching FLVs.
dhNetworkProbe seems to implement a more sneaky and interesting approach - it monitors the browser cache and/or HTTP requests for transfers of media files to get the underlying file's URL.
You could also look at how Firebug or similar monitor HTTP requests and responses. Playing an FLV via Flash player logs to Firebug like any other (non-streaming) request.