add native view for local video

Author: oliverlaz

packages/react-native-broadcast/README.md

@@ -10,14 +10,51 @@ npm install react-native-broadcast
 
 ## Usage
 
-```js
-import { multiply } from 'react-native-broadcast';
+### BroadcastVideoView Component
 
-// ...
+Display the local video preview from the broadcast mixer:
 
-const result = multiply(3, 7);
+```tsx
+import { BroadcastVideoView, multiply } from 'react-native-broadcast';
+import { View, StyleSheet, Button } from 'react-native';
+
+function App() {
+  const startBroadcast = async () => {
+    // This will initialize the mixer and start the RTMP broadcast
+    await multiply(3, 7);
+  };
+
+  return (
+    <View style={styles.container}>
+      <BroadcastVideoView style={styles.video} />
+      <Button title="Start Broadcast" onPress={startBroadcast} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  video: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+});
 ```
 
+### API
+
+#### `BroadcastVideoView`
+
+A native view component that displays the local video from the broadcast mixer.
+
+**Props:**
+
+- `style?: ViewStyle` - Standard React Native style prop
+
+The view automatically connects to the mixer when it becomes available after calling `multiply()` to start the broadcast.
+
 ## Contributing
 
 - [Development workflow](CONTRIBUTING.md#development-workflow)

packages/react-native-broadcast/ios/Broadcast.swift

@@ -3,6 +3,18 @@ import Foundation
 import HaishinKit
 import RTMPHaishinKit
 
+@objc
+public class BroadcastManager: NSObject {
+    @objc public static let shared = BroadcastManager()
+
+    var mixer: MediaMixer?
+    var audioSourceService: AudioSourceService?
+
+    private override init() {
+        super.init()
+    }
+}
+
 @objc
 public class BroadcastSwift: NSObject {
 
@@ -30,6 +42,10 @@ public class BroadcastSwift: NSObject {
                 videoMixerSettings.mode = .offscreen
                 await mixer.setVideoMixerSettings(videoMixerSettings)
 
+                // Store in manager for video view access
+                BroadcastManager.shared.mixer = mixer
+                BroadcastManager.shared.audioSourceService = audioSourceService
+
                 print("[RTMP] Mixer created")
 
                 let front = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: .front)
@@ -75,3 +91,4 @@ public class BroadcastSwift: NSObject {
         }
     }
 }
+

packages/react-native-broadcast/ios/BroadcastVideoView.swift

@@ -0,0 +1,65 @@
+import AVFoundation
+import Foundation
+import HaishinKit
+import UIKit
+
+@objc(BroadcastVideoView)
+public class BroadcastVideoView: UIView {
+
+    private var hkView: MTHKView?
+    private var isAttached = false
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupView()
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setupView()
+    }
+
+    private func setupView() {
+        backgroundColor = .black
+
+        // Create HKView for displaying HaishinKit video
+        let hkView = MTHKView(frame: bounds)
+        hkView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        hkView.videoGravity = .resizeAspectFill
+        addSubview(hkView)
+        self.hkView = hkView
+
+        print("[BroadcastVideoView] View initialized")
+
+        // Try to attach mixer if available
+        tryAttachMixer()
+    }
+
+    private func tryAttachMixer() {
+        guard !isAttached, let mixer = BroadcastManager.shared.mixer else {
+            // Schedule retry if mixer not ready yet
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [weak self] in
+                self?.tryAttachMixer()
+            }
+            return
+        }
+
+        Task { @MainActor in
+            guard let hkView = self.hkView else { return }
+//            await hkView.attachStream(mixer)
+            await mixer.addOutput(hkView)
+            self.isAttached = true
+            print("[BroadcastVideoView] Mixer attached to view")
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        hkView?.frame = bounds
+    }
+
+    deinit {
+        print("[BroadcastVideoView] View deinitialized")
+    }
+}
+

packages/react-native-broadcast/ios/BroadcastVideoViewManager.m

@@ -0,0 +1,6 @@
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(BroadcastVideoViewManager, RCTViewManager)
+
+@end
+

packages/react-native-broadcast/ios/BroadcastVideoViewManager.swift

@@ -0,0 +1,17 @@
+import Foundation
+import React
+
+@objc(BroadcastVideoViewManager)
+class BroadcastVideoViewManager: RCTViewManager {
+
+    override func view() -> UIView! {
+        let view = BroadcastVideoView()
+        print("[BroadcastVideoViewManager] View created")
+        return view
+    }
+
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+}
+

packages/react-native-broadcast/src/BroadcastVideoView.tsx

@@ -0,0 +1,16 @@
+import { requireNativeComponent, type ViewStyle } from 'react-native';
+
+export interface BroadcastVideoViewProps {
+  style?: ViewStyle;
+}
+
+interface NativeBroadcastVideoViewProps {
+  style?: ViewStyle;
+}
+
+const NativeBroadcastVideoView =
+  requireNativeComponent<NativeBroadcastVideoViewProps>('BroadcastVideoView');
+
+export const BroadcastVideoView = ({ style }: BroadcastVideoViewProps) => {
+  return <NativeBroadcastVideoView style={{ flex: 1, ...style }} />;
+};

packages/react-native-broadcast/src/index.tsx

@@ -3,3 +3,6 @@ import Broadcast from './NativeBroadcast';
 export function multiply(a: number, b: number): Promise<number> {
   return Broadcast.multiply(a, b);
 }
+
+export { BroadcastVideoView } from './BroadcastVideoView';
+export type { BroadcastVideoViewProps } from './BroadcastVideoView';

sample-apps/react-native/dogfood/App.tsx

@@ -34,6 +34,7 @@ import { NavigationHeader } from './src/components/NavigationHeader';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Alert, LogBox } from 'react-native';
 import { LiveStream } from './src/navigators/Livestream';
+import { RTMP } from './src/navigators/RTMP';
 import PushNotificationIOS from '@react-native-community/push-notification-ios';
 import {
   defaultTheme,
@@ -44,7 +45,6 @@ import {
 } from '@stream-io/video-react-native-sdk';
 import Toast from 'react-native-toast-message';
 import { appTheme } from './src/theme';
-import { multiply } from '@stream-io/video-react-native-broadcast';
 
 // only enable warning and error logs from webrtc library
 Logger.enable(`${Logger.ROOT_PREFIX}:(WARN|ERROR)`);
@@ -87,10 +87,6 @@ const StackNavigator = () => {
     };
   }, []);
 
-  useEffect(() => {
-    multiply(3, 7).then((r) => console.log(`OL: multiply ${r}`));
-  }, []);
-
   let mode;
   switch (appMode) {
     case 'Meeting':
@@ -129,6 +125,15 @@ const StackNavigator = () => {
         />
       );
       break;
+    case 'RTMP':
+      mode = (
+        <Stack.Screen
+          name="RTMP"
+          component={RTMP}
+          options={{ headerShown: false }}
+        />
+      );
+      break;
     case 'None':
       mode = (
         <Stack.Screen

sample-apps/react-native/dogfood/src/contexts/AppContext.tsx

@@ -1,6 +1,12 @@
 import createStoreContext from './createStoreContext';
 
-export type AppMode = 'Meeting' | 'Call' | 'Audio-Room' | 'LiveStream' | 'None';
+export type AppMode =
+  | 'Meeting'
+  | 'Call'
+  | 'Audio-Room'
+  | 'LiveStream'
+  | 'RTMP'
+  | 'None';
 export type ThemeMode = 'dark' | 'light';
 
 type AppGlobalStore = {

sample-apps/react-native/dogfood/src/navigators/RTMP.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { RTMPParamList } from '../../types';
+import { RTMPBroadcastScreen } from '../screens/RTMPBroadcastScreen';
+
+const RTMPStack = createNativeStackNavigator<RTMPParamList>();
+
+export const RTMP = () => {
+  return (
+    <RTMPStack.Navigator>
+      <RTMPStack.Screen
+        name="RTMPBroadcast"
+        component={RTMPBroadcastScreen}
+        options={{ headerShown: false }}
+      />
+    </RTMPStack.Navigator>
+  );
+};