相关疑难解决方法(0)

我想每隔5秒从视频中捕捉一帧.

这是我的JavaScript代码:

video.addEventListener('loadeddata', function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    }, 300);
});

function generateThumbnail(i) {     
    //generate thumbnail URL data
    var context = thecanvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = thecanvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

我遇到的问题是生成的前两个图像是相同的,并且不生成持续时间为5秒的图像.我发现缩略图是在特定时间的视频帧显示在< video>标签之前生成的.

例如,当video.currentTime = 5生成帧0的图像时.然后视频帧跳到5秒.因此,当video.currentTime = 10 …

有没有办法确定在html视频元素中播放的内容的预期帧速率？

视频元素是否知道预期的FPS或帧数,或者只是"猜测"(可能是24fps)并以猜测的速度播放？

以下是我不成功的尝试:

• 在视频元素本身上寻找FPS或FrameCount属性 - 不!

• 查找有关FPS或FrameCount的跨视频格式标题信息 - 没有任何一致性!

• 寻找在换帧时触发的事件 - 不!

我的下一次尝试更复杂:通过捕获画布元素的帧来对视频进行采样,并通过确定像素何时发生变化来计算帧数.

在做复杂的尝试之前,有没有人有更简单的答案？

我正在编写一个在firefox中处理相机流视频的软件.

我正在生成一个 带有MediaRecorder API记录的视频类型的Blob.

我正在做什么来保存blob作为本地存储中的视频使用FileSaver库:

    FileSaver.saveAs(BlobVideo,"video.mp4");

看起来视频没有任何最大持续时间,因此我无法在我在VLC中新生成的视频中的时间轴中导航.

有没有办法在blob视频上设置持续时间metadatas？

我正在尝试构建一个从 JavaScript 视频中提取帧的函数。这是我想出的代码。该函数接收一个源和一个回调。从那里，我用源创建了一个视频，我想以设定的间隔在画布中绘制视频帧。

不幸的是，返回的帧都是透明图像。

我尝试了一些不同的东西，但我不能让它工作。有人可以帮忙吗？谢谢。

const extractFramesFromVideo = function(src, callback) {
  var video = document.createElement('video');
  video.src = src;

  video.addEventListener('loadeddata', function() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.setAttribute('width', video.videoWidth);
    canvas.setAttribute('height', video.videoHeight);

    var frames = [];
    var fps = 1; // Frames per seconds to
    var interval = 1 / fps; // Frame interval
    var maxDuration = 10; // 10 seconds max duration
    var currentTime = 0; // Start at 0

    while (currentTime < maxDuration) {
      video.currentTime = currentTime; …