Как вы играете холст в элементе видео? - PullRequest
Новая
       11

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

0 голосов
/ 28 апреля 2020

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

Вот мой код с изображением, заимствованным из 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 Ответ

0 голосов
/ 29 апреля 2020

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

Сохраните холст незапятнанным, если вы потянете его sh: 

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>
...