useStartVideo
function useStartVideo(options): {
mergedProps: ButtonHTMLAttributes<HTMLButtonElement> & {
className: string;
onClick: () => void;
style: {
display: string;
};
};
canPlayVideo: boolean;
};Defined in: packages/react/src/hooks/device/useStartVideo.ts:40
Note. This feature is experimental and may change or be removed based on developer feedback and real-world usage. In some browsers to start video playback in low power mode, the user must perform a user-initiated event such
Parameters
| Parameter | Type |
|---|---|
options | UseStartVideoOptions |
Returns
{
mergedProps: ButtonHTMLAttributes<HTMLButtonElement> & {
className: string;
onClick: () => void;
style: {
display: string;
};
};
canPlayVideo: boolean;
}mergedProps
mergedProps: ButtonHTMLAttributes<HTMLButtonElement> & {
className: string;
onClick: () => void;
style: {
display: string;
};
};Type Declaration
className
className: string;onClick
onClick: () => void;Returns
void
style
style: {
display: string;
};style.display
display: string;canPlayVideo
canPlayVideo: boolean;Example
// Basic — merge start-video behavior into a button.
const { mergedProps, canPlayVideo } = useStartVideo({ props: { children: "Start video" } });
// Advanced — resume video playback from a user gesture.
function StartVideoButton() {
return (
<VoiceRoom agent={agent}>
<VideoGate />
</VoiceRoom>
);
}
function VideoGate() {
const { mergedProps, canPlayVideo } = useStartVideo({
props: { className: "lk-button", children: "Start video" },
});
return !canPlayVideo ? <button {...mergedProps} /> : <span>Video ready</span>;
}