25.12.2019, 17:11
|
|
Профессор
|
|
Регистрация: 15.10.2011
Сообщений: 213
|
|
|
canvas.drawImage() - стрима
привет
у меня есть тег video, в нем блоб ссылка, видео отображает стрим, мне надо по клику кнопки в канвасе отрисовать текущий фрейм видео, не получается, кто то может сталкивался с таким?
Что самое интересное, если взять прямую ссылку на фаил обычного ролика mp4 и вставить в видео тег, и после отрисовать его в канвасе, все отлично работает, а вот с блоб ссылкой не работает.
Иными словами, как мне отрисовать фрейм с MediaSource?
Последний раз редактировалось czp, 25.12.2019 в 17:15.
|
|
25.12.2019, 18:09
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от 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>
|
|
25.12.2019, 18:16
|
|
Профессор
|
|
Регистрация: 15.10.2011
Сообщений: 213
|
|
|
то что вы показываете это прямая ссылка на видео, так то работает, но у меня стрим, я получаю чанки с сервака и запихиваю в буфер, через MediaSource, вот так уже не работает, потому что не прямая ссылка
|
|
25.12.2019, 19:47
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от czp
|
|
то что вы показываете это прямая ссылка на видео, так то работает, но у меня стрим, я получаю чанки с сервака и запихиваю в буфер, через MediaSource, вот так уже не работает, потому что не прямая ссылка
|
Я вам написал, как оно работает, а то каким образом вы получаете данные не имеет значение... Вот пример со «стримом»...
<body style="display: grid; grid-gap: 1em; justify-content: center; ">
<video id="video"></video>
<button id="button">Сделать снимок видео</button>
<canvas id="canvas"></canvas>
<dialog id="tapArea" hidden>Tap to play</dialog>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var hls = new Hls();
hls.loadSource('https://lsqvc1uscln-lh.akamaihd.net/i/lsqvc1uscln_01@809410/master.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play().catch(() => {
tapArea.hidden = false;
document.addEventListener("click", () => {
video.play();
tapArea.hidden = true;
}, { once: true });
});
});
/* функция «снимка видео» не поменялась */
button.onclick = () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);
}
</script>
|
|
25.12.2019, 19:56
|
|
Профессор
|
|
Регистрация: 15.10.2011
Сообщений: 213
|
|
|
странно, я тоже использую хлс и тоже так же делал, но не делался снимок, что самое интересное
|
|
25.12.2019, 21:54
|
|
Профессор
|
|
Регистрация: 15.10.2011
Сообщений: 213
|
|
|
новая инфа, оказалось что такой косяк только в сафари, я в сафари просто девелопил все это дело, странное поведение, интересно узнать причину почему так
Последний раз редактировалось czp, 25.12.2019 в 22:49.
|
|
|
|
