Assuming videoID = "f3cad68b-8692-4068-a79b-fdfd58665699" has been obtained from OutputParams of one RequestStream invocation, you can proceed like this:
httpRequest.open('POST','http://mobileserver.name:8081/Video/f3cad68b-8692-4068-a79b-fdfd58665699');
httpRequest.responseType
=
'arraybuffer';
httpRequest.send(null);
to request a video frame. Upon successful completion
httpRequest.response will have the frame encoded as an ArrayBuffer object.
You need an ArrayBufferView to access data in the ArrayBuffer.
Considering the frame layout from chapter 5, we’ll use this library https://github.com/vjeux/jDataView to show a frame decoding example.
var response
=
httpRequest.response;
var dataView
=
new jDataView(response,
0,
response.length,
true);
var uuid
=
dataView.getUUID();
var frame
=
{};
var tsBytes
=
dataView.getArray(8);
var ts
=
0;
for
(var i
=
0;
i
<
8;
i
++)
ts
+=
tsBytes[i]
*
Math.pow(2,
8
* i);
frame.timestamp
=
new
Date(ts);
frame.frameNumber
= dataView.getUint32();
frame.dataSize
=
dataView.getUint32();
frame.headerSize
=
dataView.getUint16();
var
headerExtensions
= dataView.getUint16();
frame.hasSizeInformation
=
headerExtensions
&
0x01;
frame.hasLiveInformation
=
headerExtensions
&
0x02;
frame.hasPlaybackInformation
=
headerExtensions
&
0x04;
if
(frame.hasSizeInformation)
{
frame.sizeInfo
=
{sourceSize:
{},
sourceCrop:
{}, destinationSize:
{}};
frame.sizeInfo.sourceSize.width
= dataView.getUint32();
frame.sizeInfo.sourceSize.height
= dataView.getUint32();
frame.sizeInfo.sourceCrop.left
= dataView.getUint32();
frame.sizeInfo.sourceCrop.top
= dataView.getUint32();
frame.sizeInfo.sourceCrop.right
= dataView.getUint32();
frame.sizeInfo.sourceCrop.bottom
=
dataView.getUint32();
frame.sizeInfo.destinationSize.width
=
dataView.getUint32();
frame.sizeInfo.destinationSize.height =
dataView.getUint32();
frame.sizeInfo.destinationSize.left
= dataView.getUint32();
frame.sizeInfo.destinationSize.top
= dataView.getUint32();
frame.sizeInfo.destinationSize.right
= dataView.getUint32();
frame.sizeInfo.destinationSize.bottom =
dataView.getUint32();
}
if
(frame.hasLiveInformation)
{
frame.currentLiveEvents =
dataView.getUint32();
frame.changedLiveEvents
=
dataView.getUint32();
}
if
(frame.hasPlaybackInformation)
{
frame.currentPlaybackEvents
=
dataView.getUint32();
frame.changedPlaybackEvents = dataView.getUint32();
}
if
(frame.dataSize
>
0)
{
dataView.seek(frame.headerSize);
var
darr
= dataView.getArray(frame.dataSize);
frame.imageData
=
'data:image/jpeg;base64,'
+ Base64.encodeArray(darr);
}
Base64 implementation here: http://www.webtoolkit.info/javascript-base64.html
<img src = ‘frame.imageData’<>
will render the image.