/* question: can I send a canvas.captureStream() object to Mux? this plays the first frame and stops. It feels like it's one unknown config setting away from working... I could be wrong. */

// snippets of react code, paste in appropriate places in your demo code.
useEffect(() =>
...


    let realTracks = await getUserMedia({
      audio: true,
      video: true,
    });

    const localTracks = canvasStream.current.getTracks().map(t => {
      // @ts-ignore
      const payload = {
        tid: t.id,
        name: t.id,
        muted: true,
        type: t.kind == 'video' ? TrackKind.Video : TrackKind.Audio,
        source: t.kind == 'video' ? TrackSource.Camera : TrackSource.Microphone,
        height: t.getSettings().height || 100,
        width: t.getSettings().width || 100,
        metadata: {},
      }
      return new LocalTrack(payload, t, "synthetic");
    });

    console.log("tracks:", realTracks, localTracks);
    await localParticipant.publishTracks(localTracks);

/* above is my attempt to compare what the normal track marshalling spits out versus the shimmed LocalTrack constructor (aside: throws a type error in ts, and I couldn't find docs on this, but I presume the arguments here are LocalTrack(mapping, sourceObj, tagThatDoesNotMatter)*/


// the bit that draws a simple canvas for testing purposes
  const cancan = useRef<HTMLCanvasElement>();
  const canvasStream = useRef<MediaStream>();

  // draws a circle on the canvas on a setinterval just so that there's some movement in the canvas, to show it working.
  const drawSomething = () => {
    let c = cancan.current;
    const ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(Math.random()*100, Math.random()*100, 50, 0, 2 * Math.PI);
    ctx.stroke();
  }

  useEffect(() => {
    if (cancan.current) {
      let c = cancan.current;
      setInterval(() => {
        drawSomething()
      }, 2000);
      canvasStream.current = c.captureStream(30);
      console.log(canvasStream.current);
    }
  }, [cancan]);

// the canvas we want to stream
return (
      <canvas ref={cancan} style={{width:"400px", height:"225px", border: "1px solid red", backgroundColor:"#EEE"}} >
      </canvas>
)