Search code examples
javascripthtmltizentizen-web-apptizen-emulator

Javascript Canvas blank Tizen webapp

I try to display video on canvas in a Samsung SmartTV (2017) with (TV extension 3.0) with Html5 & Javascript.

Here is a my sample code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
    body {
        font: white
    }
</style>

<body>

    <!-- <video width="820" height="240" controls>
          <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv">
          
        </video> -->
    <video id="source" src="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" autoplay muted
        controls></video>
    <hr>
    <canvas id="c1"></canvas>
    <canvas id="c2"></canvas>
    <canvas id="c3"></canvas>
    <canvas id="c4"></canvas>
    

</body>
<script>
    var video = $('#source')[0]; //variable to tie to our source

    //create an array to store our canvases
    // var splitCanvas = [$('#c1')[0], $('#c2')[0], $('#c3')[0], $('#c4')[0]];
    var splitCanvas = [$('#c1')[0], $('#c2')[0]];


    //start the function once the video starts playing
    video.addEventListener('playing', function () {

        //create some variables for readability
        //halving the width and height results in 4 quadrants
        var w = video.videoWidth / 2;
        var h = video.videoHeight;

        //create a canvas context so we can manipulate the images
        var context = [];
        for (var x = 0; x < splitCanvas
            .length; x++) { //set the canvas dimensions to the native size of the video
            splitCanvas[x].width = w;
            splitCanvas[x].height = h;
            context.push(splitCanvas[x].getContext('2d')); //create the context

        };
        console.log('drawing'); //Draw the 4 quadrants from the source video every 33 ms (approx 30 FPS)
        setInterval(function () { //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //Upper left
            context[0].drawImage(video, 0, 0, w, h, 0, 0, w,
                h
            );
            context[1].drawImage(video,
                w, 0, //x, y start clipping
                w, h, //x, y clipping width
                0, 0, //x, y placement
                w, h); //width, height of placement
        }, 33);
    });
</script>

</html>

On emulator and Chrome, it's working without error in chrome devtool:

Emulator demo

On my TV, video playing but canvas is blank without error on Chrome Devtool:

Device demo

It's a strange for me because all tests are same, video showing but canvas was empty every time.

I suspect DrawImage,How can i find out where the problem comes from if i don't have any errors in the console and when I add a breakpoint in the drawImage, it continues normally.

DrawImage debug

any idea or equivalent for display video on canvas?

Solution

  • Sorry, it is not supported feature in TV device including newer TV devices.

    It is a constraint due to the VIDEO_HOLE method that punches transparency hole at the video area and video is played on overlay(underlay) plane