0

HTML video screenshot with canvas

Hi everyone.
in my bsp 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

this is the code

<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. i tried this code in localhost 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)
 

1 comment

  • 0
    Avatar
    Luca Ceccato

    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

Please sign in to leave a comment.