Live streaming

import { useLiveStreaming } from '@daily-co/daily-react';

function StreamButton({ rtmpUrl }) {
  const { isLiveStreaming, startLiveStreaming, stopLiveStreaming } = useLiveStreaming();

  const start = () =>
    startLiveStreaming({
      rtmpUrl,
      layout: { preset: 'default' },
    });

  return (
    <button onClick={() => (isLiveStreaming ? stopLiveStreaming() : start())}>
      {isLiveStreaming ? 'Stop stream' : 'Go live'}
    </button>
  );
}

import { usePermissions, useLiveStreaming } from '@daily-co/daily-react';

function StreamControls({ rtmpUrl }) {
  const { canAdminStreaming } = usePermissions();
  const { isLiveStreaming, startLiveStreaming, stopLiveStreaming } = useLiveStreaming();
  if (!canAdminStreaming) return null;
  return (
    <button
      onClick={() =>
        isLiveStreaming ? stopLiveStreaming() : startLiveStreaming({ rtmpUrl })
      }
    >
      {isLiveStreaming ? 'Stop' : 'Go live'}
    </button>
  );
}

import { useCallback, useState } from 'react';
import { useLiveStreaming } from '@daily-co/daily-react';

function StreamStatus() {
  const [error, setError] = useState(null);

  const { isLiveStreaming } = useLiveStreaming({
    onLiveStreamingStarted: useCallback(() => setError(null), []),
    onLiveStreamingError: useCallback((event) => setError(event.errorMsg), []),
    onLiveStreamingWarning: useCallback((event) => console.warn(event), []),
  });

  if (error) return <p role="alert">Live streaming error: {error}</p>;
  return <p>{isLiveStreaming ? '🔴 Live' : 'Offline'}</p>;
}

const { isLiveStreaming } = useLiveStreaming();                  // any active?
const mobile = useLiveStreaming({ instanceId: MOBILE_UUID });    // one instance