canvas.drawImage() - стрима
привет
у меня есть тег video, в нем блоб ссылка, видео отображает стрим, мне надо по клику кнопки в канвасе отрисовать текущий фрейм видео, не получается, кто то может сталкивался с таким? Что самое интересное, если взять прямую ссылку на фаил обычного ролика mp4 и вставить в видео тег, и после отрисовать его в канвасе, все отлично работает, а вот с блоб ссылкой не работает. Иными словами, как мне отрисовать фрейм с MediaSource? |
Цитата:
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>
|
то что вы показываете это прямая ссылка на видео, так то работает, но у меня стрим, я получаю чанки с сервака и запихиваю в буфер, через 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>
|
странно, я тоже использую хлс и тоже так же делал, но не делался снимок, что самое интересное
|
новая инфа, оказалось что такой косяк только в сафари, я в сафари просто девелопил все это дело, странное поведение, интересно узнать причину почему так
|
прошу топик закрыть, проблему решил, солюшин вот тут кроется
https://github.com/video-dev/hls.js/issues/1806 |
| Часовой пояс GMT +3, время: 15:01. |