JavaScript - Convert webm to mp4 - javascript

I have looked a bit around, but I couldn't find a proper library and everyone point at a different direction.
So my question is simple; is it possible to convert a media (webm) on a web page to mp4 and immediatly start the download ?
I'm making an extansion for firefox, but I have no idea how to do the conversion part.

I wouldn't recommend handling something as complicated as conversion by yourself, and instead would use something like https://cloudconvert.com/api as a background service, so your plugin will query that API upload/download, and output to the users browser.

Related

Create video stream from html5 <canvas>

I have a audio visualizer written in JS which draws on a <canvas> element.
Is it possible (without screen-capture) to turn that <canvas> into a (realtime) video stream? Perhaps somehow write it to a socket directly.
the JS uses THREE.js for rendering.
Preferrably I'd like to be able to run this on a webserver, it's probably not possible to do this without actually using a browser, but if it is, I'd be very happy to hear about it ;)
Using the info from Blindman67 I've managed to figure out a way of achieving the desired result.
I will end up using PhantomJS and have it write images to a /dev/stdout (or other socket) and use ffmpeg to turn that into a videostream. (sort of as described in this question)
I will also run a test using Whammy but as described in the github that might not produce the desired result; only 1 way to find out.
Edit: I will also try the suggestion from kaiido to use WebRTC

How to take video snapshot with VLC Web Plugin

I currently need to extract snapshot(s) from an IP Camera using RTSP on a web page.
VLC Web Plugin works well with playing stream, but before I get my hands dirty on playing with its Javascript API, can some one tell me whether the API can help me to take the snapshot(s) of the stream, like the way it done with VLC Media Player, cuz it does not present on the above page.
If the answer is 'No', please give me some other way to do this.
Thanks in advance.
Dang Loi.
The VLC plugin only provides metadata properties accessible from JavaScript.
For this reason there is no way to access the bitmap/video itself as plugins runs sand-boxed in the browser. The only way to obtain such data would be if the plugin itself provided a mechanism for it.
The only way to grab a frame is therefor to use a generic screen snagger (such as SnagIt), of course, without the ability to control it from JavaScript.
You could, as an option, look into the HTML5 Video element to see if you can use your video source with that. In that case you could grab frames, draw them to canvas and from there save it as an image.
Another option in case the original stream format isn't supported, is to transcode it on the fly to a format supported by the browser. Here is one such transcoder.

How can I do video capture in the browser?

Ideally what I was initially looking for is an implementation of the HTML5 Media Capture API with a polyfill rolling back to Flash, however, my research has concluded that the API is in its infancy and is yet to be taken up by any of the major vendors, and in addition to that, Flash means for doing what I need seem scarce.
I need to be able to take webcam input from a camera, show a live preview, record, and play back that recording, nothing more, no upload to server necessary, all local.
Are there any decent Flash solutions? Or other means of achieving this?
I have found a lot of references to Red5, to clarify, would that refer to this: http://www.red5-recorder.com? Is this really the tool to use or are there better alternatives?
I ended up using http://nimbb.com for this, the free version has some limitations but gives the basic functionality needed met my criteria for the project.
In addition to my needs it also allows users to upload recordings to the Nimbb website and share over social, which can't hurt!
I too am looking around for the same feature. The best I found was Open-Tok, they do all the work
http://www.tokbox.com/opentok/plugnplay#VideoMessages
My problem is my site is adult in nature, so the people recording the videos would more than likely be naked. This is against the terms of service for Open-Tok I do like their offering.

HTML5 File Upload Progress - Client Side Only

I have noticed that the new XMLHttpRequest object supports an 'onprogress' event in firefox. Is it possible to utilize part of the new HTML5 File api's to get an upload progress bar without any server-side modifications required?
I believe in principle yes, though I haven't tried it out yet.
What's going to be a problem is that XMLHttpRequest#send() takes a Unicode string and encodes it as UTF-8. It doesn't give you the ability to send pure binary, and most binary files like images are not going to happen to be valid UTF-8 sequences.
So probably you'd be using what the FileAPI spec calls a “binary string” (bytes treated as ISO-8859-1, so each charCodeAt corresponds to a byte), recoded to UTF-8. This would end up around 50% bigger than a plain file upload. Is it worth the slower upload to get the progress report?
(God, if only browsers had a better UI to show how the upload was going, none of the endless scripting/Flash/Java/ActiveX nonsense would ever have been necessary. Come on, browser vendors, is a nice big info popup with a progress bar really too much to ask for?)
Yes, in theory, although I would have to question the accuracy since Internet speed generally fluctuates (more-so if you aren't wired). It would probably jump around alot.
Then again, what is an accurate progress bar? I'd like to see one in Windows before I see one online!

Is it possible to optimize/shrink images before uploading?

I am working on a web application that will deal with many image uploads. Its quite likely that the users will be in areas with slow internet connections and I'm hoping to save them upload time by compressing the images before uploading.
I have seen that Aurigma Image Uploader achieves this using a java applet or active x but it's expensive and I'd rather something open source or at least a little cheaper. Ideally I'd like to roll my own if its at all possible.
I'm developing on Ruby on Rails if that makes any difference..
Thanks!
Edit just to clarify: I don't mind if the solution uses activeX or an applet (although js is ideal) - I'm just looking for something a little cheaper than Aurigma at this stage of development.
Also, it may not be feasible for users to shrink the image themselves as in many instances they will uploading directly from an internet cafe or other public internet spot.
Generally, it isn't possible to write an image compressor in JavaScript. Sorry.
You'll need to use a plugin of some sort, and as you mention, other sites use Java.
It appears to be possible to write something to encode a JPEG in ActionScript (i.e. Flash), which will reach a much larger audience than the Java plugin you mention. Here's a link to a blog post talking about PNG & JPEG encoders in ActionScript.
Here's another blog post with a demo of an inlined JPEG encoder in ActionScript.
Only if you use Flash or Silverlight (only way to be cross-platform)
http://www.jeff.wilcox.name/2008/07/fjcore-source/ may be worth a read.
Without using applets or activex (only in windows) you can't execute anything on a client pc.
Probably not, but you can always insist that image uploads over x size will not succeed.
Is this an application where you can force them to insert a smaller image. In that case you could grab the size first to verify it fits standards. This is what facebook used to do with profile pictures. If it was too big they wouldn't take it.

Categories