Implementing Screen Recording and Broadcast in Rork Max — A Production Guide for ReplayKit and MediaProjection

# From the project root
# Generate an Expo Module template (module name: expo-screen-recorder)
npx create-expo-module@latest expo-screen-recorder --no-example
cd expo-screen-recorder
 
# Add a local reference in your Rork Max project's package.json:
# "expo-screen-recorder": "file:../expo-screen-recorder"
# Expected output: a new module with ios/, android/, and src/ directories

// ios/ExpoScreenRecorderModule.swift
import ExpoModulesCore
import ReplayKit
import Photos
 
public class ExpoScreenRecorderModule: Module {
    private let recorder = RPScreenRecorder.shared()
 
    public func definition() -> ModuleDefinition {
        Name("ExpoScreenRecorder")
 
        // Start recording — caller specifies whether to capture mic
        AsyncFunction("startRecording") { (withMicrophone: Bool, promise: Promise) in
            guard self.recorder.isAvailable else {
                promise.reject("E_RECORDER_UNAVAILABLE",
                    "Recording is unavailable on this device or has been disabled in Control Center")
                return
            }
            self.recorder.isMicrophoneEnabled = withMicrophone
            self.recorder.startRecording { error in
                if let error = error {
                    promise.reject("E_RECORDING_FAILED", error.localizedDescription)
                } else {
                    promise.resolve(["status": "recording"])
                }
            }
        }
 
        // Stop recording — write to a temp file and return the URL
        AsyncFunction("stopRecording") { (promise: Promise) in
            let tempURL = FileManager.default.temporaryDirectory
                .appendingPathComponent("rork-recording-\(UUID().uuidString).mp4")
 
            self.recorder.stopRecording(withOutput: tempURL) { error in
                if let error = error {
                    promise.reject("E_STOP_FAILED", error.localizedDescription)
                    return
                }
                promise.resolve([
                    "status": "stopped",
                    "uri": tempURL.absoluteString,
                    "size": (try? FileManager.default.attributesOfItem(atPath: tempURL.path)[.size] as? Int) ?? 0
                ])
            }
        }
 
        // Save to Photos
        AsyncFunction("saveToLibrary") { (uri: String, promise: Promise) in
            guard let url = URL(string: uri) else {
                promise.reject("E_INVALID_URI", "Invalid URI"); return
            }
            PHPhotoLibrary.shared().performChanges({
                PHAssetCreationRequest.creationRequestForAssetFromVideo(atFileURL: url)
            }) { success, error in
                if success {
                    promise.resolve(["saved": true])
                } else {
                    promise.reject("E_SAVE_FAILED", error?.localizedDescription ?? "Save failed")
                }
            }
        }
    }
}

// In app.config.ts under ios.infoPlist
{
  "ios": {
    "infoPlist": {
      "NSMicrophoneUsageDescription": "Captures your voice for in-app tutorial videos",
      "NSPhotoLibraryAddUsageDescription": "Saves recorded videos to your Photo Library"
    }
  }
}

// android/src/main/java/expo/modules/screenrecorder/ExpoScreenRecorderModule.kt
package expo.modules.screenrecorder
 
import android.app.Activity
import android.content.Context
import android.content.Intent
import android.media.MediaRecorder
import android.media.projection.MediaProjection
import android.media.projection.MediaProjectionManager
import android.os.Build
import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition
import java.io.File
 
class ExpoScreenRecorderModule : Module() {
    private var mediaProjection: MediaProjection? = null
    private var mediaRecorder: MediaRecorder? = null
    private var outputFile: File? = null
 
