MobileSDK live stream

MIP
, , ,
1

I am trying to implement live streaming on my html page according to this example:

https://doc.developer.milestonesys.com/mipsdkmobile/reference/protocols/mobile_decoding.html

However, httpRequest.response is always null and jDataView does not contain functions like getUUID() or dataView.getArray(8).

Is this example still valid? Is there any other example how to implement live streaming?

I can compose URL targeting to my mobile server with video ID but I am not able to consume this URL on UI html/javascript client. I would like to see video on UI client.

I’ve tried also solution with websockets:

const videoFormat = {
            type: 'media-source',
            video: {
                contentType: 'video/mp4; codecs="avc1.640028"',
                width: 1920,
                height: 1080,
                bitrate: 2646242,
                framerate: '30'
            }
        }
 
        if (MediaSource.isTypeSupported(videoFormat.video.contentType)) {
            console.log("Format supported");
        } else {
            console.log("Format not supported");
        }
 
        var mediaSource = new MediaSource();
        var buffer;
        var queue = [];
 
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(mediaSource);
 
        mediaSource.addEventListener('sourceopen', function (e) {
            // video.play();
 
            buffer = mediaSource.addSourceBuffer(videoFormat.video.contentType);
            buffer.mode = 'sequence';
 
            buffer.addEventListener('updatestart', function (e) { console.log('updatestart: ' + mediaSource.readyState, e); });
            buffer.addEventListener('update', function (e) { console.log('update: ' + mediaSource.readyState, e); });
            buffer.addEventListener('updateend', function (e) { console.log('updateend: ' + mediaSource.readyState); });
            buffer.addEventListener('error', function (e) { console.log('error: ' + mediaSource.readyState, e); });
            buffer.addEventListener('abort', function (e) { console.log('abort: ' + mediaSource.readyState, e); });
 
            buffer.addEventListener('update', function () { // Note: Have tried 'updateend'
                video.sync();
                if (queue.length > 0 && !buffer.updating) {
                    buffer.appendBuffer(queue.shift());
                }
            });
        }, false);
 
        mediaSource.addEventListener('sourceopen', function (e) { console.log('sourceopen: ' + mediaSource.readyState, e); });
        mediaSource.addEventListener('sourceended', function (e) { console.log('sourceended: ' + mediaSource.readyState, e); });
        mediaSource.addEventListener('sourceclose', function (e) { console.log('sourceclose: ' + mediaSource.readyState, e); });
        mediaSource.addEventListener('error', function (e) { console.log('error: ' + mediaSource.readyState, e); });
 
 
        var websocket = new WebSocket('ws://server09:8081/XProtectMobile/Video/f1a67d99-67c3-4136-844c-9691633f1412');
        websocket.binaryType = 'arraybuffer';
        websocket.addEventListener('message', function (e) {
            if (typeof e.data !== 'string') {
                if (buffer.updating || queue.length > 0) {
                    queue.push(new Uint8Array(e.data));
                } else {
                    buffer.appendBuffer(new Uint8Array(e.data));
                }
            }
        }, false);

With web socket solution I’m getting an exception “Failed to execute ‘appendBuffer’ on ‘SourceBuffer’: This SourceBuffer has been removed from the parent media source.”.

Is there any working example how to show video on UI?

2

I’ve tried to use snippet of code from your SDK (XPMobileSDK\Lib\modules\VideoStream and XPMobileSDK\Lib\modules\VideoConnection)

websocket.addEventListener('message', function (e) {
    if (typeof e.data !== 'string') {
        if (buffer !== undefined) {
            var fragment = new VideoFrame(e.data);
            if (buffer.updating || queue.length > 0) {
                queue.push(fragment.data);
            } else if (!firstIframeAdded && fragment.stream.hasKeyFrame) {
                buffer.appendBuffer(fragment.data);
                firstIframeAdded = true;
            } else if (firstIframeAdded) {
                buffer.appendBuffer(fragment.data);
            }
        }
    }
}, false);

but there is no fragment with fragment.stream.hasKeyFrame therefore it does not appped to buffer anything because the condition is not met.

3

I used wrong video connection ID. When I used the right one, the above solution with “var fragment = new VideoFrame(e.data);” started to work.

4

Hello Michal,

the example is a little outdated but still valid in concept. My suggestion to you is to use the XPMobileSDK. Here is the full documentation of the SDK: https://doc.developer.milestonesys.com/mipsdkmobile/reference/WebSDKdoc/index.html

Also you can watch some of my tutorials how to use the SDK. Here is the one showing how to render video in the browser: https://youtu.be/wQIrqyEu4TQ

Hope that helps

Teodor