\n )\n}\n```\n\nNow that the Guest has joined the room, let's return to the Host's page, and add the guest to our broadcast.\n\n###### Adding Guest To The Broadcast (React)\n\n```jsx\n\nconst Participants = () => {\n const { room, projectCommands } = useStudio()\n const [participants, setParticipants] = useState([])\n\n // Listen for room participants\n useEffect(() => {\n return room.useParticipants((participants) => {\n setParticipants(participants)\n // Prune non-existent guests from the project\n // Only the host can do this\n projectCommands.pruneParticipants()\n })\n }, [])\n\n return (\n
\n {participants.map((p) => (\n
\n {/* Include some other components to, say, display the participant's camera feed */}\n \n
\n ))}\n
\n )\n}\n\nconst WebcamToggle = ({ participant }) => {\n const { id } = participant\n const { projectCommands } = useStudio()\n\n // Get the initial props in case the participant is on stream\n const projectParticipant = useMemo(\n () => projectCommands.getParticipantState(id, 'camera'),\n [],\n )\n const [onStream, setOnStream] = useState(Boolean(projectParticipant))\n const [isMuted, setIsMuted] = useState(projectParticipant?.isMuted ?? false)\n const [volume, setVolume] = useState(projectParticipant?.volume ?? 1)\n const [isShowcase, setIsShowcase] = useState(false)\n\n // Monitor whether the participant has been removed from the stream\n // from some other means (e.g. dragged off canvas by host)\n useEffect(() => {\n return projectCommands.useParticipantState(\n id,\n (x) => {\n setOnStream(Boolean(x))\n },\n 'camera',\n )\n }, [])\n\n // Monitor the project's showcase to determine whether this\n // participant/camera is active\n useEffect(\n () =>\n projectCommands.useShowcase((showcase) => {\n setIsShowcase(showcase.participantId === id && showcase.type === 'camera')\n }),\n [],\n )\n return (\n
\n \n \n
\n )\n}\n```\n\n###### Configure a broadcast\n\nWith a project, we are ready to start configuring a broadcast.\n\n```typescript\n// Render the drop-in stream canvas into a DOM element of your choosing\nconst containerEl = document.querySelector('#some-container')\nstudio.render({\n projectId: project.id, // The project to render\n containerEl, // The element to render the preview into\n dragAndDrop: true, // Include drag 'n' drop functionality\n})\n\n// Configure a destination for the active project\nstudio.Command.setDestination({\n projectId: project.id,\n rtmpUrl: 'rtmp://some-rtmp-url.com/',\n rtmpKey: 'some_stream_key_123',\n})\n```\n\n###### Start a broadcast\n\nOnce a destination is set, the project is ready to go live.\n\n```typescript\nstudio.Command.startBroadcast({\n projectId: project.id,\n})\n```\n\n#### Authentication & Authorization\n\nAPI.stream relies heavily on modern JWT-based authentication flows. The backend authentication service issues JWTs which clients assert on subsequent API calls. Those JWTs include grants allowing clients to safely share projects with collaborators and guests.\n\n[Learn more about authentication with API.stream](https://www.api.stream/docs/api/auth/)\n","readmeFilename":"README.md"}
![\"API.stream\"](\"https://github.com/golightstream/api.stream-sdk/blob/main/build/logo-light.png?raw=true#gh-dark-mode-only\"){kind=logo}
\n![\"API.stream\"](\"https://github.com/golightstream/api.stream-sdk/blob/main/build/logo-dark.png?raw=true#gh-light-mode-only\"){kind=logo}
\n\n# Studio Kit\n\nA browser-based JavaScript SDK for API.stream.\n\nThe Studio Kit provides your users with everything they need to produce professional-looking live streams to any popular platform (Youtube, Facebook, Twitch, etc.) or custom destination.\n\nThis is a simple and opinionated interface for API.stream services. It implements the [API.stream SDK](https://github.com/golightstream/api.stream-sdk).\n\nš [Read the documentation](https://www.api.stream/docs/sdk/studiokit/docs/) \nš [View the live demo](https://live.api.stream/studiokit/example/)\n\n[View demo code](https://github.com/golightstream/api.stream-studio-kit/tree/main/examples/studio-kit-demo)\n\n----\n#### Installation\n\n```text\nnpm install @api.stream/studio-kit\n```\n\n#### Features\n\n**Developers** using the Studio Kit will have access to:\n\n- Drop-in stream canvas\n - Configurable drag-and-drop controls\n - Built-in animations and transitions\n- Support for custom stream layouts\n- Support for custom themes and presets\n- Support for webcam + screenshare for a host and any number of guests\n- Simple state hooks designed for interplay with popular frontend frameworks\n\n**Users** of a website implementing the Studio Kit will be able to:\n\n- Create and manage multiple projects\n- Invite guests to appear on stream\n- Select from custom themes and layouts\n- Set up a professional-looking stream in minutes\n- Go live to multiple destinations at the same time\n- Add cameras and screenshares and switch between layouts in real time\n----\n\n#### Quick start\n\n###### Initialize the SDK\n\n```typescript\nimport * as StudioKit from '@api.stream/studio-kit'\n\n// Initialize the SDK to receive a Studio object\nconst studio = await StudioKit.init()\n\n// Authenticate the user and fetch their projects\nconst user = await studio.load(ACCESS_TOKEN)\n```\n\n_Note: ACCESS_TOKEN should be granted as part of your user login flow. \nReceive this token on the backend by using the [API.stream SDK](https://github.com/golightstream/api.stream-sdk)._\n\n[Example - Retrieve an access token](https://github.com/golightstream/api.stream-sdk/tree/main/examples/js/backend-auth-grpcweb)\n\n###### Monitor events and updates\n\n```typescript\n// Listen for events to update state and re-render the UI\n\nstudio.subscribe((event, payload) => {\n handleEvent(event, payload) // Update some state\n render(state) // Render some UI (e.g. projects list)\n})\n\nconst handleEvent = (event, payload) => {\n if (event === 'BroadcastStarted') {\n setIsLive(true)\n } else if (event === 'BroadcastStopped') {\n setIsLive(false)\n }\n}\n```\n\n###### Create a project\n\nA project represents a single broadcast setup.\n\n```typescript\n// ScenelessProject includes utilities to assist with simple stream setup\nconst { ScenelessProject } = SDK.Helpers\n\n// Create a project with participant and overlay compatibility\nconst project = await ScenelessProject.create()\n\n// Activate our desired project, initializing event listeners\nawait studio.Command.setActiveProject({ projectId: project.id })\n\n// Wrap the project in an interface used to manage layout, \n// add participant video feeds, and change overlays\nconst projectCommands = ScenelessProject.commands(project)\n\n// Join the WebRTC room to begin sending and receiving video with guests\nconst room = await activeProject.joinRoom({ displayName })\n```\n\n###### Add Guests\n\nNow that we have a WebRTC room, let's invite some guests to join our broadcast.\nThe first step is to create a link for each guest to join with.\n\n```typescript\nconst baseUrl = 'https://yourwebsite.com/guest'\nconst guestLink = await studio.createGuestLink(baseUrl, {\n projectId: project.id,\n})\n```\n\n_Note: We can also use the Studio.createGuestToken method_\n\nOn the guest page, we can have the guest join the WebRTC room. Let's demonstrate how to accomplish this in the context of a React component.\n\n###### Guest Page (React)\n\n```jsx\nimport { init, Helpers, SDK } from '@api.stream/studio-kit'\nconst { useStudio, StudioProvider, useDevices } = Helpers.React\n\n// In order to make use of the helpful useStudio hook, our component must be a child of StudioProvider\nconst GuestApp = ({ children }) => (\n