Merge pull request #1112 from pipecat-ai/bot-ready-signalling-rn

React Native client for the bot ready example.

.gitignore

@@ -32,6 +32,21 @@ fly.toml
 
 # Example files
 pipecat/examples/twilio-chatbot/templates/streams.xml
+pipecat/examples/bot-ready-signalling/client/react-native/node_modules/
+pipecat/examples/bot-ready-signalling/client/react-native/.expo/
+pipecat/examples/bot-ready-signalling/client/react-native/dist/
+pipecat/examples/bot-ready-signalling/client/react-native/npm-debug.*
+pipecat/examples/bot-ready-signalling/client/react-native/*.jks
+pipecat/examples/bot-ready-signalling/client/react-native/*.p8
+pipecat/examples/bot-ready-signalling/client/react-native/*.p12
+pipecat/examples/bot-ready-signalling/client/react-native/*.key
+pipecat/examples/bot-ready-signalling/client/react-native/*.mobileprovision
+pipecat/examples/bot-ready-signalling/client/react-native/*.orig.*
+pipecat/examples/bot-ready-signalling/client/react-native/web-build/
+
+# macOS
+.DS_Store
+
 
 # Documentation
 docs/api/_build/

examples/bot-ready-signalling/client/react-native/.nvmrc

@@ -0,0 +1 @@
+22.14

examples/bot-ready-signalling/client/react-native/README.md

@@ -0,0 +1,60 @@
+# React Native Implementation
+
+Basic implementation using the [Pipecat React Native SDK](https://docs.pipecat.ai/client/react-native/introduction).
+
+## Usage
+
+### Expo requirements
+
+This project cannot be used with an [Expo Go](https://docs.expo.dev/workflow/expo-go/) app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
+
+When a project requires custom native code or a config plugin, we need to transition from using [Expo Go](https://docs.expo.dev/workflow/expo-go/) 
+to a [development build](https://docs.expo.dev/development/introduction/).
+
+More details about the custom native code used by this demo can be found in [rn-daily-js-expo-config-plugin](https://github.com/daily-co/rn-daily-js-expo-config-plugin).
+
+### Building remotely
+
+If you do not have experience with Xcode and Android Studio builds or do not have them installed locally on your computer, you will need to follow [this guide from Expo to use EAS Build](https://docs.expo.dev/development/create-development-builds/#create-and-install-eas-build).
+
+### Building locally
+
+You will need to have installed locally on your computer:
+- [Xcode](https://developer.apple.com/xcode/) to build for iOS;
+- [Android Studio](https://developer.android.com/studio) to build for Android;
+
+#### Install the demo dependencies
+
+```bash
+# Use the version of node specified in .nvmrc
+nvm i
+
+# Install dependencies
+npm i
+
+# Before a native app can be compiled, the native source code must be generated.
+npx expo prebuild
+
+# Configure the environment variable to connect to the local server
+cp env.example .env
+# edit .env and add your local ip address, for example: http://192.168.1.16:7860
+```
+
+#### Running on Android
+
+After plugging in an Android device [configured for debugging](https://developer.android.com/studio/debug/dev-options), run the following command:
+
+```
+npm run android
+```
+
+#### Running on iOS
+
+Run the following command:
+
+```
+npm run ios
+```
+
+#### Connect to the server
+Use the http://localhost:5173 in your app.

examples/bot-ready-signalling/client/react-native/app.json

@@ -0,0 +1,75 @@
+{
+  "expo": {
+    "name": "bot-ready-rn",
+    "slug": "bot-ready-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bitcode": false,
+      "bundleIdentifier": "co.daily.expo.BotReady",
+      "infoPlist": {
+        "UIBackgroundModes": [
+          "voip"
+        ]
+      },
+      "appleTeamId": "EEBGKV9N3N"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "co.daily.expo.BotReady",
+      "permissions": [
+        "android.permission.ACCESS_NETWORK_STATE",
+        "android.permission.BLUETOOTH",
+        "android.permission.CAMERA",
+        "android.permission.INTERNET",
+        "android.permission.MODIFY_AUDIO_SETTINGS",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.SYSTEM_ALERT_WINDOW",
+        "android.permission.WAKE_LOCK",
+        "android.permission.FOREGROUND_SERVICE",
+        "android.permission.FOREGROUND_SERVICE_CAMERA",
+        "android.permission.FOREGROUND_SERVICE_MICROPHONE",
+        "android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION",
+        "android.permission.POST_NOTIFICATIONS"
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "@config-plugins/react-native-webrtc",
+      "@daily-co/config-plugin-rn-daily-js",
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "minSdkVersion": 24,
+            "compileSdkVersion": 35,
+            "targetSdkVersion": 34,
+            "buildToolsVersion": "35.0.0"
+          },
+          "ios": {
+            "deploymentTarget": "15.1"
+          }
+        }
+      ]
+    ]
+  }
+}

examples/bot-ready-signalling/client/react-native/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [["module:react-native-dotenv"]],
+  };
+};

examples/bot-ready-signalling/client/react-native/env.example

@@ -0,0 +1 @@
+API_BASE_URL=http://YOUR_LOCAL_IP:7860

examples/bot-ready-signalling/client/react-native/index.js

@@ -0,0 +1,7 @@
+import { registerRootComponent } from "expo";
+
+import App from "./src/App";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that the environment is set up appropriately
+registerRootComponent(App);

examples/bot-ready-signalling/client/react-native/metro.config.js

@@ -0,0 +1,4 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+module.exports = getDefaultConfig(__dirname);

examples/bot-ready-signalling/client/react-native/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "bot-ready-rn",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android --device",
+    "ios": "expo run:ios --device",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@config-plugins/react-native-webrtc": "^10.0.0",
+    "@daily-co/config-plugin-rn-daily-js": "0.0.7",
+    "@daily-co/react-native-daily-js": "^0.70.0",
+    "@daily-co/react-native-webrtc": "^118.0.3-daily.2",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "expo": "^52.0.0",
+    "expo-build-properties": "~0.13.1",
+    "expo-dev-client": "~5.0.5",
+    "expo-splash-screen": "~0.29.16",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-background-timer": "^2.4.1",
+    "react-native-dotenv": "^3.4.11",
+    "react-native-get-random-values": "^1.11.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9"
+  },
+  "private": true
+}

examples/bot-ready-signalling/client/react-native/src/App.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import {SafeAreaView, View, Text, Button, StyleSheet, ScrollView} from 'react-native';
+import Daily from "@daily-co/react-native-daily-js";
+import { API_BASE_URL } from "@env";
+
+const CallScreen = () => {
+  const [connectionStatus, setConnectionStatus] = useState('Disconnected');
+  const [isConnected, setIsConnected] = useState(false);
+  const [callObject, setCallObject] = useState(null);
+  const [logs, setLogs] = useState([]);
+
+  useEffect(() => {
+    if (callObject) {
+      setupTrackListeners(callObject);
+    }
+  }, [callObject]);
+
+  const log = (message) => {
+    setLogs((prevLogs) => [...prevLogs, `${new Date().toISOString()} - ${message}`]);
+    console.log(message);
+  };
+
+  const setupTrackListeners = (callObject) => {
+    callObject.on("joined-meeting", () => {
+      setConnectionStatus('Connected');
+      setIsConnected(true);
+      log('Client connected');
+    });
+    callObject.on("left-meeting", () => {
+      setConnectionStatus('Disconnected');
+      setIsConnected(false);
+      log('Client disconnected');
+    });
+    callObject.on("participant-left", () => {
+      // When the bot leaves, we are also disconnecting from the call
+      disconnect().catch((err) => {
+        log(`Failed to disconnect ${err}`);
+      })
+    });
+    // Trigger so the bot can start sending audio
+    callObject.on("track-started", (evt) => {
+      if (evt.track.kind === "audio" && evt.participant.local === false) {
+        handleEventToConsole(evt)
+        log("Sending the message that will trigger the bot to play the audio.")
+        callObject.sendAppMessage("playable")
+      }
+    });
+    callObject.on("error", (evt) => log(`Error: ${evt.error}`));
+    // Other events just for awareness
+    callObject.on("track-stopped", handleEventToConsole);
+    callObject.on("participant-joined", handleEventToConsole);
+    callObject.on("participant-updated", handleEventToConsole);
+  };
+
+  const handleEventToConsole = (evt) => {
+    log(`Received event: ${evt.action}`);
+  };
+
+  const connect = async () => {
+    try {
+      const callObject = Daily.createCallObject({ subscribeToTracksAutomatically: true });
+      setCallObject(callObject);
+      const connectionUrl = `${API_BASE_URL}/connect`
+      const res = await fetch(connectionUrl, { method: "POST", headers: { "Content-Type": "application/json" } });
+      const roomInfo = await res.json();
+      await callObject.join({ url: roomInfo.room_url });
+    } catch (error) {
+      log(`Error connecting: ${error.message}`);
+    }
+  };
+
+  const disconnect = async () => {
+    if (callObject) {
+      try {
+        await callObject.leave();
+        await callObject.destroy();
+        setCallObject(null);
+      } catch (error) {
+        log(`Error disconnecting: ${error.message}`);
+      }
+    }
+  };
+
+  return (
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.container}>
+          <View style={styles.statusBar}>
+            <Text>Status: <Text style={styles.status}>{connectionStatus}</Text></Text>
+            <View style={styles.controls}>
+              <Button
+                title={isConnected ? "Disconnect" : "Connect"}
+                onPress={isConnected ? disconnect : connect}
+              />
+            </View>
+          </View>
+
+          <View style={styles.debugPanel}>
+            <Text style={styles.debugTitle}>Debug Info</Text>
+            <ScrollView style={styles.debugLog}>
+              {logs.map((logEntry, index) => (
+                  <Text key={index} style={styles.logText}>{logEntry}</Text>
+              ))}
+            </ScrollView>
+          </View>
+        </View>
+      </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: { flex: 1, backgroundColor: '#f0f0f0', padding: 20 },
+  container: { flex: 1, margin: 20 },
+  statusBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, backgroundColor: '#fff', borderRadius: 8, marginBottom: 20 },
+  status: { fontWeight: 'bold' },
+  controls: { flexDirection: 'row', gap: 10 },
+  debugPanel: { height: '80%', backgroundColor: '#fff', borderRadius: 8, padding: 20},
+  debugTitle: { fontSize: 16, fontWeight: 'bold' },
+  debugLog: { height: '100%', overflow: 'scroll', backgroundColor: '#f8f8f8', padding: 10, borderRadius: 4, fontFamily: 'monospace', fontSize: 12, lineHeight: 1.4 },
+});
+
+export default CallScreen;