Question

我正在尝试在javascript中实现延迟的网络摄像头查看器，使用Three.js来实现WebGL功能。

我需要存储从网络摄像头抓取的帧，因此可以在一段时间后显示它们（几毫秒到几秒）。我可以使用canvas和getImageData()在没有Three.js的情况下执行此操作。您可以找到an example on jsfidle。

我正在尝试在没有画布的情况下找到一种方法，但是使用Three.js Texture或DataTexture对象。 Here an example of what I'm trying。问题是我找不到如何将图像从Texture（image类型为HTMLVideoElement）复制到另一个。

在rotateFrames()函数中，较旧的帧应该丢失，更新的帧应该更换，就像在FIFO中一样。但行

frames[i].image = frames[i + 1].image;

只是复制引用，而不是纹理数据。我想DataTexture应该这样做，但我无法从DataTexture或Texture中获得HTMLVideoElement。

有什么想法吗？

警告：您必须拥有一台摄像头并允许浏览器使用它来运行示例。显然，您必须拥有更新的浏览器。

Answer 1

这是你想要的吗？

http://fiddle.jshell.net/m4Bh7/10/

编辑：

function onFrame(dt) {
    if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */
        context.drawImage(video, 0, 0,videoWidth,videoHeight);
        frames[framesNum - 1].image.data = new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer);
        frames[framesNum - 1].needsUpdate = true;
    }
}

这是最重要的部分：它创建框架的副本并将其作为数据保存在dataTexture中。

function rotateFrames() {
    for (var i = 0; i != framesNum - 1; ++i) {
/*
         * FIXME: this does not work!
         */
        frames[i].image.data = frames[i + 1].image.data;
        frames[i].needsUpdate = true;
    }
}

然后将数据从纹理复制到帧中的纹理。

新版本：http：//fiddle.jshell.net/hWL2E/4/

function onFrame(dt) {
    if (video.readyState === video.HAVE_ENOUGH_DATA) { /* new frame available from webcam */
        context.drawImage(video, 0, 0,videoWidth,videoHeight);
         var frame = new THREE.DataTexture(new Uint8Array(context.getImageData(0,0,videoWidth, videoHeight).data.buffer) ,videoWidth,videoHeight);
        frames[framesNum - 1] = frame;
        frames[framesNum - 1].needsUpdate = true;
        sprites[framesNum - 1].map = frames[framesNum - 1];
    }
}

它为视频图像的每一帧生成一个新纹理。

function rotateFrames() {
    for (var i = 0; i != framesNum - 1; ++i) {
/*
         * FIXME: this does not work!
         */
        frames[i] = frames[i + 1];
        sprites[i].map = frames[i];

    }
}

这就是让它变得更好的原因。因为它重用了所使用的纹理，意味着它不需要重新发送到GPU。

Three.js：纹理到datatexture

1 个答案: