Html 使用MJPEG流作为WebGL纹理

我需要将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>

这在Safari中是可行的，但我无法在Chrome中实现这一点，因为这看起来像是一个问题：我尝试了添加所有正确的标题，并尝试了一系列cors解决方案，但Chrome始终认为2d画布已被污染，不会将其用作纹理

---

有没有更好的方法将mjpeg流绘制到webgl纹理中，也可以在Chrome上使用

---

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

您的服务器是否发送了@2pha？我想是的。我添加了

Access Control Allow Origin:

和

Access Control Allow Headers:Origin、X-request-With、Content Type、Accept

这在Safari和Firefox上都有效，但Chrome在将mjpeg绘制到2d画布中后仍将其标记为污染。这是一个愚蠢的检查，但您是否尝试清除缓存，原始标题可能仍在缓存中，并污染了您的画布。这方面有任何进展吗？我也有同样的问题。你的服务器发送了吗？@2pha我想是的。我添加了

Access Control Allow Origin:

和

Access Control Allow Headers:Origin、X-request-With、Content Type、Accept

这在Safari和Firefox上都有效，但Chrome在将mjpeg绘制到2d画布中后仍将其标记为污染。这是一个愚蠢的检查，但您是否尝试清除缓存，原始标题可能仍在缓存中，并污染了您的画布。这方面有任何进展吗？我也有同样的问题。

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()