Question

我正在运行mjpeg流光并尝试将流设置为three.js中的纹理。

我通过将其写入画布然后将画布作为纹理来完成此操作。但是，我得到了一个污点画布错误。

    add_test(NAME "name" COMMAND "testExe" "arg1" "arg2" "arg3")

我在服务器上添加了crossOrigin标题，它被收到：

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': 
Tainted canvases may not be loaded.

在客户端我添加了适当的crossOrigin属性

  Access-Control-Allow-Origin:*
  Content-type:multipart/x-mixed-replace; boundary=--jpgboundary
  Date:Tue, 04 Apr 2017 22:27:35 GMT
  Server:BaseHTTP/0.3 Python/2.7.9**strong text**

有没有人知道什么不在这里工作？

编辑：对不起我应该澄清一下，把它放在画布上工作正常，问题是当我尝试使用该画布作为纹理时，画布被污染而且失败

<p>Image to use:</p>
<img id="stream" crossorigin="anonymous" 
src="http://192.168.1.224:8080/cam.mjpg">


<p>Canvas:</p>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid 
#d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

function updateCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx2 = c.getContext("2d");
    var img = document.getElementById("stream");
    img.crossOrigin = "anonymous";
    ctx2.drawImage(img, 0, 0);
}

Answer 1

我没有看到您的代码无法正常工作的任何原因。设置img.crossOrigin没有意义，因为您的示例中已经下载了该图像。

使用imgur中的图像尝试它可行。这表明问题出在您的服务器上？

＆＃13;

function updateCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx2 = c.getContext("2d");
  var img = document.getElementById("stream");
  ctx2.drawImage(img, 0, 0);
  try {
    const d = c.toDataURL();
    log("canvas is not dirty, CORS permission received, it can be used in WebGL");
  } catch (e) {
    log("canvas IS dirty, no CORS permission, it can *NOT* be used in WebGL");
  }
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join("\n");
  document.body.appendChild(elem);
}


document.getElementById("stream").addEventListener('click', updateCanvas);

＆＃13;

img, canvas { width: 32px; }
p { margin: 0; }

＆＃13;

<p>Click the Image:</p>
<img id="stream" crossorigin="anonymous" src="https://i.imgur.com/TSiyiJv.jpg">


<p>Canvas:</p>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid 
#d3d3d3;">
</canvas>

＆＃13;

也许查看imgur的标题，看看有什么不同？

Answer 2

这是一个铬虫：

我必须在我的localhost上设置一个ffserver + mjpeg代理来确认这一点，但是， chrome不会对运动jpeg流上发出的请求保留crossOrigin标头...

Firefox没有这个错误，我也没有找到可靠的前端解决方法。

实际上我找到的唯一解决方法是使用代理，这对mjpeg流来说并不容易，但基于express-js的this one确实很有效。

但是，请注意，浏览器应该只在画布[specs]上绘制mjpeg流的第一帧，chrome也有错误，不要依赖于此，因为它可能会失败任何时间很快，他们会修复它。

修改

webgl＆＃39; texImage2d似乎与drawImage的动画图片具有相同的limitations。

因此，对于您的情况，甚至不要通过2D画布。您可以直接在<img>标记内使用mjpeg流，并将其用作更新纹理 （虽然你仍然需要使用chrome代理）

Cors污染帆布

2 个答案:

修改