Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Highlighted
Level 7

HTML video screenshot with canvas

Hi everyone.

i'm working on an App as remote controller for a BrightSign Player

I'm writing here this post because BrightScript language is used in both devices: roku and brightsign, hoping some ideas or solution.

in my BrightSign Player i have a directory CONTENT with some videos in it
I also have a directory THUMBNAIL with the preview of these videos

i'd like to do it in an html page index.html loaded on localServer on port 3000

AUTORUN.BRS

 
r = CreateObject("roRectangle", 0, 0, 1920, 1080)
	is = {
		port: 3001
	}
	config = {
		nodejs_enabled: true
		javascript_enabled: true
		inspector_server: is
		brightsign_js_objects_enabled: true
		url: "file:///sd:/index.html"
		security_params: { websecurity: false }
	}
	h = CreateObject("roHtmlWidget", r, config)
 

this is the code

INDEX.HTML

 
<div id="videoDiv" class="row">
    <div class="col-md-6">
      <div class="form-group">
        <video width="640" height="360" muted controls id="videoPlayer" hwz="on">
          <source id='currentVID' type="video/mp4">
        </video>
      </div>
    </div>
  </div>

  <canvas width="640" height="360" id="canvas" style="overflow:auto"></canvas>
<script>
function check() {
    noThumb = content.filter(function (el) {
      return thumbnail.indexOf(el + '.png') == -1
    });
//take files that haven't a thumbnail

    var player = _("videoPlayer")

    noThumb.foreach(vid=>{
      player.src = 'CONTENT/' + vid

      // currentVID.setAttribute('src', 'CONTENT/' + vid);
      player.load();

      player.onloadedmetadata = function () {
        player.currentTime = player.duration / 2;
      };

      player.onseeked = function () {
      
          var canvas = _('canvas');
          var video = _('videoPlayer');

          canvas.style.backgroundColor = '00f';
          canvas.width = 640;
          canvas.height = 360;

          var ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, 640, 360);

        let img =canvas.toDataURL();
...
HERE I SAVE THE THUMBNAIL ON SD/thumbnail
...
</script>
}
my problem is that Canvas doesn't generate any image, or better, it generate a blank image with no informations
 
i tried this code in localhost on pc and it works.
can't figure out what and where the issue is
maybe html version? i noticed that the <video> tag looks different on browser and on brightsign
 
thanks for your help (hope soon)
0 Kudos
1 Reply
Highlighted
Level 7

Re: HTML video screenshot with canvas

i'm trying also to run this code
https://snipplr.com/view/64256
into index.html and there's the same issue. canvas and image aren't created or are created blank

0 Kudos