Estoy tratando de dibujar el contenido de una etiqueta SVG en un lienzo, luego obtener la transmisión y generar un video del SVG animado. Esta función funcionaba correctamente en mi aplicación hasta hace unos meses. No puedo identificar qué está causando que falle ahora. No tengo este problema en Firefox, solo en Chrome.

Después de algunas horas de depuración, ahora creo que de alguna manera, cuando dibujo la imagen en el lienzo, la contamina. Cuando un lienzo está contaminado, no hay forma de recuperar los datos después. Aquí está la función que se basa en el lienzo:

 DrawToCanvas(node) { var serializer = new XMLSerializer(); var source = serializer.serializeToString(node); // node is the SVG node with the animated content var cv = this.Elem("canvas"); // this.Elem("canvas") returns the canvas node // create a file blob of our SVG. var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' }); var url = window.URL.createObjectURL(blob); var ctx = cv.getContext('2d'); var img = new Image(); img.onload = function() { ctx.fillStyle = "#f9f9f9"; ctx.fillRect(0, 0, cv.getAttribute("width"), cv.getAttribute("height")); ctx.drawImage(img, 0, 0, cv.getAttribute("width"), cv.getAttribute("height")); // In the console, if I call ctx.captureStream() here, I get an error: Uncaught DOMException: // Failed to execute 'captureStream' on 'HTMLCanvasElement': Canvas is not origin-clean. window.URL.revokeObjectURL(url); } img.src = url; }

En otra parte de la aplicación, creo un MediaRecorder desde el flujo de lienzo. El usuario lo inicia y lo detiene con un botón. Cada vez que se activa la disponibilidad de datos, el tamaño de los datos es 0.

 this.recorder = new MediaRecorder(canvas.captureStream(), { mimeType: 'video/webm' }); // init the recorder this.recorder.ondataavailable = (function(ev) { if (ev.data && ev.data.size > 0) this.chunks.push(ev.data); }).bind(this);

¿Por qué una imagen creada por la ventana contaminaría el lienzo? ¿Puede alguien mostrarme lo que estoy haciendo mal? Gracias.