Блог

Главная - Вопросы по программированию - Как вы воспроизводите холст в видеоэлементе?

Как вы воспроизводите холст в видеоэлементе?

#javascript #html #canvas #mediastream

#HTML #html5-холст #html5-видео

Вопрос:

Я просмотрел образец для потоковой передачи с холста на видеоэлемент, поэтому я вижу, что принцип работает, но я не могу заставить его воспроизводить / отображать статическое изображение в видео.

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

 const canvas = document.getElementById('viewport');
const context = canvas.getContext('2d');
const video = document.getElementById('videoPlayBack');

make_base();

function make_base() {
    base_image = new Image();
    base_image.onload = function () {
        context.drawImage(base_image, 0, 0);
    }
    base_image.src = "https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9";
}

const stream = canvas.captureStream(25);
video.srcObject = stream;  
 <canvas id="viewport"></canvas>
<video id="videoPlayBack" playsinline autoplay muted></video>

Ответ №1:

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

Держите холст незапятнанным, если вы хотите его транслировать:

 const canvas = document.getElementById('viewport');
const context = canvas.getContext('2d');
const video = document.getElementById('videoPlayBack');

make_base();

function make_base() {
  base_image = new Image();
  base_image.onload = function () {
    context.drawImage(base_image, 0, 0, 400, 300);
  }
  base_image.crossOrigin = "anonymous";
  base_image.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
}

const stream = canvas.captureStream(25);
video.srcObject = stream;  
 <canvas id="viewport" width="400" height="300"></canvas>
<video id="videoPlayBack" controls playsinline autoplay muted ></video>

Ответ №2:

Вы не сможете сохранить с холста, если вы рисуете на нем «не свои изображения», из-за модели безопасности canvas (в тот момент, когда вы рисуете на нем любое изображение, которое не имеет того же происхождения и явно не имеет заголовка CORS, который разрешает ваше использование, у вас больше нет доступа кпиксели — не через ImageData, не через toDataURL и т.д. и т.п.).

Чтобы предотвратить пометку холста как «испорченного», см. https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image о том, какими могут быть ваши варианты.