WardCunningham / Smallest-Federated-Wiki

This wiki innovates by: 1. federated sharing, 2. drag refactoring and 3. data visualization.
http://wardcunningham.github.com/
GNU General Public License v2.0
1.21k stars 177 forks source link

Create a Stage: Develop a SFW Protocol for Streaming Data #281

Open hallahan opened 12 years ago

hallahan commented 12 years ago

We have discussed in the past that this project needs a better way of sending photos to the client than just base 64 encoding the data into the JSON. It turns out that you can now send/receive binary data in via WebSocket.

Imagine getting your initial JSON for a wiki, and in that JSON is a type called "stage". The server could use this to stream text, JSON objects, and also binary data. So, we could make a way where that initial HTTP request just defines a stage and the url for the socket connection. Then, if we have a very large image, the server can just send over a thumbnail to the client initially. Upon click or in the background, the larger file can be sent.

We would want the server to send a data payload as well as JavaScript that executes the presentation of the data on the stage.

Live Data

A very compelling demo that would compliment the work with D3 data visualization would be the server streaming live objects to the client which in turn animates the chart to reflect the new addition to the dataset.

Live Page Updates

The owner of a wiki can edit a page and broadcast the changes in vivo to the clients. A SFW type could also be created that provides a special space where the clients can make changes, such as make a comment.

Dynamic Photo Gallery

The server will send the client a set of images. These would initially be a thumbnail, and the client can specify which resolution and quality of image that the server can send. The client may log all of the images sent, and the presentation on the stage may involve swapping in and out images to create the actual "show".

Uploading Files

We need a way to do a drag and drop upload of files to the server. You could drag a file to the stage, and broadcast the data in the form of a file to the server (and all of the connected clients). This could be archived on the server, or it can just be relayed in "etherial" mode to the connected clients.

Here is a socket io project that pushes up data to the server in base 64: http://liamkaufman.com/blog/2012/02/11/12-pushing-files-to-the-browser-using-deliveryjs-socketio-and-nodejs/

Here is an example of actually sending binary: http://dathor.blogspot.com/2011/12/send-and-receive-blobs-using-fileapi.html

Streaming Video

These days most of the video on the internet uses Adobe Flash, which in turn gets video through RTMP and HTTP requests of FLV or MP4 wrapped H.264 encoded video. Apple uses HLS, HTTP Live Streaming, and Microsoft uses MS HTTP Smooth Streaming. These guys just provide manifests of ts or MP4 files on an HTTP server, and the client player requests the proper stream (a file of a given bitrate and encoding scheme), and the web server can also send segments of a requested file rather than having to send out the entire thing -- thus providing scrubbing.

It turns out Chrome has a native H.264 video decoder, and this is already associated with the

Rather than the client receiving an XML manifest from the server, the server can just start sending video without any request, and the client can send messages about bandwidth, scrubbing back in the video, and status.

https://github.com/mbebenita/Broadway http://arstechnica.com/information-technology/2011/10/native-javascript-h264-decoder-offers-compelling-demo-of-js-performance/

Decoding H.264 or any other codec is outside of the scope. You can just use Chrome's native decoder. The point of using video with WebSockets is to integrate other forms of streaming data with video, and JavaScript can execute in context to video data in a message.

Multiple Streams from Several Servers on a Stage

An interesting experiment would be to have all of the sources that a page is forked from in the journal feed the stage simultaneously. Maybe see what happens when you get live data from several sources?

hallahan commented 12 years ago

A really good looking project using Sinatra, WebSocket for file uploads:

https://github.com/thirtysixthspan/waterunderice