Блог

Главная - Вопросы по программированию - Рисование на холсте, чтобы сделать снимок экрана — Пустой экран

Рисование на холсте, чтобы сделать снимок экрана — Пустой экран

#javascript #google-chrome #google-chrome-extension

#javascript #google-chrome #google-chrome-расширение

Вопрос:

 const capture = async () => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    const video = document.createElement("video");
  
    try {
      const captureStream = await navigator.mediaDevices.getDisplayMedia();
      video.srcObject = captureStream;
      context.drawImage(video, 0, 0, window.width, window.height);

      const frame = canvas.toDataURL("image/png");
      captureStream.getTracks().forEach(track => track.stop());
      var win = window.open();
      win.document.write('<iframe src="'   frame    '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');

    } catch (err) {
      console.error("Error: "   err);
    }
  };

В настоящее время создается расширение Chrome и реализуется функция скриншота. Проблема, с которой я сталкиваюсь с этим блоком кода, заключается в том, что он возвращает пустой экран всякий раз, когда я пытаюсь загрузить URL-адрес base64. Я провел некоторое исследование, чтобы показать, что Chrome предотвращает загрузку этих URL-адресов base64 из другого источника. Но, похоже, я не могу найти способ обойти это.

Комментарии:

1. iirc вы получите исключение, а не пустой результат, если он заблокирован.

2. @appleapple изначально я получил сообщение об ошибке «не разрешено переходить к верхнему фрейму по URL-адресу данных». Но я обновил код, который теперь возвращает пустой экран.

3. просто догадываюсь, но set video.srcObject = captureStream; немедленно обновляет контекст?

4. Я так считаю, да @appleapple