Taking video stream from browser

    var video = document.getElementById('videoVideoPush');

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(onSuccess).catch(onError);
    }
    else {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({ video: true, audio: false }, onSuccess, onError);
        } else {
            console.log("Video push not supported!");
        }
    }

    function onSuccess(mediaStream) {
        video.onloadedmetadata = function (event) {
            video.onloadedmetadata = function () { };
            video.play();
        };
        video.ontimeupdate = function () {
            video.ontimeupdate = function () { };
        };
        video.src = window.URL.createObjectURL(mediaStream);
    }

    function onError(error) {
        console.log(error.name);
    }
    

Send command to the server to prepare URL for the upload

    var requestStreamXMLMessage = generateXMLMessage({
        sequenceId: 1, // just a random number, we are not going to track the sequenceId
        connectionId: connect.connectionId,
        command: 'RequestStream',
        inputParams: {
            SignalType: 'Upload',
            ByteOrder: 'Network'
        }
    });
    sendCommandRequest(requestStreamXMLMessage, function (response) {
        var paramsNodes = response.querySelectorAll('Param');
        for (var i = 0; i < paramsNodes.length; i++) {
            videoPushParams[paramsNodes[i].getAttribute('Name')] = paramsNodes[i].getAttribute('Value');
        }
    });
    

Taking screenshot from the video tag through canvas

    video.ontimeupdate = function () {
        var width = video.videoWidth;
        var height = video.videoHeight;
        var canvasContext = canvas.getContext('2d');
        canvasContext.canvas.width = width;
        canvasContext.canvas.height = height;
        canvasContext.drawImage(video, 0, 0, width, height);
        send(canvas.toDataURL("image/jpeg", 0.9));
    };
    

Packing the frame with video headers and send it to the server

    function send(imageData) {
        var bytesArray = Bytes.fromBase64(imageData);
        var buffer = new ArrayBuffer(headerSize + bytesArray.length);
        var bufferView = new Uint8Array(buffer);
        // Header
        bufferView.set(Bytes.fromGuid(videoPushParams.VideoId, 16));	// Video id
        bufferView.set(Bytes.fromInt(new Date().getTime(), 8), 16);		// Timestamp
        bufferView.set(Bytes.fromInt(++counter, 4), 24);				// Frame count
        bufferView.set(Bytes.fromInt(bytesArray.length, 4), 28);		// Frame size in bytes
        bufferView.set(Bytes.fromInt(headerSize, 2), 32);				// Header size in bytes
        bufferView.set(Bytes.fromInt(0, 2), 34);						// Header extension flags
        // Data
        bufferView.set(bytesArray, headerSize);
        AjaxRequest(videoPushParams.StreamId, function () {}, buffer);
    }
    

Bite parser

    var Bytes = new function () {
	var fromInt = function (integer, bytes) {
		
		return fromHex(integer.toString(16), bytes);
		
	};
		
	var fromGuid = function (guid, bytes) {
		
		return fromHex(guid.replace(/[^a-f0-9]/gi, ''), bytes);
		
	};
	var fromBase64 = function (base64, bytes) {
		
		var string = atob(base64.replace(/^.*?,/, '')).slice(- bytes);
		var array = new Array(bytes ? bytes - string.length : 0);
		
		for (var i = 0; i < string.length; i++)
			array.push(string.charCodeAt(i));
		
		return array;
	};
	var fromHex = function (hex, bytes) {
		
		hex = hex.length % 2 ? "0" + hex : hex;
		
		var numbers = hex.match(/../g).splice(- bytes);
		var array = new Array(bytes ? bytes - numbers.length : 0);
		
		array.push.apply(array, numbers);
		array.forEach(function (item, index) {
			array[index] = parseInt(item || 0, 16);
		});
				
		return array;
				
	};
	
	return {
		fromInt: fromInt,
		fromGuid: fromGuid,
		fromBase64: fromBase64,
		fromHex: fromHex
	}
    };