Stream tag in React/Vue/Angular?

Does anyone found a solution to display a video with the custom tag in a modern Front-end Framework ?!

Cloudflare Stream Team: it would be soooooo much easier for everyone if you use the official tag. Why did you choose ? And moreover: why at least not in the official custom tag format (e.g. ?

I have the same issue, Have you found any solution?

Hello,

I’m trying to add tag inside React component but I got this error:

The tag <stream> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Any idea to solve this? Thanks!

I’m in the same situation. I’m concerned that my only option will be to set the html using dangerouslySetInnerHTML. Any advice would be appreciated.

In case this helps you. This is a very rough solution that I’m working on. It is not ideal to say the least as we lose access to call methods and access events, but it is a start.

1 Like

solution by @larryb doesn’t seem to work(
i’m getting “Cannot read property ‘initElement’ of undefined” error while using his code
is there any other ideas of how to deal with stream and reactjs at the same time?

The times that I have seen this happen the cloudflare is library hadn’t been included in the page. This solution is completely dependent on the library having been included external to the react app.

this is what I use. Works great and also removes the stream tag error, but does so using brute force (React doesn’t let you suppress such errors).
Also has 0 dependencies.

https://gist.github.com/SimplyBallistic/9f49706f4757c1f8f4ceed28a7731986

Hey there!
Just wanted to update this post with news for others who might come here from a search.

We now do have an official React component: @cloudflare/stream-react - npm
And an official Angular component: @cloudflare/stream-angular - npm

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.