    override fun definition() = ModuleDefinition {
        Name("ExpoScreenRecorder")
 
        // Show the system capture-permission dialog
        AsyncFunction("requestPermission") { promise: Promise ->
            val activity = appContext.activityProvider?.currentActivity
                ?: return@AsyncFunction promise.reject(
                    "E_NO_ACTIVITY", "No Activity available", null)
 
            val manager = activity.getSystemService(Context.MEDIA_PROJECTION_SERVICE)
                as MediaProjectionManager
            val intent = manager.createScreenCaptureIntent()
 
            // In a real implementation you'd wire this through onActivityResult
            // to actually receive the user's choice. Simplified here for clarity.
            activity.startActivityForResult(intent, REQUEST_CODE)
            promise.resolve(null)
        }
 
        // Start recording — kick off the Foreground Service first, then configure the recorder
        AsyncFunction("startRecording") { promise: Promise ->
            val context = appContext.reactContext ?: return@AsyncFunction promise.reject(
                "E_NO_CONTEXT", "No context", null)
 
            val cacheDir = context.cacheDir
            outputFile = File(cacheDir, "rork-recording-${System.currentTimeMillis()}.mp4")
 
            // Foreground Service is mandatory — without it Android 10+ refuses the projection
            val serviceIntent = Intent(context, ScreenRecorderService::class.java).apply {
                putExtra("outputPath", outputFile!!.absolutePath)
            }
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                context.startForegroundService(serviceIntent)
            } else {
                context.startService(serviceIntent)
            }
            promise.resolve(mapOf("status" to "recording"))
        }
 
        AsyncFunction("stopRecording") { promise: Promise ->
            val context = appContext.reactContext ?: return@AsyncFunction promise.reject(
                "E_NO_CONTEXT", "No context", null)
 
            context.stopService(Intent(context, ScreenRecorderService::class.java))
 
            promise.resolve(mapOf(
                "status" to "stopped",
                "uri" to (outputFile?.toURI()?.toString() ?: ""),
                "size" to (outputFile?.length() ?: 0L)
            ))
        }
    }
 
    companion object {
        const val REQUEST_CODE = 1001
    }
}

<!-- AndroidManifest.xml -->
<manifest>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
 
    <application>
        <service
            android:name=".ScreenRecorderService"
            android:foregroundServiceType="mediaProjection"
            android:exported="false" />
    </application>
</manifest>

// ScreenRecorderService.kt
package expo.modules.screenrecorder
 
import android.app.*
import android.content.Context
import android.content.Intent
import android.content.pm.ServiceInfo
import android.media.MediaRecorder
import android.media.projection.MediaProjection
import android.media.projection.MediaProjectionManager
import android.hardware.display.DisplayManager
import android.hardware.display.VirtualDisplay
import android.os.Build
import android.os.IBinder
import androidx.core.app.NotificationCompat
 
class ScreenRecorderService : Service() {
    private var projection: MediaProjection? = null
    private var recorder: MediaRecorder? = null
    private var display: VirtualDisplay? = null
 
    override fun onBind(intent: Intent?): IBinder? = null
 
    override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
        val path = intent?.getStringExtra("outputPath") ?: return START_NOT_STICKY
        val resultCode = intent.getIntExtra("resultCode", Activity.RESULT_CANCELED)
        val data = intent.getParcelableExtra<Intent>("data")
        if (resultCode != Activity.RESULT_OK || data == null) { stopSelf(); return START_NOT_STICKY }
 
        // 1. Go foreground first, with a notification (service type required on Android 14+)
        val channelId = "rork_recording"
        getSystemService(NotificationManager::class.java).createNotificationChannel(
            NotificationChannel(channelId, "Screen recording", NotificationManager.IMPORTANCE_LOW))
        val notification = NotificationCompat.Builder(this, channelId)
            .setContentTitle("Recording your screen")
            .setSmallIcon(android.R.drawable.ic_media_play)
            .setOngoing(true)
            .build()
        if (Build.VERSION.SDK_INT >= 29) {
            startForeground(1, notification, ServiceInfo.FOREGROUND_SERVICE_TYPE_MEDIA_PROJECTION)
        } else {
            startForeground(1, notification)
        }
 
