Как сделать скриншот содержимого IFrame?

Question

[Иван]

Привет, у меня есть проблема. Пишу приложение на react, и использую ant media server.
Есть компонент который в Iframe передает данные с сервера:

<iframe
          ref={iFrameRef}
          className={styles.camera}
          allowFullScreen
          title={`camera_${collaboration.srcId}`}
          width="70%"
          height="300"
          src={`${CONFIG.ANT_MEDIA}/LiveApp/play.html?name=${collaboration.srcId}&autoplay=true`}
          seamless
        />

Это видео с камеры наблюдения. Вопрос, могу ли я сделать скриншот этого видео на клиенте? пробовал использовать библиотеку html2canvas, но в скриншоте сам Iframe пустой:

const handleScreenVideo = async () => {
    if (iFrameRef.current) {
      await html2canvas(iFrameRef.current).then((canvas) => {
        canvas.toBlob((blob) => {
          if (blob) {
            const urlCreator = window.URL || window.webkitURL;
            const url = urlCreator.createObjectURL(blob);
            const link: any = document.createElement('a');

            link.href = url;
            link.setAttribute('download', 'скриншот.jpg');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
          }
        });
      });
    }
  };

Мб я что то делаю не так? Пытался найти ответы, не нашел

Answer 1

[Александр N++]

у вас не получиться сделать скриншот средставми JS, если iframe это внешний источник обращение к frame доступно только через postMessage в обоих направлениях.
Для локальных фреймов которые созданы родительским окном можно использовать все что угодно.
так работает например vpaid реклама на yootube и на милионах других сайтах.

Решение только использовать web-driver который запускает реальный браузер через selenium это chrome или firefox

на nodejs можно использовать безголовый-хром в лоб, на пхп уже не вспомню как запускать шайтан машину.
можно воспользоваться готовой библиотекой требует php8.1

посути это обертка вокруг безголового хрома.
https://github.com/spatie/browsershot

Comments

[Иван]

Спасибо!

Answer 2

[Владислав Enokin]

const takeIFrameScreenshot = (iframeId) => {
  const iframe = document.getElementById(iframeId);
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const iframeBody = iframeDoc.body;
  
  const canvas = document.createElement('canvas');
  canvas.width = iframeBody.scrollWidth;
  canvas.height = iframeBody.scrollHeight;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(iframe, 0, 0, canvas.width, canvas.height);
  
  const screenshot = canvas.toDataURL();
  
  return screenshot;
}

Comments

[Иван]

я получаю ошибку:
Uncaught (in promise) DOMException: Permission denied to access property "document" on cross-origin object