Rork Max で画面録画と配信を実装する — ReplayKit と MediaProjection の本番運用ガイド

# プロジェクトルートで実行
# Expo Module のテンプレートを生成（モジュール名: expo-screen-recorder）
npx create-expo-module@latest expo-screen-recorder --no-example
cd expo-screen-recorder
 
# Rork Max プロジェクトに参照を追加（package.json）
# "expo-screen-recorder": "file:../expo-screen-recorder"
# 期待出力: モジュールが生成され、ios/ android/ src/ ディレクトリができる

// ios/ExpoScreenRecorderModule.swift
import ExpoModulesCore
import ReplayKit
import Photos
 
public class ExpoScreenRecorderModule: Module {
    private let recorder = RPScreenRecorder.shared()
 
    public func definition() -> ModuleDefinition {
        Name("ExpoScreenRecorder")
 
        // 録画開始: マイク有無を引数で受け取る
        AsyncFunction("startRecording") { (withMicrophone: Bool, promise: Promise) in
            guard self.recorder.isAvailable else {
                promise.reject("E_RECORDER_UNAVAILABLE",
                    "デバイスが録画に対応していないか、コントロールセンターで無効化されています")
                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"])
                }
            }
        }
 
        // 録画停止: 一時ファイルへ書き出して 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
                ])
            }
        }
 
        // 写真ライブラリへ保存
        AsyncFunction("saveToLibrary") { (uri: String, promise: Promise) in
            guard let url = URL(string: uri) else {
                promise.reject("E_INVALID_URI", "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 ?? "保存失敗")
                }
            }
        }
    }
}

// app.config.ts の ios.infoPlist セクション
{
  "ios": {
    "infoPlist": {
      "NSMicrophoneUsageDescription": "操作の解説動画にあなたの声を録音するために使用します",
      "NSPhotoLibraryAddUsageDescription": "録画した動画をフォトライブラリに保存するために使用します"
    }
  }
}

// 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")
 
        // 録画許可ダイアログを呼び出す
        AsyncFunction("requestPermission") { promise: Promise ->
            val activity = appContext.activityProvider?.currentActivity
                ?: return@AsyncFunction promise.reject(
                    "E_NO_ACTIVITY", "Activity が利用できません", null)
 
            val manager = activity.getSystemService(Context.MEDIA_PROJECTION_SERVICE)
                as MediaProjectionManager
            val intent = manager.createScreenCaptureIntent()
 
            // onActivityResult で結果を受け取る仕組みを別途用意する必要がある
            // ここでは簡略化のため startActivityForResult を使う想定
            activity.startActivityForResult(intent, REQUEST_CODE)
            promise.resolve(null)
        }
 
        // 録画開始 — Foreground Service を起動してから MediaRecorder をセットアップ
        AsyncFunction("startRecording") { promise: Promise ->
            val context = appContext.reactContext ?: return@AsyncFunction promise.reject(
                "E_NO_CONTEXT", "Context がありません", null)
 
            // 出力先を準備
            val cacheDir = context.cacheDir
            outputFile = File(cacheDir, "rork-recording-${System.currentTimeMillis()}.mp4")
 
            // Foreground Service を起動（必須 — Android 10+ ではこれがないと許可されない）
            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", "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>

// 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") {
    // Android はまず許可ダイアログを表示
    await ExpoScreenRecorder.requestPermission();
    // 許可後に startRecording が呼ばれる前提（onActivityResult で連動）
    await ExpoScreenRecorder.startRecording();
  } else {
    throw new Error("画面録画は iOS / Android のみ対応しています");
  }
}
 
export async function stopScreenRecording(): Promise<RecordingResult> {
  const result = await ExpoScreenRecorder.stopRecording();
  if (!result.uri) {
    throw new Error("録画ファイルの保存に失敗しました");
  }
  return result;
}
 
export async function saveToLibrary(uri: string): Promise<boolean> {
  if (Platform.OS === "ios") {
    const result = await ExpoScreenRecorder.saveToLibrary(uri);
    return result.saved;
  }
  // Android は MediaStore API を別途使う実装が必要
  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(
          "録画完了",
          saved ? "写真ライブラリに保存しました" : "ファイルを保存しました"
        );
      } else {
        await startScreenRecording({ withMicrophone: true });
      }
      setIsRecording(!isRecording);
    } catch (error) {
      Alert.alert(
        "録画エラー",
        error instanceof Error ? error.message : "不明なエラー"
      );
    }
  };
 
  return (
    <View>
      {isRecording && (
        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
          <View style={{
            width: 12,
            height: 12,
            borderRadius: 6,
            backgroundColor: "red",
          }} />
          <Text>録画中</Text>
        </View>
      )}
      <Pressable onPress={handleToggle}>
        <Text>{isRecording ? "録画を停止" : "録画を開始"}</Text>
      </Pressable>
    </View>
  );
}

// MyBroadcastExtension/SampleHandler.swift
import ReplayKit
 
class SampleHandler: RPBroadcastSampleHandler {
    private let encoder = HEVCEncoder() // 自前のエンコーダ
    private let uploader = StreamUploader()
 
    override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) {
        // 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: "ストリームキーが見つかりません"]))
            return
        }
        uploader.connect(streamKey: streamKey)
    }
 
    override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer,
                                      with sampleBufferType: RPSampleBufferType) {
        // メモリを溜めず、即座にエンコード→アップロード
        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;
  }
}
 
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 });
    }
  }
}

export async function hasSpaceForRecording(estimatedMinutes = 10): Promise<boolean> {
  const required = estimatedMinutes * 25 * 1024 * 1024; // 概算: 25MB/分
  const free = await FileSystem.getFreeDiskStorageAsync();
  return free > required;
}