Studio Kit
A browser-based JavaScript SDK for API.stream.
The 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.
This is a simple and opinionated interface for API.stream services. It implements the API.stream SDK.
š Read the documentation
š View the live demo
View demo code
Installation
npm install @api.stream/studio-kit
Features
Developers using the Studio Kit will have access to:
- Drop-in stream canvas
- Configurable drag-and-drop controls
- Built-in animations and transitions
- Support for custom stream layouts
- Support for custom themes and presets
- Support for webcam + screenshare for a host and any number of guests
- Simple state hooks designed for interplay with popular frontend frameworks
Users of a website implementing the Studio Kit will be able to:
- Create and manage multiple projects
- Invite guests to appear on stream
- Select from custom themes and layouts
- Set up a professional-looking stream in minutes
- Go live to multiple destinations at the same time
- Add cameras and screenshares and switch between layouts in real time
Quick start
Initialize the SDK
import * as StudioKit from '@api.stream/studio-kit'
const studio = await StudioKit.init()
const user = await studio.load(ACCESS_TOKEN)
Note: ACCESS_TOKEN should be granted as part of your user login flow.
Receive this token on the backend by using the API.stream SDK.
Example - Retrieve an access token
Monitor events and updates
studio.subscribe((event, payload) => {
handleEvent(event, payload)
render(state)
})
const handleEvent = (event, payload) => {
if (event === 'BroadcastStarted') {
setIsLive(true)
} else if (event === 'BroadcastStopped') {
setIsLive(false)
}
}
Create a project
A project represents a single broadcast setup.
const { ScenelessProject } = SDK.Helpers
const project = await ScenelessProject.create()
await studio.Command.setActiveProject({ projectId: project.id })
const projectCommands = ScenelessProject.commands(project)
const room = await activeProject.joinRoom({ displayName })
Add Guests
Now that we have a WebRTC room, let's invite some guests to join our broadcast.
The first step is to create a link for each guest to join with.
const baseUrl = 'https://yourwebsite.com/guest'
const guestLink = await studio.createGuestLink(baseUrl, {
projectId: project.id,
})
Note: We can also use the Studio.createGuestToken method
On 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.
Guest Page (React)
import { init, Helpers, SDK } from '@api.stream/studio-kit'
const { useStudio, StudioProvider, useDevices } = Helpers.React
const GuestApp = ({ children }) => (
<StudioProvider>
{children}
</StudioProvider>
)
const GuestCompoent = () => {
const { studio, project, room, setStudio, setProject, setRoom, webcamId, microphoneId, setWebcamId, setMicrophoneId } = useStudio()
useEffect(() => {
init().then(setStudio)
}, [])
useEffect(() => {
if (!studio) return
if (studio.initialProject) {
setProject(studio.initialProject)
} else {
setError('Invalid token')
}
}, [studio])
useEffect(() => {
if (!project) return
project
.joinRoom({
displayName,
})
.then((room) => {
setJoining(false)
setRoom(room)
})
.catch((e) => {
setError(e.message)
})
}, [project])
const devices = useDevices(()
useEffect(() => {
if (!webcamId) setWebcamId(devices.webcams[0]?.deviceId)
}, [webcamId, devices])
useEffect(() => {
if (!microphoneId) setMicrophoneId(devices.microphones[0]?.deviceId)
}, [microphoneId, devices])
return (
<div>
{/* some react component here*/}
</div>
)
}
Now that the Guest has joined the room, let's return to the Host's page, and add the guest to our broadcast.
Adding Guest To The Broadcast (React)
const Participants = () => {
const { room, projectCommands } = useStudio()
const [participants, setParticipants] = useState<SDK.Participant[]>([])
useEffect(() => {
return room.useParticipants((participants) => {
setParticipants(participants)
projectCommands.pruneParticipants()
})
}, [])
return (
<div>
{participants.map((p) => (
<div>
{/* Include some other components to, say, display the participant's camera feed */}
<WebcamToggle participant={p} />
</div>
))}
</div>
)
}
const WebcamToggle = ({ participant }) => {
const { id } = participant
const { projectCommands } = useStudio()
const projectParticipant = useMemo(
() => projectCommands.getParticipantState(id, 'camera'),
[],
)
const [onStream, setOnStream] = useState(Boolean(projectParticipant))
const [isMuted, setIsMuted] = useState(projectParticipant?.isMuted ?? false)
const [volume, setVolume] = useState(projectParticipant?.volume ?? 1)
const [isShowcase, setIsShowcase] = useState(false)
useEffect(() => {
return projectCommands.useParticipantState(
id,
(x) => {
setOnStream(Boolean(x))
},
'camera',
)
}, [])
useEffect(
() =>
projectCommands.useShowcase((showcase) => {
setIsShowcase(showcase.participantId === id && showcase.type === 'camera')
}),
[],
)
return (
<div>
<label>
<input
type="checkbox"
checked={onStream}
onChange={(e) => {
const checked = e.target.checked
if (checked) {
// Adds the participant's webcam and microphone to the broadcast
projectCommands.addParticipant(id, { isMuted, volume }, 'camera')
} else {
projectCommands.removeParticipant(id, 'camera')
}
setOnStream(checked)
}}
/>
On stream
</label>
<label style={{ opacity: onStream ? 1 : 0.7 }}>
<input
type="checkbox"
disabled={!onStream}
checked={isShowcase}
onChange={() => {
if (isShowcase) {
projectCommands.setShowcase(null)
} else {
projectCommands.setShowcase(id, 'camera')
}
}}
/>
Showcase
</label>
</div>
)
}
Configure a broadcast
With a project, we are ready to start configuring a broadcast.
const containerEl = document.querySelector('#some-container')
studio.render({
projectId: project.id,
containerEl,
dragAndDrop: true,
})
studio.Command.setDestination({
projectId: project.id,
rtmpUrl: 'rtmp://some-rtmp-url.com/',
rtmpKey: 'some_stream_key_123',
})
Start a broadcast
Once a destination is set, the project is ready to go live.
studio.Command.startBroadcast({
projectId: project.id,
})
Authentication & Authorization
API.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.
Learn more about authentication with API.stream