gpt4 book ai didi

javascript - 如何从组件 获取帧

转载 作者:行者123 更新时间:2023-12-02 23:57:21 28 4
gpt4 key购买 nike

我想从 HTML 获取框架 <video></video> javascript 中的组件,以便我可以处理它们然后输出到 Canvas

最佳答案

看看这个代码笔:Demo

var videoId = 'video';
var scaleFactor = 0.25;
var snapshots = [];

/**
* Captures a image frame from the provided video element.
*
* @param {Video} video HTML5 video element from where the image frame will be captured.
* @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
*
* @return {Canvas}
*/
function capture(video, scaleFactor) {
if (scaleFactor == null) {
scaleFactor = 1;
}
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}

/**
* Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
*/
function shoot() {
var video = document.getElementById(videoId);
var output = document.getElementById('output');
var canvas = capture(video, scaleFactor);
canvas.onclick = function() {
window.open(this.toDataURL(image/jpg));
};
snapshots.unshift(canvas);
output.innerHTML = '';
for (var i = 0; i < 4; i++) {
output.appendChild(snapshots[i]);
}
}

(function() {
var captureit = document.getElementById('cit');
captureit.click();
})();

将视频网址更改为:http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4并且您有一个现场演示示例

关于javascript - 如何从组件 <video></video> 获取帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55314695/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com