var options = {
    type: 'video',
    overlay: {
        image: HTMLImageElement,
        src: 'image-src or DataURL',
        text: 'string',
        fontSize: 'pixels',
        fontFamily: 'Arial',
        color: 'foreground-color-for-text',
        backgroundColor: 'for-text',
        pageX: 'position-x-of-the-text/logo',
        pageY: 'position-y-of-the-text/logo',
        etc: ''
    }
};

var recorder = RecordRTC(stream, options);

stream.onRender = function(context, x, y, width, height) {
    context.font = '20px Georgia';

    var userName = 'User Name';
    var measuredTextWidth = parseInt(context.measureText(userName).width);

    x = x + (parseInt((width - measuredTextWidth)) / 2);
    y = height - 40;

    context.strokeStyle = 'rgb(255, 0, 0)';
    context.fillStyle = 'rgba(255, 255, 0, .5)';
    roundRect(context, x - 20, y - 25, measuredTextWidth + 40, 35, 20, true);

    var gradient = context.createLinearGradient(0, 0, width * 2, 0);
    gradient.addColorStop('0', 'magenta');
    gradient.addColorStop('0.5', 'blue');
    gradient.addColorStop('1.0', 'red');
    context.fillStyle = gradient;

    context.fillText(userName, x, y);
};