Question

我需要将mjpeg steam渲染为WebGL纹理，并随流自动更新。

使用Three.js，我发现了一种方法：将mjpeg流绘制到html画布中，并使用画布作为webgl纹理：

<canvas id="2d" width="512" height="512" style="display: none"></canvas>

<canvas id="3d" width="1000px" height="800px"></canvas>

_

import THREE from 'three'

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('3d') })
let scene, camera

const canvas2d = document.getElementById('2d')
const ctx = canvas2d.getContext("2d")

const img = new Image()
img.crossOrigin = 'anonymous'
img.src = 'http://localhost:8080'

const map = new THREE.Texture(canvas2d)
const material = new THREE.MeshBasicMaterial({ map: map })

const init = () => {
    scene = new THREE.Scene()

    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000)
    camera.position.set(0, 0, 5)
    scene.add(camera)

    const geometry = new THREE.TorusGeometry(1, 0.5, 16, 16)
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
}

const animate = () => {
    requestAnimationFrame(animate)

    // Update texture 
    ctx.drawImage(img, 0, 0, 500, 500)
    map.needsUpdate = true

    renderer.render(scene, camera)
}

init()
animate()

这可以在Safari中使用，但由于看起来像这个问题，我无法在Chrome中使用它：Chrome MJPEG CORS "invalid response" when img.crossOrigin="Anonymous"我尝试添加所有正确的标题，我尝试了一堆cors变通方法但Chrome总是认为2d画布已被污染，不会将其用作纹理。

将mjpeg流绘制成可在Chrome上运行的webgl纹理是否更好？

有没有更直接的方法来完成这一切而不是通过html画布？

使用MJPEG Stream作为WebGL纹理

0 个答案: