Sign in to your OlinData support account for customized help. Once you login you will be able to contact our support engineers (for 24/7 support packages), register your issues and view the history of your support cases.
File Uploading and Streaming with BinaryJS
You'd have to rely on either Flash, Java applets or 3rd party plugins that provided similar functionality. Uggh.
In this post, I'll show you how to upload and stream video files - yup, you heard that right :)
Before we can get started writing code to stream binary data, we need to install some modules. We'll only need two:
The defacto Node.js web framework! My framework of choice, and that of many fellow Node developers out there. It's fast, easy-to-use and well-documented.
To familiarize yourself with the
API, if you haven't already done so, check out the official ExpressJS API documentation
is not your cup of tea, you're most welcome to opt it out for something you're more comfortable with.
The heart of our video streaming web app! This module uses WebSockets and the BinaryPack serialization scheme to stream binary content back-and-forth between the server and the client.
First off, I'll outline the workflow for both the server and client portions of the video server we're building.
First off, install the modules in your project directory via npm. I've added the version numbers that were installed for me:
$ npm install express $ npm install binaryjs
Next up, bootstrap your web app using express:
$ node_modules/express/bin/express .
Or if you have express installed globally:
$ express .
Remove the directories we don't need:
$ rm -rf routes/ views/
Replace the generated copy of
Also, don't forget to clear out irrelevant code in
For the finishing touch, I renamed some directories in
. This is a matter of preference and therefore entirely optional.
$ cd public/ $ ls
and start coding! You'll need to create an instance of
, which the
Also, add a reference to the
library for later.
I set my instance to run on port
. If you don't specify a custom port, it'll piggyback on whatever port you've set on
after which you'll need to set a custom endpoint.
Now we set the
handler for the
server. It provides a
object which is of type
event returns both a
object as well as a
object, configurable from the client-side.
Add handlers for the following meta events:
Create a source file for managing the videos, I put mine in
. This file will house the implementations for the following capabilities:
function does the simple task of reading filenames in the
directory and streaming back a list of it to the client.
creates a read stream for the requested video file, and streams it in chunks back to the client.
The file upload implementation in
checks if the file is of a supported video type.
If the type matches, the function proceeds - otherwise, it returns an error.
For the sake of convenience, the function informs the client of the upload status as it writes the video to disk, chunk by chunk.
Add the following HTML to your landing page's
BinaryJS File Upload and Streaming
Insert the following
tags at the end of the
tag in the order specified.
Before anything else can work client-side, make sure to create an instance of
with a port of
- or whichever port you have changed it to - and save this to
file also includes helper functions like
, which is essentially a wrapper to the
takes two arguments: tle file to be streamed over to the video server, and the accompanying meta data - in that order.
, add functions that implement:
method facilitates the uploading of a file - the streaming, and the resulting feedback of the upload as it progresses.
function is nothing more than a wrapper function for the
In order to get downloading to work, the chunks of video data that get streamed in as
objects need to be stitched together in a
object, containing the newly formed
, can then be returned in a callback.
The final file,
ties the presentation layer with application logic.
Once the connection is up, as denoted by the
event, add handling for video listings and Drag n' Drop.
event, we assume that anything that gets streamed back without initiation from the client-side (list, video request, etc) is undoubtedly a video file.
refreshes the file listing visuals everytime a list request is sent.
contains logic for dragging and dropping a file into the "drop" box (saw what I did there?), after which it initiates the upload of said file.
The progress is indicated directly in the text of the "drop" box (there I did it again!) as the file upload progresses.
Alright, we're just about ready to test it out! Make sure to start your server up:
$ node app.js
Access the landing site via your browser
Drag and drop a video file into the gray box
Click a video link and watch it stream
And there you have it - your very own, video server with support for uploading and streaming. Written in Node!
I've tested uploading of video files both small and large - and they work fine.
Of course, since the example uses the html5
tag, supported formats are limited to
Streaming of large video files, however, takes a while and may freeze the page. Proceed with caution - you have been warned!
BinaryJS's client-side component works with the following browsers:
If you're on an older browser, well ...
Why are you using an older browser again?
I've taken the liberty of adding sample video files to the
directory, in case you need some files to play with.
You can check the page I got them from too:
There's more you can do to spruce up this example that is well beyond the scope of this tutorial, such as:
If you do decide to build something along those lines, feel free to share it over here in the comments section, so the rest of us can revel in awe!
Well that's it folks, I hope you enjoyed my very first Node.js tutorial @ OlinData, expect more to come in the near future :)