0
109
VistasError NS no inicializado después de capturar lienzo html
Estoy tratando de grabar una animación svg usando javascript/html. Esto es lo que he intentado hasta ahora:
<canvas id="canv"> <svg width="370" height="370" viewBox="0 0 370 370" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- my svg is here, full code is below because i don't think it's important --> </svg> </canvas> <style> @keyframes animation{ from{ opacity: 0; transform: translateY(20%); }to{ opacity: 1; transform: translateY(0); } } #bubbles{ animation: animation 1s linear; } </style> <script> const canvas = document.getElementById("canv") var videoStream = canvas.captureStream(30); const render = () => { videoStream.getVideoTracks()[0].requestFrame(); } setInterval(render, 33) var mediaRecorder = new MediaRecorder(videoStream); var chunks = []; mediaRecorder.ondataavailable = function(e) { chunks.push(e.data); }; mediaRecorder.onstop = function(e) { var blob = new Blob(chunks, { 'type' : 'video/mp4' }); chunks = []; var videoURL = URL.createObjectURL(blob); video.src = videoURL; }; mediaRecorder.start(); setTimeout(() => { mediaRecorder.stop(); }, 1000) </script>Obtuve el código fuente de https://medium.com/@amatewasu/how-to-record-a-canvas-element-d4d0826d3591 y estoy usando Firefox. fuente completa: https://paste.gg/p/anonymous/89d475bc50bc469dad827a620d3f7c02
Problema: me sale este error y no se muestra nada: 
1 Respuestas
Responde la pregunta0
Debe inicializar un contexto en su lienzo antes de poder capturar una secuencia de él, para hacerlo, llame a su método getContext() .
Luego, necesitaría usar los métodos de ese contexto para dibujar algo en él, eso es lo que MediaStream capturará.
Agregar un elemento <svg> dentro de un lienzo no dibujará esa imagen SVG en el contexto del lienzo. Para dibujar una imagen SVG en un contexto 2D, generalmente pasaría por un elemento <img>, cargaría la imagen SVG como un documento independiente en este <img> y, cuando se cargara, dibujaría en el contexto 2D utilizando su método drawImage() . (cf. esta respuesta mía que muestra cómo hacerlo desde un <svg> en línea)
Sin embargo, drawImage() siempre dibuja solo el primer cuadro de una imagen animada, por lo que para su caso puede no ser tan útil.
De hecho, no existe una manera fácil de dibujar una animación SVG en un lienzo. Puede intentar producir un nuevo documento SVG independiente por cuadro manualmente, actualizar todos los estilos calculados o el estado SMIL y dibujarlo a través de un <img>. Pero la carga de la imagen será asíncrona, producirla puede requerir muchos cálculos, probablemente consumirá memoria y todo el proceso tiene grandes riesgos de desincronizarse con la animación real.
Una solución alternativa sería usar la API de dibujo del contexto 2D para reproducir el SVG, que al menos sería síncrono, por lo que hay menos riesgo de desincronización, pero un código más complejo de escribir (algunas bibliotecas como canvg pueden ayudar en esta tarea, aunque usted todavía tendría que encontrar la manera de extraer el estado actual de su animación en cada cuadro).