        // 2. Only then create the MediaProjection
        val manager = getSystemService(Context.MEDIA_PROJECTION_SERVICE) as MediaProjectionManager
        projection = manager.getMediaProjection(resultCode, data)
        projection?.registerCallback(object : MediaProjection.Callback() {
            override fun onStop() { stopSelf() }   // user stopped it from the system UI
        }, null)
 
        val metrics = resources.displayMetrics
        recorder = MediaRecorder().apply {
            setVideoSource(MediaRecorder.VideoSource.SURFACE)
            setOutputFormat(MediaRecorder.OutputFormat.MPEG_4)
            setVideoEncoder(MediaRecorder.VideoEncoder.H264)
            setVideoSize(metrics.widthPixels, metrics.heightPixels)
            setVideoFrameRate(30)
            setVideoEncodingBitRate(6_000_000)
            setOutputFile(path)
            prepare()
        }
        display = projection?.createVirtualDisplay(
            "rork-recording", metrics.widthPixels, metrics.heightPixels, metrics.densityDpi,
            DisplayManager.VIRTUAL_DISPLAY_FLAG_AUTO_MIRROR, recorder!!.surface, null, null)
        recorder?.start()
        return START_NOT_STICKY
    }
 
    override fun onDestroy() {
        try { recorder?.stop() } catch (_: RuntimeException) { /* stopping right after start lands here */ }
        recorder?.release(); display?.release(); projection?.stop()
        super.onDestroy()
    }
}

// src/lib/screen-recorder.ts
import ExpoScreenRecorder from "expo-screen-recorder";
import { Platform } from "react-native";
 
export type RecordingResult = {
  uri: string;
  size: number;
};
 
export async function startScreenRecording(options?: {
  withMicrophone?: boolean;
}): Promise<void> {
  const withMic = options?.withMicrophone ?? false;
 
  if (Platform.OS === "ios") {
    await ExpoScreenRecorder.startRecording(withMic);
  } else if (Platform.OS === "android") {
    // On Android, prompt the user first
    await ExpoScreenRecorder.requestPermission();
    // The service then starts after the system dialog returns success
    await ExpoScreenRecorder.startRecording();
  } else {
    throw new Error("Screen recording is only supported on iOS and Android");
  }
}
 
export async function stopScreenRecording(): Promise<RecordingResult> {
  const result = await ExpoScreenRecorder.stopRecording();
  if (!result.uri) {
    throw new Error("Failed to write the recording file");
  }
  return result;
}
 
export async function saveToLibrary(uri: string): Promise<boolean> {
  if (Platform.OS === "ios") {
    const result = await ExpoScreenRecorder.saveToLibrary(uri);
    return result.saved;
  }
  // Android needs MediaStore APIs; left out for brevity
  return false;
}

// src/components/RecorderButton.tsx
import { useState } from "react";
import { Pressable, Text, View, Alert } from "react-native";
import {
  startScreenRecording,
  stopScreenRecording,
  saveToLibrary,
} from "../lib/screen-recorder";
 
export function RecorderButton() {
  const [isRecording, setIsRecording] = useState(false);
 
  const handleToggle = async () => {
    try {
      if (isRecording) {
        const { uri } = await stopScreenRecording();
        const saved = await saveToLibrary(uri);
        Alert.alert(
          "Recording finished",
          saved ? "Saved to your Photo Library" : "Saved to file"
        );
      } else {
        await startScreenRecording({ withMicrophone: true });
      }
      setIsRecording(!isRecording);
    } catch (error) {
      Alert.alert(
        "Recording error",
        error instanceof Error ? error.message : "Unknown error"
      );
    }
  };
 
  return (
    <View>
      {isRecording && (
        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
          <View style={{
            width: 12,
            height: 12,
            borderRadius: 6,
            backgroundColor: "red",
          }} />
          <Text>Recording</Text>
        </View>
      )}
      <Pressable onPress={handleToggle}>
        <Text>{isRecording ? "Stop recording" : "Start recording"}</Text>
      </Pressable>
    </View>
  );
}

