requestAnimationFrame doesn't work on Chrome Beta for Android when function fired first time

I'm experimenting on this simple structure: HTML:

<video width=340></video>
<canvas></canvas>
<button id=button>Start</button>

JavaScript:

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame
  , doc = document
  , webcam = doc.querySelector('video')
  , canvas = doc.querySelector('canvas')
  , ctx = canvas.getContext('2d')
  , button = doc.getElementById('button')
  ;

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var playWebcam = function() {
    navigator.getUserMedia(
        constraints = {
            audio: true,
            video: true
        },
        function(stream) {
            webcam.src = window.URL.createObjectURL(stream);
            webcam.play();
            paintCanvas.source(webcam);
        },
        function(err) {
            console.log(err);
        }
    );
};

var paintCanvas =  {
    source: function(x) {
        this.x = x;
        this.paint(this.x);
    },
    paint: function() {
        var that = this;
        this.paint.prototype = function() { that.draw(this.x); }
        this.paint.prototype(this.x);
    },
    draw: function() {
        ctx.drawImage(this.x, 0, 0, canvas.width, canvas.height);
        requestAnimationFrame(this.paint.prototype);
    }
}

button.addEventListener('click', function() {
    playWebcam();
}, false);

It is working fine on PC, but it does not work on Chrome Beta for Android unless you tab the Start button for the second time.

How to make it make it works instantly without the need of re-tabbing the button.