Skip to content

Latest commit

 

History

History
102 lines (63 loc) · 6.66 KB

README.md

File metadata and controls

102 lines (63 loc) · 6.66 KB
Raw

Day of Event Components Setup

Day of Event Setup (Optional)

** If you are not working on anything related to the Mainstage or Greenroom Page, please feel free to skip this setup.

Note: Please restart the client-side application after any of the following changes

Embedded Chat

RC4Conferences integrates the RC Embedded Chat Component to enable smooth and real-time communication during the live conferences, between the Speakers and the Event Attendees.

For trying out the Embedded Chat in RC4Conferences, please setup the Embedded Chat by following the instructions here from the steps mentioned in there note down the Google Cloud Client ID and the Rocket Chat instance url. Now after getting the Google Cloud Client ID and the Rocket Chat instance url paste them in the app/.env with the following key name,

NEXT_PUBLIC_GOOGLE_CLIENT_ID="your google client id"
NEXT_PUBLIC_RC_URL="your url of the RC instance"
NEXT_PUBLIC_RC_ROOM_ID="public channel room id"

The NEXT_PUBLIC_RC_ROOM_ID defaults to "GENERAL".

GreenRoom Setup

In RC4Conferences, the greenroom page is the space where Event Speakers come together, and speak. Speaker interface is built on top of Jitsi React SDK. Jitsi provides a way to stream the call over RTMP, to setup we require a RTMP server URI (e.g., rtmp://live.rconf.shop), add this to the app/.env as:

NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RTMP="rtmp url to broadcast the stream"

To get the RTMP URI please follow the steps here.

Mainstage Setup

On Mainstage page, during the conference, the attendees view the stream of Speakers talk received from the Greenroom Page.

If you are using a RTMP forest then, first you need to add the service prop as service={"local"} in the Vidoestream tag in the Mainstage component /app/components/conferences/dayOfEvent/mainstage/Mainstage.js, Stream data from Jitsi is sent to the RTMP forest, and from there we can have multiple relays, for example, "Singapore Relay" and "North America Relay". To get the setup right, please enter this two relay links in the app/.env as

NEXT_PUBLIC_SERVER_STREAM_LINK0="Relay link"
NEXT_PUBLIC_SERVER_STREAM_LINK1="Any other region relay link"

In order to provide a better stream to the attendees, based on their proximate distance to the relay region, the attendees are served the content based on their IP address. For locating users based on their IP address, RC4Conferences makes use of IPinfo API service, to get started, follow this link from the point number 3, copy the "Access key"/"Token Number" and paste in the app/.env as,

NEXT_PUBLIC_IPINFO_TOKEN="token from ipinfo"

If you are using Twitch RTMP URI then in order to view the stream you need to add the service prop as service={"twitch"} your Twitch username in the src prop of the Videostream tag in the Mainstage component /app/components/conferences/dayOfEvent/mainstage/Mainstage.js.

If you are developing the project on a Virtual Machine, you must set the NEXT_PUBLIC_TWITCH_PARENT_KEY environment variable to the IP address of the Virtual Machine. For the production environment, the domain name where the website will be hosted must be specified as the value of the NEXT_PUBLIC_TWITCH_PARENT_KEY environment variable, if not specified, the default value is set to localhost. This ensures that the embedded Twitch content is only displayed within the intended environment. If using multiple domains/IP separate them with a comma.

Else if you are using Vimeo RTMP URI then then in order to view the stream you need to add the service prop as service={"vimeo"} your Vimeo live event link in the src prop of the Videostream tag in the Mainstage component /app/components/conferences/dayOfEvent/mainstage/Mainstage.js. It will be in the format of https://vimeo.com/webinars/events/{Random-String}/embed

Note: The embedded player will not load when using the Vimeo RTMP URI (Start Free Demo), as the viewing of that event is private and is limited to your viewing only. In order to broadcast using Vimeo and have that stream be visible to the public, you must subscribe to their premium service. As a result, using the Vimeo Free Demo won't function because the event's viewership is not public.

Congratulations! 🎉 You have successfully setup the Day of Event Components.

fun-try: Visit here to find Good first issues. Or append a /contribute at the end of any GitHub repository to find'em anytime.

Once all the environment variables are set stop the NextJS and re-run the following script to start the Client-side NextJS.

sh startNext.sh localhost

sh startNextGp.sh localhost (Only for Gitpod Users)

Note: Please replace the "localhost" (127.0.0.1) with your static IP if you are doing environment setup on your VM. For e.g. 173.456.1.19

RTMP Server URI

Twitch RTMP URI

Steps to get a RTMP server URI on Twitch:

  1. Go here and choose the best server, which would be at the top of the list of items which would be for me rtmp://bom01.contribute.live-video.net/app/{stream_key}
  2. Replace the stream_key with the key you get from here it would be a long string e.g., live_782944617_qB6DwHtSgAMc5i9Vf2kuW21tJwIHZb
  3. Now the stream URI becomes rtmp://bom01.contribute.live-video.net/app/live_782944617_qB6DwHtSgAMc5i9Vf2kuW21tJwIHZb, which you will use for NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RTMP.

Vimeo RTMP URI

To get the RTMP URI on the Vimeo platform, follow the steps mentioned in their article it is explained the best in there.

Now, since these custom RTMP URIs are provided by a third-party service, any stream you do on the greenroom page will be visible on the Twitch, Vimeo dashboard. We are open to contributions for embedding this stream e.g., Twitch, Vimeo in RC4Conferences.

Thank you!