Да, вы можете использовать видео в качестве источника изображения для холста. Просто оберните код как функцию, которая принимает видео и размер в качестве аргументов и возвращает элемент холста.

Видео должно быть загружено и находиться в кадре, который вы хотите сделать.

Примеры методов

function createThumb(video, w, h) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d");                // get context
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  return c;                                    // return canvas
}

Холст можно вставить в DOM и использовать в качестве держателя изображения. Если вы предпочитаете элемент изображения, вам придется сделать еще пару шагов, а также обработать асинхронный характер загрузки изображения с помощью обратного вызова (или обещания):

function createThumb(video, w, h, callback) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d"),                // get context
      img = new Image();                       // final image
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  img.onload = function() {                    // handle async loading
    callback(this);                            // provide image to callback
  };
  img.src = c.toDataURL();                     // convert canvas to URL
}

Если у вас возникли проблемы с размером видеокадра, вы можете заменить аргументы drawImage() следующим:

ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h);