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:
On my TV, video playing but canvas is blank without error on Chrome Devtool:
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.
any idea or equivalent for display video on canvas?
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