Javascript Video Blob URL and MPEG-Dash - javascript

I am switching our video player over from normal video sources over to chunked progressive video streaming using mpeg-dash. When using mpeg-dash rather than linking to an actual video source you link to a mpeg-dash manifest file which has all the information about each chunk and allows your player to swap in and out chunks as bandwidth changes. Now all of that seems pretty straight forward, however I am also working on setting up blob urls to obscure our source file location and I am running into issues. How does this work since all the documentation I can find on blob responses are either entirely in JS or return an XMLHttpRequest.
You can see an example here within the dash.js documentation that does exactly what I want http://mediapm.edgesuite.net/dash/public/nightly/samples/dash-if-reference-player/index.html if you inspect the element it has a blob url and loads in chunks but I cannot find any docs on how to do this.
So essentially my question is, how can you get a mpeg-dash manifest file to work in conjunction with the blob url system to obscure source URLs.

I am also working on setting up blob urls to obscure our source file location
I assure you that you're not usefully obscuring anything. The data has to come from somewhere. It's trivial to determine from where no matter how you think you're obscuring it client-side.
Don't bother with this.
How does this work since all the documentation I can find on blob responses are either entirely in JS or return an XMLHttpRequest.
The reason you see blob with web-based DASH players is that they're using MediaSource Extensions (MSE) to get the data in the first place. The video player effectively has a blob source which is managed by the browser. Your JavaScript downloads the chunks and sends them off to the browser to be ran through the codec and output to the video element.
There is a decent MSE example on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

Related

Is there any way to createObjectURL from an AVI video file?

I want to capture some thumbnails from a video file which was loaded from an input file (client side).
Doing so, I have to create an Object URL by createObjectURL, then assign the Base64 value to video.src.
The problem is this didn't work with AVI format (DivX, XviD, MPEG2).
How to make it work with AVI? Or do you know any library which can capture image from a video file client side?
Any help would be appreciated.
A BlobURL is just an URL pointing to some data stored in your browser's memory.
So yes, you can very well create a BlobURL that will point to an avi file, or any kind of file actually.
Your problem here is that your browser doesn't know how to decode this file. Even if it were served from a server, it wouldn't be able to read it and thus to render it so you can grab your thumbnail.
There is no workaround to that, except maybe converting this file to a format your browser does support (e.g mp4.H264+AAC is pretty well supported).
But to do it on client side is not trivial, to my knowledge only ffmpeg-js could maybe allow us to do so, but I've never tried it myself, and I'm not sure how stable the port is, nor what's the current browser support is (for sure, it requires at least WebAssembly).

How to extract buffered data from HTML5 <video> element using blob

It has been a long time for people trying to download videos from those sites not allowing them to do, and now they are using the HTML5 element with blob: URL created from MediaSource. Anyway whatever the source is, the video is buffered
and played in the browser so the data must be somewhere.
There are solutions like https://superuser.com/questions/1033563/how-to-download-video-with-blob-url, which is kind of useful for those sites not strictly protected, not working in the extreme case.
So here let's assume that all scripts are strictly obfuscated with network transmission encrypted, and how should we extract the data buffered to be displayed.
Solutions are not limited, except from reimplementing a browser myself.
Edit
The scenario seem like Youtube a lot, but it is impossible to trace anything through the heavily obfuscated script neither the encrypted network transmission.

HTML5 generating video from images

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 play this stream using HTML5/javascript?

Basically trying to play some live audio streams in an app I'm porting to the browser.
Stream example: http://kzzp-fm.akacast.akamaistream.net/7/877/19757/v1/auth.akacast.akamaistream.net/kzzp-fm/
I have tried HTML5 audio tag and jPlayer with no luck. I know next to nothing about streaming audio, however, when I examine the HTTP response header the specified content type is "audio/aacp" (not sure if that helps).
I'm hoping someone with more knowledge of audio formats could point me in the right direction here.
The problem isn't with AAC+ being playable, the issue is with decoding the streaming ACC wrapper called ADTS. The Audio Data Transport Stream [pdf] or "MP4-contained AAC streamed over HTTP using the SHOUTcast protocol" can be decoded and therefore played by only a couple media players (e.g., foobar2000, Winamp, and VLC).
I had the same issue while trying to work with the SHOUTcast API to get HTML5 Audio playback for all the listed stations. Unfortunately it doesn't look like there's anything that can be done from our perspective, only the browser vendors can decide to add support for ADTS decoding. It is a documented issue in Chrome/WebKit. There are 60+ people (including myself) following the issue, which is marked as "WontFix".

how to detect .flv download URL?

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.

Categories

Resources