3

I am looking into streaming binary data into a browser (through http). I am looking for opinions as to good ways to go about doing this. Ultimately I will have a real time data source and I would like to manipulate this data and display it (in real-ish time) in a browser. Firefox comes first, IE would be nice... but I'm not that picky. I have a firefox plugin that does what I need, but I would prefer something written in javascript/html that would work without the user having to install any plugins.

I've been looking at the multipart/x-mixed-replace MIME/media type and it looks like it might be useful in this project, but I wanted to hear opinions on better ways to do this (if any) before I spend too many hours going down this path.

Flash would probably get the job done, but again, I'd like to avoid plugins. I'd like to have the simplest solution possible (don't we all?), ideally with just javascript/html.

I've also been looking into Comet to see what that can do for me.

Linger
  • 14,942
  • 23
  • 52
  • 79
Jeffrey Martinez
  • 4,384
  • 2
  • 31
  • 36

5 Answers5

4

A lot of this depends on what you want to do with the data. I assume render it.

Flash probably would be the simplest solution. It's a common enough add-on that just about everyone should have it by now; so you're not running much of a risk for incompatibility.

JavaScript just hasn't been considered much of a good platform for binary data handling -- so, there hasn't been too much development in the realm. I don't think you're going to find a lot of help for what you want. Especially when you get the point of rendering -- unless you can maybe convert every binary file to a canvas script, since it's about the only dynamic imaging available in JavaScript.

IE might actually be the exception, since you might be able to use some ActiveX objects to accomplish this for a few file types. But, then you cut out most other browser.

Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
  • Yes, eventually render the data, I've done some testing with the canvas object and it looks decent enough. Thanks for the thoughts. – Jeffrey Martinez Dec 05 '08 at 00:15
2

I've had to do this exact thing before with Video (i.e. motion jpeg) data.

I note that you've just said "binary data"... is this image data or not? what is it?

multipart/x-mixed-replace works fine in alot of browsers these days. I think it might even be supported in the later versions of IE. It certainly works in all versions of firefox from around 5 years ago when I had to implement this. Webkit based browsers are probably supported too including Chrome and safari.

However, in my opinion this is really only suitable for a LAN based application. The reason is that you're sending ALOT of data. Rather than sending the differences between successive frames (if it's video that is) you'll be sending Whole images each time. Depending on the number of users, this could also place a heavy burden on the server for bandwidth.

So while multipart/x-mixed-replace is by far the simplest to implement, it's not necessarily the most appropriate solution. Again it depends on your raw data type.

For video you could in theory write something in javascript to do it. In fact, if you google for javascript video player you can find some. I doubt they are terribly fast and would probably place a heavy burden on the client machine. Still, it does seem doable.

So your options are: 1) Content type mixed-replace 2) Download a plugin Native browser plugin (fastest most efficient) Flash or silverlight based 3) Javascript based player

If it is video you're wanting The last option, which is on the bleeding edge is 4) HTML5 based video. http://www.html5video.org/ As the standards are still being ratified and browser support is limited I wouldn't recommend it at this time.

hookenz
  • 36,432
  • 45
  • 177
  • 286
2

As for data streaming and socket style connections you might want to take a look at the APE (Ajax Push Engine) project. It allows you to set up a HTTP proxy that your JavaScript can connect through for true socket connections.

As for what to do with the data when it arrives, I've done a proof of concept showing how you can work with raw PNG data, parse it and render it to the browser. Check it out.

Sebastian Markbåge
  • 3,275
  • 1
  • 18
  • 9
1

You can use Base64 to convert the binary to text and send that to the browser. With IE you can convert it directly to binary, but I'm not sure if you can do it with Firefox and others. I did see jscripts for Base64 enflate/deflate and a script named base64.js which probably does the conversion as well.

However, you are probably better off converting the binary data into JSON and using AJAX to transfer the data and then processing it as a javascript object in the browser. The web server would be responsible for acquiring the data and converting it to JSON, so you should be able to process the binary regardless of which programming language you are using.

Ryan
  • 7,835
  • 2
  • 29
  • 36
  • If you convert to Base64 then you're increasing the network bandwidth by exactly 1/3. Not good when you could be streaming to multiple clients. – hookenz Feb 14 '11 at 10:27
  • Agreed. Hopefully HTTP compression would help minimize the bandwidth increase, but that adds extra load as well. There weren't many details in the Q, but this was one option for plain HTML (no plug-ins and not considering HTML5 at the time). – Ryan Feb 14 '11 at 19:51
1

I would generally avoid using multipart/x-mixed-replace, as it has pretty sketchy browser support. I know that my cameras' multipart/x-mixed-replace doesn't work on IE or newer versions of Firefox (although apparently there is a configuration thing to change that).

I think that a small Flash app may be one of your best options.

jamuraa
  • 3,419
  • 25
  • 29
  • 2
    I have been able to get a basic example using multipart/x-mixed-replace to work in Firefox 3.0.4 without changing any settings (that I remember). What's the problem you ran into? – Jeffrey Martinez Dec 05 '08 at 00:20