// MyBroadcastExtension/SampleHandler.swift
import ReplayKit
 
class SampleHandler: RPBroadcastSampleHandler {
    private let encoder = HEVCEncoder()      // your own encoder
    private let uploader = StreamUploader()  // your own RTMP/WebRTC uploader
 
    override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) {
        // Pull config from the main app via App Group
        let userDefaults = UserDefaults(suiteName: "group.com.rorklab.broadcast")
        guard let streamKey = userDefaults?.string(forKey: "streamKey") else {
            finishBroadcastWithError(NSError(
                domain: "BroadcastExt",
                code: 1,
                userInfo: [NSLocalizedDescriptionKey: "Stream key not found"]))
            return
        }
        uploader.connect(streamKey: streamKey)
    }
 
    override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer,
                                      with sampleBufferType: RPSampleBufferType) {
        // Don't accumulate — encode and ship every frame
        switch sampleBufferType {
        case .video:
            encoder.encode(sampleBuffer) { [weak self] data in
                self?.uploader.send(data)
            }
        case .audioApp:
            uploader.sendAudio(sampleBuffer, type: .app)
        case .audioMic:
            uploader.sendAudio(sampleBuffer, type: .mic)
        @unknown default: break
        }
    }
 
    override func broadcastFinished() {
        uploader.disconnect()
    }
}

// src/lib/recording-analytics.ts
import { startScreenRecording, stopScreenRecording } from "./screen-recorder";
import { logEvent } from "./analytics";
 
type Outcome = "success" | "permission_denied" | "device_unavailable" | "save_failed" | "unknown_error";
 
export async function trackedStartRecording() {
  const start = Date.now();
  try {
    await startScreenRecording({ withMicrophone: true });
    logEvent("recording_started", { latencyMs: Date.now() - start });
  } catch (err) {
    const outcome: Outcome = classifyError(err);
    logEvent("recording_failed", {
      outcome,
      latencyMs: Date.now() - start,
      message: err instanceof Error ? err.message : String(err),
    });
    throw err;
  }
}
 
export async function trackedStopRecording() {
  const start = Date.now();
  try {
    const result = await stopScreenRecording();
    logEvent("recording_stopped", {
      durationMs: Date.now() - start,
      sizeBytes: result.size,
    });
    return result;
  } catch (err) {
    logEvent("recording_stop_failed", {
      message: err instanceof Error ? err.message : String(err),
    });
    throw err;
  }
}
 
function classifyError(err: unknown): Outcome {
  if (!(err instanceof Error)) return "unknown_error";
  const msg = err.message.toLowerCase();
  if (msg.includes("permission")) return "permission_denied";
  if (msg.includes("unavailable")) return "device_unavailable";
  if (msg.includes("save")) return "save_failed";
  return "unknown_error";
}

import * as FileSystem from "expo-file-system";
 
export async function cleanupStaleRecordings() {
  const dir = FileSystem.cacheDirectory;
  if (!dir) return;
  const files = await FileSystem.readDirectoryAsync(dir);
  const cutoff = Date.now() - 24 * 60 * 60 * 1000;
  for (const file of files) {
    if (!file.startsWith("rork-recording-")) continue;
    const path = `${dir}${file}`;
    const info = await FileSystem.getInfoAsync(path);
    if (info.exists && info.modificationTime && info.modificationTime * 1000 < cutoff) {
      await FileSystem.deleteAsync(path, { idempotent: true });
    }
  }
}

import * as FileSystem from "expo-file-system";
 
export async function hasSpaceForRecording(estimatedMinutes = 10): Promise<boolean> {
  const required = estimatedMinutes * 25 * 1024 * 1024; // ~25 MB/minute heuristic
  const free = await FileSystem.getFreeDiskStorageAsync();
  return free > required;
}