So I'm trying to write a server to stream video to a client in html5/javascript, and I'd like to use the already existing framework of the video tag in html5 if that's possible. That being said, I can't find I good source for what the format of the stream is. I think it works using progressive downloading (this is how youtube works as well?), but I can't find what the header of any given progressive download packet should look like.
Can someone point me in the direction of some information about the actual format of the video tag stream? I'm also not 100% devoted to the idea of using the video tag, so if someone has a better alternative, that'd also be great!
You just need an HTTP server such as Apache or Nginx to serve the progressive download of MP4 video files.
Related
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);
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".
Is it possible to live stream video (& audio) without using the RTSP protocol? Today I tried out Adobe's Flash Media Server and the free alternative Red5. Both seemed like a bit of an overkill (plus had issues with Red5 not supporting AAC audio).
Basically I'm looking for a way to upload live video to my server so it can be viewed using jwplayer, and then stored so it can be viewed later. Does MP4 support live streaming? So that I can record it client-side then upload it for viewing?
I've been experimenting with uploading jpg images and using a HTML5 canvas to display them so it appears like a video.
Here's my code: (using only a few images)
http://jsfiddle.net/QM5EV/
There's several things wrong with it. For one, it's not efficient because it requires mass amounts of jpg's to be uploaded. And most importantly there's no audio.
What would be best to do? Is RTSP the only sensible choice? Thanks. :)
Live via HTTP servers is, for the most part, not an option. But there is "Apple Live Streaming" aka MPEG-TS, although that limits your clients to iOS devices. It uses a plain ol'web server. (This seems to be changing, increasingly desktop browsers are supporting MPEG-TS, but will probably take some time before it is common place.)
For online streaming, rtsp is the best solution. Other protocols such as RTMP ( http://en.wikipedia.org/wiki/Real_Time_Messaging_Protocol) but transmit to any multimedia content using RTSP.
Another thing is that you can make a specific streaming server accepts HTTP redirect requests. Thus, instead of URL's as rtsp://mydomain.com:554/myfile.mp4 can have URL's like http://mydomain.com/myfile.mp4
Regards!
I am hoping to make an example using the developer build of chrome and being able to use subsonic to stream a binary audio file. So far I have not had any luck though.
Granted my next option will be try to load in the audio files into windowStorage and toss some magic dust on them.
Does anybody know a way to stream a audio file to the audio tag through binary?
So I have some videos in .flv format which I'd like people to be able to view from my site, without being able to download them. So far Flowplayer seems like the best choice for the actual flash player.
However, I've been looking into this video streaming thing, as its supposed to make the videos very fast to view and allows seeking to the middle of the video, etc. What do I need to make it work, do i need to have some special server software for this? And how can I integrate with this software using the javascript/PHP code that i'll use to display the videos?
Thanks.
Good news! You don't need special software, most reasonable web servers can do all of that out of the box. What you're describing, and what Youtube and the rest do, isn't streaming actually. It's called progressive download.
Basically the SWF player (flowplayer in your case) is downloading the FLV video, and playing what it has downloaded so far. To skip to some video that it has already downloaded, it seeks in the downloaded file. To skip beyond what has already been downloaded it discards the downloaded file and starts a new download, but it asks the HTTP server to start giving it the file at a certain offset. Thankfully, most HTTP servers can do this out of the box.
So you just need to put the FLV files somewhere that's publicly available to download via HTTP (just test this with your browser). Assuming you put flowplayer at /flowplayer.swf on your site, and the video is /2girls1cup.flv you would insert this into your page:
<script src="http://static.flowplayer.org/js/flowplayer-3.0.6.min.js"></script>
<!-- Edit this with the width and height to display the video -->
<a
href="/2girls1cup.flv"
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this script block will install Flowplayer inside previous anchor tag -->
<script language="JavaScript">
flowplayer("player", "/flowplayer.swf");
</script>
I took this example from the flowplayer demos page where there's lots more examples of lots of ways to customize flowplayer, the way it behaves and is displayed.
There are two ways in which an actual streaming server is better. One is for doing multicasts of a stream, in which all clients are at the same place in the video, which is easier on the server. The other is being able to deliver a number of different encodings of the same stream, so that, for example, clients can the video at a bitrate that best matches their playback capability.
A lot of companies bet a lot of money that this would be very important for video to take off on the web. It looks like all of them are wrong. Streaming servers are mostly used in the enterprisey world, which might explain their enterprisey prices.