soy nuevo en reaccionar, aquí obtengo una transmisión rtsp en vivo a canvas, quiero capturarStream de él y cambiarlo a una etiqueta de video, pero por alguna razón, cuando consuelo a captureStream, recibo un error: Uncaught TypeError: canvas.captureStream no es una función . Encontré algunas respuestas de stackoverflow, pero esas funcionaban con un navegador y no con otro, pero en mi caso recibo ese error en todos los navegadores (chrome, firefox,safari), ¿alguna idea?
import React, { useRef, useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import { loadPlayer } from 'rtsp-relay/browser'; const StreamVideo = () => { const canvas = useRef(null); useEffect(() => { if (!canvas.current) throw new Error('Ref is null'); loadPlayer({ url: 'ws://.../api/stream', canvas: canvas.current, }); }, []); var stream = canvas.captureStream(25); console.log('canvas element', stream); return ( <div > <canvas ref={canvas} /> <video /> </div> ); }; export default StreamVideo;Su ref comienza null , por lo que no puede llamar a ningún método hasta que tenga un valor. Y debe acceder a la propiedad current para sacar el lienzo de su ref.
Manejas esto en el efecto, pero no en tu código debajo del efecto.
También debe escribir su referencia correctamente para que TypeScript sepa qué elemento tendrá.
const canvas = useRef<HTMLCanvasElement>(null); En este caso, probablemente pueda salirse con la suya llamando a captureStream con el ?. operator por lo que solo se llamará si existe canvas .
var stream = canvas.current?.captureStream(25); console.log('canvas element', stream);Este es un ejemplo de un lienzo que se transmite a una etiqueta de video .
Debe establecer la propiedad srcObject de una referencia de etiqueta de video a la transmisión creada. También necesita establecer el atributo de reproducción autoPlay para que el video se reproduzca en su transmisión.