Display: none

[Tiaan3dts]

after calling my endpoint and loading the stream successfully, my stream still has the display: none styling. This does not happen when I am running the example but occurs when being used in another component. If I inspect the page and remove the display prop manually I can see the stream playing perfectly fine. Any idea what might be causing this?

[k-yle]

Hi, what browser are you using? the code to show the canvas uses a MutationObserver, which is supported in 97.6% of all browsers, but not in Opera Mini or ancient versions of IE.

For reference, this is the code that removes display: none:

https://github.com/k-yle/rtsp-relay/blob/e5d7d52/browser/index.js#L66

[Tiaan3dts]

Its very weird. There is no real difference in how I use it between the example that works and my application either. The only real difference is that I use a async function in my useEffect, even changing that back makes no difference. Here is my code just incase you see something weird. function Stream(props) {

const canvas = useRef(null);

const styles = {
    video: {
      backgroundColor: "#9E8D62",
      right: '0.25rem',
      bottom: '0.25rem',
      width: '20rem',
      height: '12rem',
      borderRadius: 5,
      filter: "drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.25))",
      display: 'block',

    }

};
useEffect(() => {
async function loadStream (){
if (!canvas.current) throw new Error('Ref is null');
console.log(canvas);
await loadPlayer({
url: props.streamURL,
canvas: canvas.current,
})}
loadStream()
}, []);

return (
  <>
    <canvas style={styles.video}ref={canvas} id='video'/>
  </>
)

};

[k-yle]

The only unusual thing is that const styles = { ... }; is declared within the component, which causes that object to be re-created on each render. Not sure if that is affecting the MutationObserver. You could try move the const styles = { ... }; declaration outside the component, or use a className instead... i'd be interested to see if that fixed the issue

[TzlilSwimmer123]

I am experiencing the same issue, chrome, not using style={...}

[abadrangui]

Experiencing same issue here. When stream is connected something changes "diplay" property to none;

i've just used simple boilerplate from examples

import { Button } from 'antd'
import Text from 'antd/lib/typography/Text'
import { useEffect, useRef } from 'react';
import { loadPlayer } from 'rtsp-relay/browser';

export default function Home() {
  const canvas = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvas.current) throw new Error('Ref is null');

    loadPlayer({
      url: 'ws://localhost:2000/api/stream',
      canvas: canvas.current,
    });
    canvas.current.style.display = 'flex';
  }, []);
  return (
    <main>
      <canvas
        style={{
          display: 'flex !important',
        }}
        ref={canvas}
      />
      <Text>Hello antd design</Text>
      <Button type="primary">Button</Button>
    </main>
  )
}

help needed pls

[TzlilSwimmer123]

@abadrangui I solved it at the moment with an hack using onSourceEstablished:

  onSourceEstablished: () => {
      canvas.current!.style.display= 'block'
  },

[abadrangui]

@TzlilSwimmer123 thank you very much, you made my day <3

[Fabioni]

I have the same problem just using the demo code