How to implement a webcam component gracefully and correctly?

I am trying to write a webcam component (https://playground.solidjs.com/anonymous/ea52969d-05f3-4da7-b171-1c4a76419fad ). But I am not sure how to stop the webcam stream that is loading when the component is unmounted. The code I implemented is something like this:

const owner = getOwner();
onCleanup(() => {
  runWithOwner(owner, () => {
    createEffect(
      on(
        () => state,
        () => {
          // perform cleanup
        },
      ),
    );
  });
});

const owner = getOwner();
onCleanup(() => {
  runWithOwner(owner, () => {
    createEffect(
      on(
        () => state,
        () => {
          // perform cleanup
        },
      ),
    );
  });
});

const owner = getOwner();
onCleanup(() => {
  runWithOwner(owner, () => {
    createEffect(
      on(
        () => state,
        () => {
          // perform cleanup
        },
      ),
    );
  });
});

const owner = getOwner();
onCleanup(() => {
  runWithOwner(owner, () => {
    createEffect(
      on(
        () => state,
        () => {
          // perform cleanup
        },
      ),
    );
  });
});

It seems to work correctly, but I am not very familiar with the mechanism of solid. Is there a better way to handle this situation? I would appreciate any suggestions or feedback.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

How to implement a webcam component gracefully and correctly?

Similar Threads

Similar Threads

Similar Threads