Course Player(Socket)
WebSocket, Socket.IO, Node.js, and jQuery

A realtime online course player, built with Socket.IO, HTML5 Canvas and Node.js.

1. Course Player

A course player consists of three components: video, screenshot and whiteboard. Check the posting Introduction of Course Player to learn the details.

  • Video is captured by a camera during the lecturing time. It is in mp4 format.
  • Screenshot is captured from computer monitor shared by teachers. It contains handouts and materials for the course. Screenshot are actually images.
  • Whiteboard is captured from special pens and brushes. Any operation on the board, such as writing, drawing or brushing is recorded.

2. Demo

Two available demos:

Note: The demo websites may be slow when you access them for the first time. Be patient!

3. UI

For a real course player, video is played separately. The content of the screenshot and whiteboard is synchronized with the playing process of the video. In this app, a slider bar is used to simulate the video player.

On the top of the player, there is the slider bar and a Play button. There are two canvases below the slider bar. The left one is for screenshot and the right one is for whiteboard. image Click the Play button, the slider bar begins to move and the current time will increment in seconds. Meanwhile, the screenshot and whiteboard canvas show the content simultaneously. image You can drag the slider bar to move forward or backward. image

4. Under the Hood

Read tutorial Building Course Player with Node.js and Socket.IO to learn the details of Socket.IO and how this course player is built.

Besides, read another tutorial Building Realtime Web Application with WebSocket to learn the basic knowledge of WebSocket, which is the technology behind Socket.IO.

5. Source Files