Uncaught TypeError: canvas.captureStream is not a function

Question

new to react, here i am getting live rtsp stream to canvas, i want to captureStream from it and change it to video tag, but for some reason when consoling captureStream i'm getting error: Uncaught TypeError: canvas.captureStream is not a function. I found some answers from stackoverflow but those had it working with one browser and not other, but in my case i am getting that error in every browser (chrome, firefox,safari ), any 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;

Alex Wayne · Answer 1 · 2022-02-23T23:36:26.543

1

Your ref starts out null, so you can't call any methods on it until it has a value. And you must access the current property to get the canvas out of your ref.

You handle this in the effect, but not in your code below the effect.

You also need to type your ref properly so typescript knows what element it's going to have in it.

const canvas = useRef<HTMLCanvasElement>(null);

In this case you can probably get away with calling captureStream with the ?. operator so it it will only be called if canvas exists.

var stream = canvas.current?.captureStream(25);
console.log('canvas element', stream);

Here's an example of a canvas streaming to a video tag.

You have to set the srcObject property of a video tag reference to the created stream. You also need the autoPlay attribute set so the video plays it's stream.

edited Feb 23 '22 at 23:36

answered Feb 23 '22 at 22:50

Alex Wayne

178,991
47
309
337

this is working because my question contains directing stream from canvas to video tag, could you add that also ? – walee Feb 23 '22 at 22:54
@walee I'm not sure what you mean. This addresses the `canvas.captureStream is not a function` error. I don't really know much about video streaming sadly, but I wanted to provide an answer to solves that error message. – Alex Wayne Feb 23 '22 at 22:59
i am using at the moment ' ' but i want to use instead, any idea how ? – walee Feb 23 '22 at 23:00
Passing a canvas ref to a ` – Alex Wayne Feb 23 '22 at 23:07
live stream plays at the moment in my canvas but i want that to play in video tag instead, maybe i should not use ref in video tag ? can you suggest a way doing that ? – walee Feb 23 '22 at 23:10
You need a ref to both. I've updated my answer with a working example. – Alex Wayne Feb 23 '22 at 23:36
i am doing exactly like you but my video tag is just black with same height and width as canvas stream – walee Feb 23 '22 at 23:52
import { loadPlayer } from 'rtsp-relay/browser'; const StreamVideo = () => { const canvasRef = useRef(null); const videoRef = useRef(null); useEffect(() => { if (!canvasRef.current) throw new Error('Ref is null'); loadPlayer({ url: 'ws://./api/stream', canvas: canvasRef.current, }); if (canvasRef.current && videoRef.current) { const stream = canvasRef.current.captureStream(); videoRef.current.srcObject = stream; } }, []); return (

);}; export... – walee Feb 23 '22 at 23:55

Uncaught TypeError: canvas.captureStream is not a function

1 Answers1