getUserMedia, record, camera

getUserMedia

ico.camera = new Image();
ico.camera.title = "Camera";
ico.camera.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAZCAYAAABQDyyRAAACuklEQVRIS62WS4hPYRjG52CFTAyZEUnJJZdEGZlhRhELo8zGko1bZoGsFIYil7KQcdmgKVGkbDSGBRtJWEg0oRmkUEiN3Gb8/Z5/79FxmnPOew5fPb3n+773fd7nu5+gwllKpVKA60gwB4wbIEz9H8Fd8CkIgl8eagW5CgKacWwD1RkBX+jfDs4i4mcWuUsAyedCdA8MziK0/h/Y1Qi4luXvFXARojVZZLH+durrEFFKi/tLACNdhPMsMCgS9JXv/WBsTgHd+J8A32JxXYi6EbaVBZB4KkaK5+dMUtT9NYHNCLkfkHwYleugrihbwbjnxK2QgMV83M5JchN/4ZUmEOhYNoKmnDxbJWATQSedgUq4Huis94Zn3e6I4bRNBufAbCffIQnYgvNxR0APPg0klYhyscQV0Z1OWxVdl8ASB+cRr4DvkNVr01jiodgZYAHQ3fAQPKBfl5CE6SRdBZMyRLgFtEHeYuQjsAeAZi5azlPZGBFxkPoOE5ikwy1gYjj1jG4PbK0JjKfw22xC9WbcApUps+AS8AGCaoj7SK53QOtbn0CqparEV1ZL8R4z5l8FPINgOqT9EE7h+zLQGg9U+michu8LE/AWm3aDumbgMyRVJmC0CWhIENBL+yi9gnZC3v2PGVAujarLRrUNezRBwF78Ws2vFtsJtGmTimsGFNwO8VojHoLdBXbHWA+rLbL+x6jrpEQftrgQtwAF1kF+J2SwDbmSugRppN3hhUSfRq/NOiFl9OrKJUAbahlJHqeR2kY9I8EZyf8I2MDXaYezXN6AfaAjeiXb0tRgG8FOMNPJV34L5uFcvmKdpR+/R0CbUu96+BrqiIrL+9umdC0SoHv9CljuFBB1C/980zZaEu1TOpaGf0TjqVwAC21EBbS4QzRjL8EqlvFJ/J9QF4x+z4qMyKugh8QdofNv97wSCxcg3qAAAAAASUVORK5CYII=";
ico.camera.enabled = function(){return ico.camera.recorder;};
ico.camera.hit = function()
{
    navigator.mediaDevices.getUserMedia(
    {
        audio: true,
        video: true
    })
    .then(function (stream)
    {
        ico.camera.recorder = new MediaRecorder(stream);

        var allChuncks = [];
        ico.camera.recorder.ondataavailable = function(e)
        {
            allChuncks.push(e.data);
            saveAs(new Blob(allChuncks,{type: this.mimeType}), "untitled.webm");
        }

        ico.camera.recorder.start();
        ico.camera.start = Date.now();
        setTimeout(function()
        {
            if (ico.camera.recorder)
                ico.camera.recorder.stop();
            delete ico.camera.recorder;
            foxobj.setcurrent(0);
            foxobj.setanchor(0);
            ico.camera.start = 0;
            foxham.panel = foxobj.getcurrent();
            foxham.panel.draw(foxcnvctx, foxcnvctx.rect(), 0);
            broham.panel.draw(brocnvctx, brocnvctx.rect(), 0);
        }, 1000*30);

        foxobj.setcurrent(foxobj.enums.camera);
        foxobj.setanchor(foxobj.enums.camera);
        foxham.panel = foxobj.getcurrent();
        foxham.panel.draw(foxcnvctx, foxcnvctx.rect(), 0);
        broham.panel.draw(brocnvctx, brocnvctx.rect(), 0);
    });
};

ico.camerastream = new Image();
ico.camerastream.title = "Record";
ico.camerastream.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAWCAYAAAChWZ5EAAACPUlEQVRIS8WWvUtcQRTF90UNoqQQbYIrkbjBJiTGQguVgP9BQIjZmMLFxkLSC0FIkcJ/wSIQP/Gj0FjZCAqWFikFGysVo6KiMVHX31neyLwhjXfJZuDw5s6+e+95d86d2Sifz5elUqlO0AGuQSlGniQ/wEoEgVdMNkuRNcjxBzsrAn1MxsEO2IirEPEUy0egC9QYCf7G7zu4AA+8GKr2E/BRBLJMJsFMFEXv/ET81oC9CFQly/iJUyNxz4K4U9jKNeQTWGBhIGbrKpDB1ssvLNnxOYp993hKaxqK/Q30hAS0J+dApXdDTlWe8315KNYpuAkcq7ErQgJ6KewCsRUJPa3jKvgoxSmPYya2YI3FUSDhuC2oZ/4JPDVm19fngLbCbYFCDYPXYQWmEMt7PxEifIy9DFqNBCTCNHF/BXEnsJUrUYFVFr6AS68CaeafgcRoGSc4qc0PgwqMYHeHBCRAveiLUHtVByQYy5CudkGorVrWJO5EBSwJivVJEJhVudgvtWNhoAGJT+dDizGTKpohpkR4N4g7jdEbVuC/E3Bt6IvQtWGTsQJqw35wDNxdoBb/axsacxTlltCA9msbSLnuIKpk/ixWrCWTTkHd+9KVf5qqouqEBAHdeoNAh4YjoBe/gueW7PhIfO1gH/iX0Rj2m5DAHAsfUKw0UBioVQfQPHhpJKCqNhPzwPcn7gz2W0dA7aC2+Jd/SFxVHQ/3h6SwBW2sroOHxq+0uumeyBWEAQmVo1lTa7R7+inPFli6BcA66hszP0IIAAAAAElFTkSuQmCC";
ico.camerastream.enabled = 0;
ico.camerastream.hit = function()
{
    var video = document.createElement('video');
    navigator.mediaDevices.getUserMedia(
    {
        video: true
    })
    .then(function (stream)
    {
        video.src = URL.createObjectURL(stream);
        video.addEventListener('loadedmetadata', function ()
        {
            function initCanvas(video)
            {
                var draw = function ()
                {
                    requestAnimationFrame(draw);
                    repbcnvctx.drawImage(video, 0, 0, repbcnv.width, repbcnv.height);
                };

                requestAnimationFrame(draw);
            }

            initCanvas(video);
        });

        video.play();
    });
};

