feat: enable HLS support on host end

GetStream · Oct 10, 2023 · 353b3e2 · 353b3e2
1 parent 8db1024
commit 353b3e2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/packages/react-native-sdk/src/components/Livestream/HostLiveStream/HostLiveStream.tsx b/packages/react-native-sdk/src/components/Livestream/HostLiveStream/HostLiveStream.tsx
@@ -32,6 +32,10 @@ export type HostLiveStreamProps = HostLiveStreamTopViewProps &
      * Component to customize the bottom view controls at the host's live stream.
      */
     HostLiveStreamControls?: React.ComponentType<HostLiveStreamControlsProps> | null;
+    /**
+     * Enable HTTP live streaming
+     */
+    hls?: boolean;
   };
 
 /**
@@ -48,6 +52,7 @@ export const HostLiveStream = ({
   LiveStreamMediaControls,
   onEndStreamHandler,
   onStartStreamHandler,
+  hls = false,
 }: HostLiveStreamProps) => {
   const {
     theme: { colors, hostLiveStream },
@@ -80,6 +85,7 @@ export const HostLiveStream = ({
           onStartStreamHandler={onStartStreamHandler}
           HostStartStreamButton={HostStartStreamButton}
           LiveStreamMediaControls={LiveStreamMediaControls}
+          hls={hls}
         />
       )}
     </SafeAreaView>

diff --git a/.../react-native-sdk/src/components/Livestream/LiveStreamControls/HostLiveStreamControls.tsx b/.../react-native-sdk/src/components/Livestream/LiveStreamControls/HostLiveStreamControls.tsx
@@ -22,6 +22,10 @@ export type HostLiveStreamControlsProps = HostStartStreamButtonProps & {
    * Component to customize the host's media control(audio/video) buttons.
    */
   LiveStreamMediaControls?: React.ComponentType<LiveStreamMediaControlsProps> | null;
+  /**
+   * Enable HTTP live streaming
+   */
+  hls?: boolean;
 };
 
 /**
@@ -32,6 +36,7 @@ export const HostLiveStreamControls = ({
   LiveStreamMediaControls = DefaultLiveStreamMediaControls,
   onEndStreamHandler,
   onStartStreamHandler,
+  hls = false,
 }: HostLiveStreamControlsProps) => {
   const {
     theme: { colors, hostLiveStreamControls },
@@ -49,6 +54,7 @@ export const HostLiveStreamControls = ({
           <HostStartStreamButton
             onEndStreamHandler={onEndStreamHandler}
             onStartStreamHandler={onStartStreamHandler}
+            hls={hls}
           />
         )}
       </View>

diff --git a/...s/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx b/...s/react-native-sdk/src/components/Livestream/LiveStreamControls/HostStartStreamButton.tsx
@@ -28,6 +28,10 @@ export type HostStartStreamButtonProps = {
    * @returns void
    */
   onEndStreamHandler?: () => void;
+  /**
+   * Enable HTTP live streaming
+   */
+  hls?: boolean;
 };
 
 /**
@@ -36,6 +40,7 @@ export type HostStartStreamButtonProps = {
 export const HostStartStreamButton = ({
   onEndStreamHandler,
   onStartStreamHandler,
+  hls,
 }: HostStartStreamButtonProps) => {
   const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
   const { useIsCallLive } = useCallStateHooks();
@@ -59,6 +64,9 @@ export const HostStartStreamButton = ({
     try {
       setIsAwaitingResponse(true);
       await call?.goLive();
+      if (hls) {
+        await call?.startHLS();
+      }
       setIsAwaitingResponse(false);
     } catch (error) {
       console.error('Error starting livestream', error);
@@ -71,7 +79,12 @@ export const HostStartStreamButton = ({
     }
     try {
       setIsAwaitingResponse(true);
-      await call?.stopLive();
+      if (hls) {
+        await call?.stopHLS();
+      } else {
+        await call?.stopLive();
+      }
+
       setIsAwaitingResponse(false);
     } catch (error) {
       console.error('Error stopping livestream', error);