Work with binary data using typed arrays

HTML5 brings new UX APIs to web development, extending new multimedia capabilities and real-time interoperability. Often this functionality is tied to the use of binary file formats like MP3-audio, PNG-images
or MP4 video. The use of binary files is extremely important in this context, as it allows to reduce the requirements for the width of the channel, to achieve the necessary performance and at the same time remain compatible with the existing technologies. Recently, web developers did not have direct access to the contents of these binary files or any other binary file formats.

In this article, we will look at how web developers can remove this barrier using
Typed Arrays API for JavaScript, and using the new API in the Binary File Inspector demo on IE Test Drive .

The typed arrays available in the IE10 Platform Preview 4 allow web applications to work with a wide range of binary files and directly work with the binary content of the files supported by the browser. Typed Arrays support has been added throughout IE10: in JavaScript, in XMLHttpRequest, in the File API and in the Stream API.

Binary File Inspector

The Binary File Inspector example shows some of the new features that work with the combination of these functions. You can view ID3 headers of music files, understand how raw data looks in video files, and also look at files of other formats like PCX images that can be supported.
browser using javascript and canvas.
')


In the example above, .mp4-video is rendered using the <video> element on the left, and the binary content of the file is displayed on the right in hexadecimal (HEX) format and as the corresponding ASCII characters. In this example, you can see several MPEG-specific elements like “ftyp” for “mp4”.

Typed Arrays and ArrayBuffers

Typed arrays provide an opportunity to look at raw binary contents through a particular typed representation. For example, if we want to look at a binary data stream as a byte array, we can use Uint8Array (Uint8 describes an 8-bit unsigned integer, usually called a byte). If we want to read raw data as an array of floating-point numbers, we can use Float32Array (Float32 describes a 32-bit floating-point number in accordance with the IEE754 standard). The following types are supported:

Array type	Item size and description
Int8Array	8-bit signed integer
Uint8Array	8-bit unsigned integer
Int16Array	16-bit signed integer
Wint16array	16-bit unsigned integer
Int32array	32-bit signed integer
Uint32Array	32-bit unsigned integer
Float32rray	32-bit IEEE754 floating point number
Float64arry	64-bit IEEE754 floating point number

Each type of array is a representation for an ArrayBuffer. ArrayBuffer is a link to a binary data stream, but it does not represent any direct way to interact with data. Creating TypedArray views for an ArrayBuffer provides access to read and write binary content.


The example below creates a new ArrayBuffer from scratch and interprets its contents in various ways:

// Create an 8 byte buffer var buffer = new ArrayBuffer(8); // View as an array of Uint8s and put 0x05 in each byte var uint8s = new Uint8Array(buffer); for (var i = 0; i < 8; i++) { uint8s[i] = 5; // fill each byte with 0x05 } // Inspect the resulting array uint8s[0] === 5; // true - each byte has value 5 uint8s.byteLength === 8; // true - there are 8 Uint8s // View the same buffer as an array of Uint32s var uint32s = new Uint32Array(buffer); // The same raw bytes are now interpreted differently uint32s[0] === 84215045 // true - 0x05050505 == 84215045 

Thus, typed arrays can be used for such tasks as creating floating-point values ​​from their by-byte components of building data structures that require specific data composition, based on efficiency and compatibility considerations.

Typed Arrays for reading binary files

An important new script made possible by typed arrays is reading and displaying the contents of binary files that are not directly supported by the browser. Together with the various typed arrays described above, Typed Arrays also provides a special DataView object that can be used to read and write the contents of an ArrayBuffer in an unstructured form. This is well suited for reading new file formats that are usually built on top of mixed data types.

Binary File Inspector uses DataView to read PCX files and render them using a <canvas> element. Below is a simplified version of what is being done in the demo to read the file header, including getting information about the width and height, DPI and color depth (bits-per-pixel).

 var buffer = getPCXFileContents(); var reader = new DataView(buffer); // Read the header of the PCX file var header = {}; // The first section is single bytes header.manufacturer = reader.getUint8(0); header.version = reader.getUint8(1); header.encoding = reader.getUint8(2); header.bitsPerPixel = reader.getUint8(3); // The next section is Int16 values, each in little-endian header.xmin = reader.getInt16(4, true); header.ymin = reader.getInt16(6, true); header.xmax = reader.getInt16(8, true); header.ymax = reader.getInt16(10, true); header.hdpi = reader.getInt16(12, true); header.vdpi = reader.getInt16(14, true); 

A code similar to the one above can be used to add support for rendering in the browser a wide range of new file types, including native image formats, additional video file formats, and data formats specific to a particular area.

Getting binary data through XHR and File API

Before we can use the Typed Arrays API to work with the contents of the files, we need to use the appropriate browser APIs to gain access to the raw data. For access to files from the server, the XMLHttpRequest API has been expanded with the addition of support for various types of response (responseType). So the answer in the form of “arraybuffer” represents the contents of the resource requested from the server, in the form of an ArrayBuffer object for JavaScript. Blob, text, and document responses are also supported.

 function getServerFileToArrayBufffer(url, successCallback) { // Create an XHR object var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == xhr.DONE) { if (xhr.status == 200 && xhr.response) { // The 'response' property returns an ArrayBuffer successCallback(xhr.response); } else { alert("Failed to download:" + xhr.status + " " + xhr.statusText); } } } // Open the request for the provided url xhr.open("GET", url, true); // Set the responseType to 'arraybuffer' for ArrayBuffer response xhr.responseType = "arraybuffer"; xhr.send(); } 

In many cases, files can be selected by the user, for example, as an attachment to an email in a web client for mail. The File API provides web developers with the ability to read the contents of files specified via the <input> element, when dragging or dragging or from another source (Blob, File). To read the contents of a file in ArrayBuffer, a FileReader object is used and, like an XHR object, it is used asynchronously to make sure that reading from disk does not block the user interface.

 function readFileToArrayBuffer(file, successCallback) { // Create a FileReader var reader = new FileReader(); // Register for 'load' and 'error' events reader.onload = function () { // The 'result' property returns an ArrayBuffer for readAsArrayBuffer var buffer = reader.result; successCallback(buffer); } reader.onerror = function (evt) { // The error code indicates the reason for failure if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) { alert("Failed to read file: " + file.name); } } // Begin a read of the file contents into an ArrayBuffer reader.readAsArrayBuffer(file); } 

Conclusion

Binary data is actively used by web browsers. With the addition of support for Typed Arrays, XHR2 and File API in IE10, web applications can now also directly work with binary data, manipulate data at the byte-byte level, display additional binary data formats and extract additional data from existing media formats. Try the Binary File Inspector example on IE Test Drive , and the Typed Arrays implementation in IE10.