Chapter 7. Streaming Binary Data

In this chapter, we will cover the following recipes:

• Broadcasting an image to other sockets

• Uploading an image to the filesystem

• Uploading an image to Amazon S3

• Streaming audio

• Streaming live video

Introduction

Socket.IO 1.0 gives us the ability to stream binary data between the server and the client. In this chapter, we will use this ability to transport various forms of binary data, such as images, audio, and video.

Broadcasting an image to other sockets

Typically, the src attribute for an HTML image tag will be a link to the location of the image. However, instead of a link to the image, we can actually provide the binary data for the image itself. This ability allows us to store and load actual images and not just the link to the image location.

We can actually use Socket.IO to send images from a browser to a server and then display them in another browser without ever storing them on a server, in a filesystem, or in a database of any kind. In instances where we don't need the data to be stored, this can be really useful.

In this recipe, we will demonstrate how we can pipe an image from our filesystem to the browser over WebSockets.

Getting ready…

In this recipe, I will use a static image called woodchuck.jpg to pipe into the browser. It is located at the root of the app along with the server.js and index.html files. You should be able to put any image that you want to use in that location as long as...

Uploading an image to the filesystem

With Socket.IO, we can send files to our server over WebSockets instead of using an http POST request. Socket.IO allows us to upload files in real time and display the uploaded images as needed.

In this recipe, we will use Socket.IO to upload a file to our local filesystem and then send a message to the client to display the image when it is done uploading.

Getting ready…

For this recipe, we will use the built-in Node fs module to upload our images.

We will upload files to our filesystem, so make sure that you create a folder called tmp in the root of your project.

How to do it…

To upload an image to the filesystem with Socket.IO, follow these steps:

1. First, we will need to create our server.js file. This file will be responsible for listening for new upload-image messages and uploading the file that is passed with the arguments:

   var express = require('express'),
   app = express(),
   http = require('http'),
   socketIO = require('socket.io'),
   fs = require('fs'),
   path...

Uploading an image to Amazon S3

Uploading images to your server-side filesystem is actually not a great idea. If you are deploying from your repo, you don't want to mix in user-generated media with your code. A much better and more scalable approach is to put your photos and other media in a completely separate static location, such as Amazon S3, where you can access them without letting them interfere with your core application.

In this recipe, we will upload images to Amazon S3 and display them after they are uploaded.

Getting ready…

For this recipe, we will use the Amazon SDK for Node. It can be installed by running npm install aws-sdk –save in your terminal. We will also use lodash (npm install lodash --save) and the q promise library (npm install q --save).

How to do it…

To upload an image to Amazon S3, follow these steps:

1. First, we will create an aws.service.js file. This file will be responsible for interfacing with the Amazon AWS SDK and writing and reading binary data from Amazon. We...

Streaming audio

Streaming images with Socket.IO is great. However, we can use WebSockets in combination with WebRTC to stream audio from one user's microphone to another.

WebRTC (Web Real-Time Communication) is an API that supports browser-to-browser real-time media sharing for applications such as voice calling, video chat, and peer-to-peer file sharing. WebRTC is still a relatively new technology. While WebRTC has support in most browsers, at the time of writing this book, Internet Explorer and Safari do not yet support it.

For two browsers to directly communicate over WebRTC, there is a handshake process that needs to take place. This means that one client makes an offer containing a description of the offer. The second client must then accept the offer and pass a reciprocal description. When the first client receives the answer to their offer, it must set the remote description that is contained in the offer answer. At that point, both clients have agreed to create a WebRTC connection...

Streaming live video

While streaming audio is great, live video is even more gratifying. Using the WebRTC protocol, we can stream video in addition to audio and simply pipe it into an HTML video element instead of an audio element.

In this recipe, we will create a peer-to-peer connection where we can allow two users to chat using live video.

How to do it…

To stream live video with Socket.IO, follow these steps:

1. First, we need to create a server.js file. This file will be responsible for managing sockets as they join or leave. It will also be responsible for allowing the sockets to connect to one another to initiate a WebRTC session:

   var express = require('express'),
   app = express(),
   http = require('http'),
   socketIO = require('socket.io'),
   fs = require('fs'),
   path = require('path'),
   server, io, sockets = [];
   
   app.use(express.static(__dirname));
   
   app.get('/', function (req, res) {
   res.sendFile(__dirname + '/index.html');
   });
   
   server = http.Server(app);
   server.listen(5000);
   
   console.log('Listening...