VNC with the Remote Framebuffer Protocol - The Definitive Guide to HTML5 WebSocket - page 120

We will use these canvas functions to update the canvas with framebuffer updates
from the RFB protocol. Conveniently, ImageData is a type that is compatible with
the binary messages sent and received by WebSocket. In fact, in modern browsers,
getImageData() returns a Uint8ClampedArray , one of the TypedArray views that can
wrap array buffers.

■ older browsers with canvas support use an obsolete ImageData type, which is
not a typed array; it must be converted into one.

Note

To render the client framebuffer, RfbClient.js handles two kinds of updates: Raw
and CopyRect . More advanced clients can also handle other pixel encodings.

Raw Pixel Data
The simplest framebuffer update consists of raw pixel data. Raw pixels are indicated with
encoding type zero (0x0) in the RFB protocol. Listing 6-11 shows the pixel data, which
consists simply of red, green, and blue values for every pixel in the updated portion of the
framebuffer.

Listing 6-11. Raw Pixel Data

$prototype.putPixels = function putPixels(array, width, height, xPos, yPos) {
var imageData = this.context.createImageData(width, height);
copyAndTransformImageData(array, imageData);
this.context.putImageData(imageData, xPos, yPos);
}

CopyRect
The second encoding type used in this example is copyRect , which is encoding type
one (0x01) in the RFB protocol. This function is a clever operation that is well suited to
conveying framebuffer updates that mostly consist of the same repeated pixel values.
Just like the raw encoding, copyRect rectangle messages specify position, width,
and height. This information represents the target rectangle in the framebuffer that will
be filled by the update. Instead of also sending the current pixel data for that rectangle,
however, copyRect messages have just two more payload values: the X and Y position of a
source rectangle. The source rectangle has the same width and height as the destination
or target rectangle. Every pixel from the source is copied verbatim into the corresponding
pixel in the destination area.
To implement copyRect , we need both getImageData and putImageData . The
copyRect() function contains the location, width, and height of the source pixels along with
the location of the destination pixels. It operates on the framebuffer canvas in much the same
was as the raw putPixels function does, except it takes its pixel data from the current canvas.
Listing 6-12 shows the copyRect() function with getImageData and putImageData .