Как я могу записать кадр из встроенного видео YouTube (через iframe) на холст? - PullRequest
Новая
       36

Как я могу записать кадр из встроенного видео YouTube (через iframe) на холст?

0 голосов
/ 17 февраля 2019

Я хотел бы иметь возможность извлекать кадры из видео YouTube в различных точках внутри них (а не только в виде миниатюр) и выполнять их обработку.Я могу встроить видео на свой веб-сайт с помощью API iframe, но я изо всех сил пытаюсь найти способ перенести это на холст.(Это нормально, если я вынужден захватить весь экран, и хорошо, если мне нужно внести изменения в настройки браузера, чтобы разрешить это.)

1 Ответ

0 голосов
/ 21 февраля 2019

Один из вариантов - написать расширение для браузера.Но я полагаю, что вы хотели бы избежать этого.

Другой вариант - использовать API захвата экрана (который поддерживается в Chrome, Edge и Firefox).Ознакомьтесь с информацией о совместимости браузера на MDN.

Используя этот API, вы можете разрешить своему пользователю делиться своим экраном или вкладкой браузера и воспроизводить его на переходном видеоэлементе: 

const videoElem = document.createElement('video');
videoElem.autoplay = true;

const displayMediaOptions = {
  video: {
    cursor: "never"
  },
  audio: false
};

async function startCapture() {
  videoElem.srcObject = await navigator.mediaDevices
    .getDisplayMedia(displayMediaOptions);
}

Позже вы можете нарисовать видео на холсте, чтобыполучить кадр Base64 (в основном скриншот). 

function getScreenshotInBase64() {
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  let [w, h] = [videoElem.videoWidth, videoElem.videoHeight];
  canvas.width =  w;
  canvas.height = h;
  context.drawImage(videoElem, 0, 0, w, h);
  return canvas.toDataURL();
}

Ограничения при таком подходе:

  • Пользователь может выбрать другую вкладку / приложение / экран или страницу можно прокрутитьвниз и видео не видно.
  • Вы получаете больше, чем просто видео (но, исходя из вашего описания, это не обязательно плохо).
  • Довольно скудная поддержка браузера (если вы считаете, что старше илимобильные браузеры).
  • Пользователь должен разрешить вам сделать это (в основном каждый раз, когда вы хотите начать делиться = запись видео в вашем случае).

Я строю небольшойJsFiddle с описанными выше фрагментами, который получает экран печати Base64 через 2 секунды после начала совместного использования экрана (нажав кнопку запуска): https://jsfiddle.net/75Lmbf2o/.

...