Bson – Binary JSON

BSON, short for Bin­ary JSON, is a bin­ary-en­coded seri­al­iz­a­tion of JSON-like doc­u­ments. Like JSON, BSON sup­ports the em­bed­ding of doc­u­ments and ar­rays with­in oth­er doc­u­ments and ar­rays.

BSON is used by MongoDB to represent its document-oriented database structure.

Related Links:

1) BSONhttp://bsonspec.org
2) MongoDBhttp://mongodb.org

Showcase on Real time video sharing built on nowJS

I am learning nowJS, a framework to build real time application built on Node.JS, and had made a simple web application that is able to share screen to the other clients in real time. This apps includes client side and server side is 100% completely written in JavaScript.

I had recorded a video and exported into HTML5 Webkit compatible video clip, and included into web page using HTML5 <video> tags. And then, the screens will be copied into HTML5 <canvas>. After that, the magic comes, the screen in HTML5 <canvas> will be real time broadcasted to the other client browsers (tested on Google Chrome, Apple Safari, and Apple Safari Browser runs on iPhone, or webkit browser). I had applied some algorithms to manipulate the video as well. The canvas also allows simple line drawing. At the end, the results of the canvas will broadcast to the other client browsers in real time.

Attached is the showcase video:

503 Service Unavailable

No server is available to handle this request.

 

Fork me on Github: https://github.com/fyhao/Real-time-video-sharing-built-on-nowJS-and-Node.JS

corMVC jQuery single page framework

CorMVC by Ben Nadel is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running.

Real time apps using nowJS

Real time technology is powerful, syncing states between peers in finger tips.

A JavaScript framework built on Node.JS, which named nowJS, provides a very simple, reliable real time feature that easily sync states between client and server, written entirely in JavaScript.

It’s automatically sync the JavaScript variables and functions between clients and servers. Say call client’s functions from server, or call server’s function from client.

Links:

  1. nowJS Official Page http://nowjs.com
  2. nowJS Source code available on Github https://github.com/Flotype/now
  3. Flotype real time infrastructure http://flotype.com
  4. Real time messaging and synchronization using nowJS and Node.JS http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm
  5. nowJS Best Practices http://nowjs.com/bestpractices
  6. nowJS simplifying development of real time apps http://www.building43.com/videos/2011/08/02/nowjs-simplifying-development-of-real-time-apps/

HTML5 Full Screen API

HTML5 now supports Full Screen API that allows browser to request full screen, and it is useful for video element. It is awkward that HTML5 video does not full screen while Flash video does have previously.

The first full screen API is developed by Apple Webkit implemented in iOS. Now Google Chrome, Firefox, Safari did support full screen API that called using JavaScript. However, they did use their own API methods with less standardization for developer to write cross-platform full screen operation.

Related Links:

Native Fullscreen JavaScript API (plus jQuery plugin)


http://arstechnica.com/business/news/2011/11/html5-games-video-get-boost-from-full-screen-api-in-firefox-nightly.ars
http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/

Pusher showcase showing my location in real time

Just get in touch with Pusher and have a simple apps online, an apps that is able to show my location on Google Map in real time.

Use your HTML5-enabled browser such as Google Chrome, or iPhone device, and pointed to this URL http://fyhao.com/showcase/p/map.html, and then you will see my (fyhao) location on Google Map in real time.

By right, at the first time you visit this web page, you will see a text indicating “Connecting…” at the top left, it will change to “Connected” and disappeared after sometimes, depend on your device and network location. (At the time of writing, I try to use Google Chrome on Mac to access but it is damn slow, however, iPhone is very fast to connect)

After that, you may see “Updated” text fade in and fade out at the top left, indicated that the map had been updated. Now, your job is just waiting the map to be updated without refreshing the browser screen. If nothing happened, meant there is no any new updated information from me.

How it works? I will create another script to get my current location using HTML5 Geolocation API and send the location to Pusher for about 3 seconds interval, and it will immediately update your screen with my latest location. But I will not open my phone’s screen to point to this page for longer time, so you may not see any updated for certain times..

 

Conclusion

Pusher is an amazing tool to easily integrate real time feature in our web apps and mobile apps. Using the Pusher API is very easy, and there are many industry use case, see the Pusher examples here.

HTML5 WebSockets build Real Time Web

HTML5 WebSockets is a solution to drive the real time web. The common use case says a real time stock application, online collaboration (multi-user sketching)

Refer: http://websocket.org/quantum.html for the introduction of WebSockets.

Currently, only Google Chrome the client browser supports HTML5 WebSockets natively. There is also less server support for HTML5 WebSockets, since this specification still new. Jetty WebSocket Server is one of an open source solution built on top of Java EE.