CODEWITHSUNDEEP
javascript
Zarc Rowden
Zarc Rowden

Reputation: 85

Resizing camera display in Seriously.js

I'm trying to resize the camera display within the canvas DOM element. I've tried using an event listener and am able to resize the canvas without any problem. The camera's video feed however is not updating its size, t stays the same as it was upon initialization. In order to make it work I've had to basically destroy much of the composition and then re-initialize the whole thing every time a window resize occurs. It works but its ugly. Does anyone have a better solution in mind? Maybe there is a way to make this one more elegant? Thanks for any input. 

    window.addEventListener( 'resize', onWindowResize, false );
        function onWindowResize() {
        // seriously
        reformat = null
        source = null
        target.destroy()
        target = null
        seriously = new Seriously();
        canvas.width = window.innerWidth * devicePixelRatio;
        canvas.height = window.innerHeight * devicePixelRatio;
        var source = seriously.source('camera');
        target = seriously.target('#canvas'); 
        reformat = seriously.transform('reformat');
        reformat.source = source;
        reformat.width = canvas.width;
        reformat.height = canvas.height;
        target.source = reformat


        seriously.go(function(now) {
        var minutes;

        minutes = now / 6000;
        console.log("running")
        // split.angle = (minutes - Math.floor(minutes)) * PI2;
        // split.split = Math.cos(now / 1000) / 2 + 0.5;
    });

Upvotes: 1

Views: 443

Answers (1)

Zarc Rowden
Zarc Rowden

Reputation: 85

After iterating through each of the Seriously examples I found a simple solution. 

   var devicePixelRatio = window.devicePixelRatio || 1;

    function resize() {
      target.width = window.innerWidth * devicePixelRatio;
      target.height = window.innerHeight * devicePixelRatio; 
      reformat.width = target.width;
      reformat.height = target.height;
    } 

    window.onresize = resize;

Upvotes: 1

Related Questions