ico.record = new Image();
ico.record.title = "Record";
ico.record.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAaCAYAAADfcP5FAAADB0lEQVRIS82XT4hNURzHXUrY+BMLNSQRG5EFCxukhDCYKSP/h/fM84xnGPNMhA0jISEMsvGfnY0dGcQgkkx2Nv6MhbJSSs/n+7pP1+2ec+7Rm/Krb/fP79/nnnfuOfcF/f4zC6I8pVJpItcH0Kp/5PxBXjc6he4GQfDTt84fIGDqSb7lW8ASfw9fE1AffGqWgYCZweGZT2LK2JvE7QDqsy2e/sPwD0G9AReCeoGmp2ziG6ZROmdKov9BfLvRINQgoMmc9Ph28Yi/QmwrUF+iOfSdxvUNNClyf5+AVnLjukcD39DHJOQBel1JpOdlztegAbFiewW0kZuXLF2+4duKHiEVmudJ9JL4HEDd4cMf4XqsoUa7gDbhvGBp0ouvnoJdxPbXObqa8HSmEpqfWkbUR3PFZkUBZYg47wBaAZCGvmzk1HA4jFbrEv21nsVqPee6Ae1CWxxAbQLKEmR8C/BpMi4D6Gm8GLnLuXcajbY00nKiEdLoqJfNWgWUI+KMJUpAtQAlrlPkj8TfgRoNNfQgGkkB6dew2U4B5YnQUm8yAS0BSENvNOrU4TyLBBi1J1ysRW1oswOoRUDNBJ20BGqVXQyQ3hYb0FScnUirftQ099aHQJrYNisIqEDECQfQIoBemWKosRTfcTQ+IaaLe1pa9oRHG1CzgFqIOOYAWhhd2Cqx5E7g/CiqRaa37SE+jUwxBVBeQHodVdRkn3AsAOhNBEQb4TakyeyyBwRoMmuENjiCcwLS7NfqaQOaD9BbBRA/l8MdNNxFEvrvc9T6047WOXKaBCTyQ5bAr/i03wlInxNzUoJUwgSkERqBLqIplvxsmtde+b/CIvHNMA2bPtQKjPD7cIT18HqRBickZwQ0C4c2zr4y7ZNFgLRJl42eYzjcRjNjTRsFpA1T9Hpj+sIywCRu3uGXhpaLoWHjuson7Gxu6Leutmny6+f6aCoM1Ch829FA1BH9yNeOfK2KRJoGWWDe+dSM/w0aR/J+pI8wkevnlHwms0ZDW1EnMN99YBRr+47xrVWV+N9H8gGnp6MfXgAAAABJRU5ErkJggg==";
ico.record.enabled = 0;
ico.record.hit = function()
{
    jugcnvctx.hide();
    foxobj.show = 1;
    pageResize();
    this.recorder = new MediaRecorder(repbcnv.captureStream());

    var allChuncks = [];
    this.recorder.ondataavailable = function(e)
    {
        allChuncks.push(e.data);
        saveAs(new Blob(allChuncks,{type: this.mimeType}),
            projobj.name() + "." + repbham.panel.name + ".webm");
    }

    this.recorder.start();
    this.start = Date.now();
    setTimeout(function()
    {
        if (ico.record.recorder)
            ico.record.recorder.stop();
        delete ico.record.recorder;
        foxobj.setcurrent(0);
        foxobj.setanchor(0);
        ico.record.start = 0;
        foxham.panel = foxobj.getcurrent();
        foxham.panel.draw(foxcnvctx, foxcnvctx.rect(), 0);
        broham.panel.draw(brocnvctx, brocnvctx.rect(), 0);
    }, 1000*30);

    foxobj.setcurrent(foxobj.enums.record);
    foxobj.setanchor(foxobj.enums.record);
    foxham.panel = foxobj.getcurrent();
    foxham.panel.draw(foxcnvctx, foxcnvctx.rect(), 0);
    broham.panel.draw(brocnvctx, brocnvctx.rect(), 0);
};