Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
lucaceck95
Newbie

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 1
lucaceck95
Newbie

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
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.