Live Streaming

1import { BaxCloudClient } from '@baxcloud/react-sdk';
2import { useState } from 'react';
3
4const LiveStreamHost = () => {
5  const [client, setClient] = useState<BaxCloudClient | null>(null);
6  const [isLive, setIsLive] = useState(false);
7
8  const goLive = async () => {
9    const baxClient = new BaxCloudClient({
10      projectId: 'your-project-id',
11      apiKey: 'your-api-key',
12    });
13
14    // Connect as host
15    await baxClient.connect({
16      roomName: 'my-live-stream',
17      liveType: 'live_streaming',
18      participant: {
19        userId: 'host-123',
20        name: 'Stream Host',
21        avatarUrl: 'https://example.com/avatar.jpg',
22        isHost: true,
23      },
24    });
25
26    // Enable camera and microphone
27    await baxClient.enableCamera();
28    await baxClient.enableMicrophone();
29
30    // Optional: Start cloud recording
31    const recording = await baxClient.startRecording({
32      roomName: 'my-live-stream',
33      fileType: 'MP4',
34    });
35
36    setClient(baxClient);
37    setIsLive(true);
38  };
39
40  const endStream = async () => {
41    if (client) {
42      await client.stopRecording(recording.egressId);
43      await client.disconnect();
44    }
45    setIsLive(false);
46  };
47
48  return (
49    <div>
50      {!isLive ? (
51        <button onClick={goLive}>Go Live</button>
52      ) : (
53        <button onClick={endStream}>End Stream</button>
54      )}
55    </div>
56  );
57};

1import { BaxCloudClient } from '@baxcloud/react-sdk';
2import { useState } from 'react';
3
4const LiveStreamViewer = () => {
5  const [client, setClient] = useState<BaxCloudClient | null>(null);
6  const [isWatching, setIsWatching] = useState(false);
7
8  const joinStream = async () => {
9    const baxClient = new BaxCloudClient({
10      projectId: 'your-project-id',
11      apiKey: 'your-api-key',
12    });
13
14    // Connect as viewer
15    await baxClient.connect({
16      roomName: 'my-live-stream',
17      liveType: 'live_streaming',
18      participant: {
19        userId: 'viewer-456',
20        name: 'John Viewer',
21        avatarUrl: 'https://example.com/avatar.jpg',
22        isHost: false,
23      },
24    });
25
26    setClient(baxClient);
27    setIsWatching(true);
28  };
29
30  const leaveStream = async () => {
31    await client?.disconnect();
32    setIsWatching(false);
33  };
34
35  return (
36    <div>
37      {!isWatching ? (
38        <button onClick={joinStream}>Watch Stream</button>
39      ) : (
40        <button onClick={leaveStream}>Leave</button>
41      )}
42    </div>
43  );
44};

1// Monitor network quality
2const quality = controller.getNetworkQuality();
3console.log('Connection quality:', quality.connectionQuality);
4console.log('RTT:', quality.rtt);
5console.log('Packet loss:', quality.packetLoss);
6
7// Listen for quality changes
8controller.onNetworkQualityChanged((quality) => {
9  if (quality.connectionQuality === 'poor') {
10    console.warn('Stream quality is degraded. Check your internet connection.');
11  }
12});