[TODO] Extend the Videostream Component to support broadcasting Twitch & Vimeo streams

[Dnouv]

Extend the Videostream component to support broadcasting of the Twitch and Vimeo Stream. Since it is pretty time-consuming to set up the local RTMP forests, it would be a great addition to be used as an option in place of a local stream video broadcast.

TODO:

• [ ] Twitch Stream integration This is where the twitch stream can be viewed on their platform, and only the section (Stream Preview) needs to be cloned over to the VideoStream component (the part where the Stream can be previewed, which is shown by a Black placeholder under the Stream preview in the following image).

• [ ] Vimeo Stream integration Please refer to this link for additional resources related to embedding the Vimeo Stream: https://vimeo.zendesk.com/hc/en-us/articles/360040837872-Embed-your-event-on-your-website

The resolving PR shall extend the Videostream component such that it can show any live Twitch or Vimeo stream on any page the component is rendered (for example here). The components shall take the arguments required to render an admin-controlled unique stream.

The end result should be like below

<Videostreamer
      poster={evePoster ? evePoster : "/gsocsmall.jpg"}
      service={"twitch"} // it can be twitch, vimeo or local
      src={streamLink}
      type="application/vnd.apple.mpegurl"
 />

Thank you!

Note. We are not replacing the local video component, and the resolving PR shall extend the existing component.

[VanshulB]

Hey, can I work on this issue? Please assign this issue to me.

[Dnouv]

Hey @VanshulB, it would be really helpful if you could explain the initial approach you plan to take on this issue. It is perfectly fine if it is not perfect, we can work together on it to make it perfect :)

Thank you!

[VanshulB]

Hey @Dnouv, I was thinking to embed the Twitch and Vimeo Player, in the videostream component, on the specified props one player would be rendered, I have read the docs of Twitch developers, they have created classes for Embedding Twitch player in your website, using that (and the parameters), I was thinking to work on this issue.

Please correct me if I am wrong somewhere. Thank you!

[Dnouv]

Ok, thank you for the reply; the initial approach sounds good. Can you please provide some additional technical details, for example, how you plan to integrate these classes into the existing VideoStreamer Component? What parameters will be required? Thanks!

[VanshulB]

Hello @Dnouv First of all, we must first include a JavaScript file from Twitch. After that, we'll create a div with an id. In order to define the properties that we want the player to adapt to, such as the player size, autoplay, muted etc (including the stream url), we must build an object using the Twitch.Player class and supply the id as one parameter and another as an options object in the constructor.