|
Сообщение от czp
|
|
у меня есть тег video, в нем блоб ссылка, видео отображает стрим, мне надо по клику кнопки в канвасе отрисовать текущий фрейм видео, не получается, кто то может сталкивался с таким?
|
Вы можете передать для отрисовки на холсте в метод drawImage объекты следующих типов — HTMLImageElement, SVGImageElement,
HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas. Т. е. вам из объекта типа Blob нужно создать ссылку на него, которая будет указана у видео элемента, который и нужно передавать в качестве параметра методу drawImage
<body style="display: grid; grid-gap: 1em; justify-content: center; ">
<video controls autoplay muted loop id="video"></video>
<button id="button">Сделать снимок видео</button>
<canvas id="canvas"></canvas>
<script>
fetch("https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66%2FSampleVideo_360x240_1mb.mp4?v=1577286105646")
.then(response => response.blob())
.then(blob => video.src = URL.createObjectURL(blob));
button.onclick = () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);
}
</script>