{"id":3281,"date":"2024-12-27T11:09:01","date_gmt":"2024-12-27T11:09:01","guid":{"rendered":"https:\/\/sparkminds.net\/?p=3281"},"modified":"2024-12-27T11:12:43","modified_gmt":"2024-12-27T11:12:43","slug":"create-a-streaming-app-with-react-native-and-getstream","status":"publish","type":"post","link":"https:\/\/sparkminds.net\/vi\/create-a-streaming-app-with-react-native-and-getstream\/","title":{"rendered":"Create a Streaming App with React Native and GetStream"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tIn the fourth industrial revolution, streaming became more popular in multiple sectors, such as entertainment, retail, and consulting services. If you want to create a streaming app to help your business boom, you are in the right place. This article will help you understand streaming and how to develop a streaming app with React Native and GetStream.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Streaming Overview<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

What Is Streaming?<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\tStreaming is the continuous transmission of audio or video files from a server to a client. In simpler terms, streaming is what happens when audiences watch TV or listen to podcasts on Internet-connected devices. With streaming, the media file being played on the client device is stored remotely and transmitted a few seconds at a time over the Internet.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

How does streaming work?<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\tJust like other data sent over the Internet, audio and video data are broken down into data packets. Each packet contains a small piece of the file, and an audio or video player in the browser on the client device receives the flow of data packets and interprets them as video or audio.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Does streaming use the User Datagram Protocol (UDP) or the Transmission Control Protocol (TCP)?<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

Some streaming methods use UDP, while others use TCP. UDP and TCP are transport protocols, meaning they are used for moving packets of data across networks. Both are used with the Internet Protocol (IP). TCP opens a dedicated connection before transmitting data, and it ensures all data packets arrive in order. Unlike TCP, UDP does neither of these things. As a result, TCP is more reliable, but transmitting data via UDP does not take as long as it does via TCP, although some packets are lost along the way.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\tIf TCP is like a package delivery service that requires the recipient to sign for the package, then UDP is like a delivery service that leaves packages on the front porch without knocking on the door to get a signature. The TCP delivery service loses fewer packages, but the UDP delivery service is faster, because packages can get dropped off even if no one is home to sign for them.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tFor streaming, in some cases, speed is far more important than reliability. For instance, if someone is in a video conference, they would prefer to interact with the other conference attendees in real time than to sit and wait for every bit of data to be delivered. Therefore, a few lost data packets are not a huge concern, and UDP should be used.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tIn other cases, reliability is more important for streaming. For example, both HTTP live streaming (HLS) and MPEG-DASH are streaming protocols that use TCP for transport. Many video-on-demand services use TCP.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t

What is buffering?<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

Streaming media players load a few seconds of the stream ahead of time so that the video or audio can continue playing if the connection is briefly interrupted. This is known as buffering. Buffering ensures that videos can play smoothly and continuously. However, over slow connections, or if a network has a great deal of latency, a video can take a long time to buffer.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Create a Streaming App with React Native Using GetStream<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

In this tutorial, we\u2019ll jump straight into building a streaming app without covering additional React Native setup.<\/p>

To create a complete streaming system, we would typically need to develop our own backend, CMS, and mobile app. But now we are focusing solely on building a streaming app using just React Native. To achieve this, we need to use a third-party library called GetStream<\/span><\/a>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Installation (Details here<\/u><\/a>)<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

In order to install the Stream Video React Native SDK, run the following command in your terminal of choice:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t
yarn add @stream-io\/video-react-native-sdk<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tStream Video React Native SDK requires installing some peer dependencies to provide you with a great calling experience. You can run the following command to install them:\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
yarn add @stream-io\/react-native-webrtc \\\\\r\n   react-native-incall-manager react-native-svg \\\\\r\n   @react-native-community\/netinfo\r\nnpx pod-install\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
Android Specific installation<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tIn android\/build.gradle add the following inside the buildscript section:\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
buildscript {\r\n    ext {\r\n        ...\r\n        minSdkVersion = 24\r\n    }\r\n    ...\r\n}\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
Enable Java 8 Support
<\/strong>In android\/app\/build.gradle add the following inside the android section:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
compileOptions {\r\n    sourceCompatibility JavaVersion.VERSION_1_8\r\n    targetCompatibility JavaVersion.VERSION_11\r\n}<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
Optional: R8\/ProGuard Support
<\/strong>If you require R8\/ProGuard support then in android\/app\/proguard-rules.pro add the following on a new line:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
-keep class org.webrtc.** { *; }\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
Declaring Permissions<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tMaking video or audio calls requires the usage of the device’s camera and microphone accordingly. In both platforms, we must declare the permissions.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
iOS<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
Add the following keys and values to Info.plist file at a minimum:
Privacy – Camera Usage Description – “<Your_app_name> requires camera access to capture and transmit video” Privacy – Microphone Usage Description – ” <Your_app_name> requires microphone access to capture and transmit audio”<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
Android<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
In AndroidManifest.xml<\/span> add the following permissions before the <application><\/span> section.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
<uses-feature android:name="android.hardware.camera" />\r\n<uses-feature android:name="android.hardware.camera.autofocus" />\r\n<uses-feature android:name="android.hardware.audio.output" />\r\n<uses-feature android:name="android.hardware.microphone" />\r\n\r\n<uses-permission android:name="android.permission.CAMERA" />\r\n<uses-permission android:name="android.permission.RECORD_AUDIO" />\r\n<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />\r\n<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />\r\n<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />\r\n<uses-permission android:name="android.permission.INTERNET" />\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tIf you plan to also support Bluetooth devices then add the following command.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />\r\n<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />\r\n<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
Next, we will build two screens: the Host screen and the Viewer screen.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tStreamingHostScreen.tsx\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import React, { useEffect, useLayoutEffect } from "react";\r\nimport {\r\n  HostLivestream,\r\n  StreamCall,\r\n  StreamVideo,\r\n  StreamVideoClient,\r\n  User,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { AppStackScreenProp } from "navigators";\r\nimport { Layout } from "components";\r\nimport { HostLivestreamControlsView } from "./HostLivestreamControlsView";\r\nimport { HostLivestreamTopView } from "./HostLivestreamTopView";\r\n\r\nimport IncallManager from "react-native-incall-manager";\r\n\r\nconst apiKey = "mmhfdzb5evj2"; // API key for Stream Video SDK\r\nconst token =\r\n  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL3Byb250by5nZXRzdHJlYW0uaW8iLCJzdWIiOiJ1c2VyL0dlbmVyYWxfR3JpZXZvdXMiLCJ1c2VyX2lkIjoiR2VuZXJhbF9Hcmlldm91cyIsInZhbGlkaXR5X2luX3NlY29uZHMiOjYwNDgwMCwiaWF0IjoxNzI2MDQ3MzYyLCJleHAiOjE3MjY2NTIxNjJ9.GDMFP4wf3DifOw1ZmxO0KSy2HG_t4ByFv2kKwW5hVp4"; // JWT token for user authentication\r\nconst userId = "General_Grievous"; // User ID for the stream\r\nconst callId = "FMeNGvwQJY26"; // Call ID for the livestream session\r\n\r\n// StreamingHostScreen functional component\r\nexport const StreamingHostScreen: React.FC<\r\n  AppStackScreenProp<"StreamingHost">\r\n> = ({ navigation }) => {\r\n  const user: User = { id: userId, name: "SparkMinds Host" }; // User details\r\n\r\n  // Get or create an instance of the StreamVideoClient\r\n  const client = StreamVideoClient.getOrCreateInstance({ apiKey, user, token });\r\n\r\n  // Initialize a call of type 'livestream' with the given callId\r\n  const call = client.call("livestream", callId);\r\n\r\n  // useEffect to handle joining and ending the livestream\r\n  useEffect(() => {\r\n    call.join({ create: true }); // Join or create the livestream\r\n    IncallManager.start({ media: "video" }); // Start the call with video\r\n\r\n    return () => {\r\n      call.endCall(); // Clean up by ending the call\r\n      IncallManager.stop(); // Stop the call manager when component unmounts\r\n    };\r\n  }, []);\r\n\r\n  // useLayoutEffect to hide the default header\r\n  useLayoutEffect(() => {\r\n    navigation.setOptions({\r\n      headerShown: false, // Hide the navigation header\r\n    });\r\n  }, []);\r\n\r\n  // Main JSX layout for hosting the livestream\r\n  return (\r\n    <Layout>\r\n      {/* StreamVideo provider for handling video stream */}\r\n      <StreamVideo client={client}>\r\n        {/* StreamCall component wrapping the livestream */}\r\n        <StreamCall call={call}>\r\n          {/* HostLivestream component, providing custom top view and controls */}\r\n          <HostLivestream\r\n            HostLivestreamTopView={HostLivestreamTopView} // Top view for the host stream UI\r\n            HostLivestreamControls={HostLivestreamControlsView} // Controls for managing the stream\r\n          />\r\n        </StreamCall>\r\n      </StreamVideo>\r\n    </Layout>\r\n  );\r\n};\r\n\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
HostLivestreamTopView.tsx<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import React from "react";\r\nimport {\r\n  DurationBadge,\r\n  FollowerCount,\r\n  HostLivestreamTopViewProps,\r\n  LiveIndicator,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { SViewStyle } from "models";\r\nimport { View } from "react-native";\r\nimport { useSafeAreaInsets } from "react-native-safe-area-context";\r\nimport { style } from "theme";\r\n\r\nexport const HostLivestreamTopView: React.FC<\r\n  HostLivestreamTopViewProps\r\n> = () => {\r\n  const insets = useSafeAreaInsets(); // Get the safe area insets to handle devices with notches\r\n\r\n  return (\r\n    // Main container for the top view, with top padding based on safe area insets\r\n    <View style={[$topView, { paddingTop: insets.top }]}>\r\n      {/* Displays the stream duration for the host */}\r\n      <DurationBadge mode="host" />\r\n\r\n      {/* Spacer view to push other elements apart */}\r\n      <View style={style.flex_1} />\r\n\r\n      {/* Live indicator showing the stream is currently live */}\r\n      <LiveIndicator />\r\n\r\n      {/* Displays the number of followers watching the stream */}\r\n      <FollowerCount />\r\n    </View>\r\n  );\r\n};\r\n\r\n// Styling for the top view container, arranging elements in a row with padding\r\nconst $topView: SViewStyle = [style.row, style.px_md];\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
HostLivestreamControlsView.tsx<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import React from "react";\r\nimport {\r\n  HostLivestreamControlsProps,\r\n  HostStartStreamButton,\r\n  LivestreamMediaControls,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { SViewStyle } from "models";\r\nimport { View } from "react-native";\r\nimport { spacing, style } from "theme";\r\nimport { useSafeAreaInsets } from "react-native-safe-area-context";\r\n\r\ntype HostLivestreamControlsViewProps = {} & HostLivestreamControlsProps;\r\n\r\n// Main functional component for controlling the host livestream\r\nexport const HostLivestreamControlsView: React.FC<\r\n  HostLivestreamControlsViewProps\r\n> = ({\r\n  onEndStreamHandler, // Handler for ending the stream\r\n  onStartStreamHandler, // Handler for starting the stream\r\n  hls, // HLS (HTTP Live Streaming) protocol flag or configuration\r\n  disableStopPublishedStreamsOnEndStream, // Option to disable stopping published streams when ending\r\n  onLayout, // Layout handler, typically for UI measurement purposes\r\n}) => {\r\n  const insets = useSafeAreaInsets(); // Get safe area insets (e.g., for iPhone with notches)\r\n\r\n  return (\r\n    // Root view containing controls with safe area padding and layout handling\r\n    <View\r\n      style={[$root, { paddingBottom: insets.bottom || spacing.md }]} // Adding bottom padding based on safe area insets\r\n      onLayout={onLayout} // Handling layout changes\r\n    >\r\n      {/* Start/End stream button, passing through event handlers and stream config */}\r\n      <HostStartStreamButton\r\n        onEndStreamHandler={onEndStreamHandler}\r\n        onStartStreamHandler={onStartStreamHandler}\r\n        hls={hls}\r\n        disableStopPublishedStreamsOnEndStream={\r\n          disableStopPublishedStreamsOnEndStream\r\n        }\r\n      />\r\n      {/* Media controls for interacting with the livestream (play, pause, etc.) */}\r\n      <LivestreamMediaControls />\r\n    </View>\r\n  );\r\n};\r\n\r\n// Styles for the root view using project-defined styles\r\nconst $root: SViewStyle = [style.row_between, style.px_md, style.pt_md];\r\n<\/code><\/pre>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
StreamingViewerScreen.tsx<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import React, { useLayoutEffect } from "react";\r\nimport { Layout } from "components";\r\nimport { AppStackScreenProp } from "navigators";\r\nimport {\r\n  LivestreamPlayer,\r\n  StreamVideo,\r\n  StreamVideoClient,\r\n  User,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { ViewerLivestreamView } from "./ViewerLivestreamView";\r\n\r\nconst apiKey = "mmhfdzb5evj2"; // API key for Stream Video SDK\r\nconst token =\r\n  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL3Byb250by5nZXRzdHJlYW0uaW8iLCJzdWIiOiJ1c2VyL0dlbmVyYWxfR3JpZXZvdXMiLCJ1c2VyX2lkIjoiR2VuZXJhbF9Hcmlldm91cyIsInZhbGlkaXR5X2luX3NlY29uZHMiOjYwNDgwMCwiaWF0IjoxNzI2MDQ3MzYyLCJleHAiOjE3MjY2NTIxNjJ9.GDMFP4wf3DifOw1ZmxO0KSy2HG_t4ByFv2kKwW5hVp4"; // JWT token for user authentication\r\nconst userId = "General_Grievous"; // User ID for the viewer\r\nconst callId = "FMeNGvwQJY26"; // Call ID for the livestream session\r\n\r\nconst user: User = { id: userId, name: "SparkMinds Viewer" }; // Viewer user details\r\n\r\n// StreamingViewerScreen functional component\r\nexport const StreamingViewerScreen: React.FC<\r\n  AppStackScreenProp<"StreamingViewer">\r\n> = ({ navigation }) => {\r\n  // Create an instance of the StreamVideoClient with the given API key, user details, and token\r\n  const client = StreamVideoClient.getOrCreateInstance({ apiKey, user, token });\r\n\r\n  // useLayoutEffect to set up the navigation header\r\n  useLayoutEffect(() => {\r\n    navigation.setOptions({\r\n      headerShown: false, // Hide the navigation header while viewing the livestream\r\n    });\r\n  }, []);\r\n\r\n  // Main JSX layout for the livestream viewer\r\n  return (\r\n    <Layout>\r\n      {/* StreamVideo provider to handle video stream for the viewer */}\r\n      <StreamVideo client={client}>\r\n        {/* LivestreamPlayer to manage the livestream playback */}\r\n        <LivestreamPlayer\r\n          callType="livestream" // Specifies the type of stream (livestream)\r\n          callId={callId} // Passes the callId for the specific livestream session\r\n          ViewerLivestream={ViewerLivestreamView} // Custom viewer view for the livestream UI\r\n        />\r\n      </StreamVideo>\r\n    </Layout>\r\n  );\r\n};\r\n<\/pre><\/code>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tViewerLivestreamView.tsx\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import React, { useEffect } from "react";\r\nimport { StyleSheet } from "react-native";\r\nimport InCallManager from "react-native-incall-manager";\r\nimport { useCallStateHooks } from "@stream-io/video-react-bindings";\r\nimport { hasVideo } from "@stream-io/video-client";\r\nimport {\r\n  DurationBadge,\r\n  FloatingParticipantView,\r\n  FollowerCount,\r\n  LiveIndicator,\r\n  LivestreamLayout,\r\n  useTheme,\r\n  ViewerLivestreamProps,\r\n  ViewerLivestreamTopViewProps,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { Layout } from "components";\r\nimport { ViewerLivestreamTopView } from "./ViewerLivestreamTopView";\r\nimport { ViewerLivestreamControls } from "./ViewerLivestreamControls";\r\n\r\ntype ViewerLivestreamViewProps = {} & ViewerLivestreamProps;\r\n\r\nexport const ViewerLivestreamView: React.FC<ViewerLivestreamViewProps> = ({\r\n  onLeaveStreamHandler,\r\n}) => {\r\n  const {\r\n    theme: { viewerLivestream }, // Get the theme for viewer livestream\r\n  } = useTheme();\r\n  const { useHasOngoingScreenShare, useParticipants } = useCallStateHooks(); // Hooks for call state management\r\n  const hasOngoingScreenShare = useHasOngoingScreenShare(); // Check if there is an ongoing screen share\r\n  const [currentSpeaker] = useParticipants(); // Get the current speaker from participants\r\n  const floatingParticipant =\r\n    hasOngoingScreenShare &&\r\n    currentSpeaker &&\r\n    hasVideo(currentSpeaker) && // Check if the current speaker has video\r\n    currentSpeaker;\r\n\r\n  const [topViewHeight, setTopViewHeight] = React.useState<number>(); // State for the height of the top view\r\n  const [controlsHeight, setControlsHeight] = React.useState<number>(); // State for the height of the controls\r\n\r\n  // Automatically route audio to speaker devices as relevant for watching videos\r\n  useEffect(() => {\r\n    InCallManager.start({ media: "video" }); // Start the in-call manager for video\r\n    return () => InCallManager.stop(); // Stop the in-call manager when the component unmounts\r\n  }, []);\r\n\r\n  // Props for the top view of the livestream\r\n  const topViewProps: ViewerLivestreamTopViewProps = {\r\n    LiveIndicator,\r\n    FollowerCount,\r\n    DurationBadge,\r\n    onLayout: (event) => {\r\n      setTopViewHeight(event.nativeEvent.layout.height); // Set the height of the top view\r\n    },\r\n  };\r\n\r\n  return (\r\n    <Layout style={viewerLivestream.container}>\r\n      {" "}\r\n      {/* Main layout for the viewer livestream */}\r\n      <ViewerLivestreamTopView {...topViewProps} />{" "}\r\n      {/* Render the top view with props */}\r\n      {floatingParticipant && ( // Render floating participant if available\r\n        <FloatingParticipantView\r\n          participant={floatingParticipant} // Pass the floating participant\r\n          draggableContainerStyle={[\r\n            StyleSheet.absoluteFill, // Fill the container absolutely\r\n            {\r\n              top: topViewHeight, // Position based on top view height\r\n              bottom: controlsHeight, // Position based on controls height\r\n            },\r\n          ]}\r\n        />\r\n      )}\r\n      <LivestreamLayout /> {/* Render the main livestream layout */}\r\n      <ViewerLivestreamControls\r\n        onLeaveStreamHandler={onLeaveStreamHandler} // Pass handler for leaving the stream\r\n        onLayout={(event) => {\r\n          setControlsHeight(event.nativeEvent.layout.height); // Set the height of the controls\r\n        }}\r\n      />\r\n    </Layout>\r\n  );\r\n};<\/pre><\/code>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tViewerLivestreamTopView.tsx\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import React from "react";\r\nimport {\r\n  FollowerCount,\r\n  LiveIndicator,\r\n  ViewerLivestreamTopViewProps,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { SViewStyle } from "models";\r\nimport { View } from "react-native";\r\nimport { style } from "theme";\r\nimport { useSafeAreaInsets } from "react-native-safe-area-context";\r\n\r\nexport const ViewerLivestreamTopView: React.FC<\r\n  ViewerLivestreamTopViewProps\r\n> = ({ onLayout }) => {\r\n  const insets = useSafeAreaInsets(); // Get safe area insets for proper padding\r\n\r\n  return (\r\n    <View onLayout={onLayout} style={[$root, { paddingTop: insets.top }]}>\r\n      {/* Indicator showing the stream is live */}\r\n      <LiveIndicator />\r\n      {/* Displays the number of followers watching the stream */}\r\n      <FollowerCount />\r\n    </View>\r\n  );\r\n};\r\n\r\nconst $root: SViewStyle = [\r\n  style.row,\r\n  style.abs,\r\n  style.px_md,\r\n  { left: 0, top: 0, zIndex: 1 },\r\n  style.w_screenWidth,\r\n];<\/pre><\/code>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tViewerLivestreamControls.tsx\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
import {\r\n  ViewerLeaveStreamButton,\r\n  ViewerLivestreamControlsProps,\r\n} from "@stream-io/video-react-native-sdk";\r\nimport { SViewStyle } from "models";\r\nimport React from "react";\r\nimport { View } from "react-native";\r\nimport { useSafeAreaInsets } from "react-native-safe-area-context";\r\nimport { spacing, style } from "theme";\r\n\r\nexport const ViewerLivestreamControls: React.FC<\r\n  ViewerLivestreamControlsProps\r\n> = ({ onLeaveStreamHandler, onLayout }) => {\r\n  const insets = useSafeAreaInsets(); // Get safe area insets for bottom padding\r\n\r\n  return (\r\n    <View\r\n      onLayout={onLayout} // Handle layout changes\r\n      style={[$root, { paddingBottom: insets.bottom || spacing.md }]} // Apply styles and padding for safe area\r\n    >\r\n      {/* Button for viewers to leave the stream */}\r\n      <ViewerLeaveStreamButton onLeaveStreamHandler={onLeaveStreamHandler} />\r\n    </View>\r\n  );\r\n};\r\n\r\nconst $root: SViewStyle = [\r\n  style.abs,\r\n  style.bottom_0,\r\n  style.left_0,\r\n  style.right_0,\r\n  style.row,\r\n  style.px_md,\r\n  style.py_lg,\r\n];\r\n<\/pre><\/code>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
Conclusion, by following this guide, you can create a basic steaming app with React Native. In case, you want to build a comprehensive streaming app, I recommend you to hire a software outsourcing agency as SparkMinds. You can contact us<\/span><\/a>, share the project details and get the quotation.\u00a0
We are always willing to sign an NDA<\/span> <\/a>to save your information!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
In the fourth industrial revolution, streaming became more popular in multiple sectors, such as entertainment, retail, and consulting services. If […]<\/p>\n","protected":false},"author":1,"featured_media":3284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24,47],"tags":[],"class_list":["post-3281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-web-app","category-general","no-social-count","single-post-item mb40"],"acf":[],"yoast_head":"\nCreate a Streaming App with React Native and GetStream<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sparkminds.net\/vi\/create-a-streaming-app-with-react-native-and-getstream\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Streaming App with React Native and GetStream\" \/>\n<meta property=\"og:description\" content=\"In the fourth industrial revolution, streaming became more popular in multiple sectors, such as entertainment, retail, and consulting services. If […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sparkminds.net\/vi\/create-a-streaming-app-with-react-native-and-getstream\/\" \/>\n<meta property=\"og:site_name\" content=\"SparkMinds\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sparkminds.jsc\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-27T11:09:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-27T11:12:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8\"},\"headline\":\"Create a Streaming App with React Native and GetStream\",\"datePublished\":\"2024-12-27T11:09:01+00:00\",\"dateModified\":\"2024-12-27T11:12:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/\"},\"wordCount\":888,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sparkminds.net\/#organization\"},\"image\":{\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp\",\"articleSection\":[\"Custom Web\/App\",\"General\"],\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/\",\"url\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/\",\"name\":\"Create a Streaming App with React Native and GetStream\",\"isPartOf\":{\"@id\":\"https:\/\/sparkminds.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp\",\"datePublished\":\"2024-12-27T11:09:01+00:00\",\"dateModified\":\"2024-12-27T11:12:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage\",\"url\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp\",\"contentUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sparkminds.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Streaming App with React Native and GetStream\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sparkminds.net\/#website\",\"url\":\"https:\/\/sparkminds.net\/\",\"name\":\"SparkMinds\",\"description\":\"A Reliable Software Development Partner\",\"publisher\":{\"@id\":\"https:\/\/sparkminds.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sparkminds.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sparkminds.net\/#organization\",\"name\":\"SparkMinds J.S.C\",\"alternateName\":\"SparkMinds\",\"url\":\"https:\/\/sparkminds.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png\",\"contentUrl\":\"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png\",\"width\":181,\"height\":66,\"caption\":\"SparkMinds J.S.C\"},\"image\":{\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sparkminds.jsc\",\"https:\/\/www.linkedin.com\/company\/sparkminds-j-s-c\/about\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/sparkminds.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/sparkminds.net\"],\"url\":\"https:\/\/sparkminds.net\/vi\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Streaming App with React Native and GetStream","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sparkminds.net\/vi\/create-a-streaming-app-with-react-native-and-getstream\/","og_locale":"vi_VN","og_type":"article","og_title":"Create a Streaming App with React Native and GetStream","og_description":"In the fourth industrial revolution, streaming became more popular in multiple sectors, such as entertainment, retail, and consulting services. If […]","og_url":"https:\/\/sparkminds.net\/vi\/create-a-streaming-app-with-react-native-and-getstream\/","og_site_name":"SparkMinds","article_publisher":"https:\/\/www.facebook.com\/sparkminds.jsc","article_published_time":"2024-12-27T11:09:01+00:00","article_modified_time":"2024-12-27T11:12:43+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"admin","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"4 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#article","isPartOf":{"@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/"},"author":{"name":"admin","@id":"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8"},"headline":"Create a Streaming App with React Native and GetStream","datePublished":"2024-12-27T11:09:01+00:00","dateModified":"2024-12-27T11:12:43+00:00","mainEntityOfPage":{"@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/"},"wordCount":888,"commentCount":0,"publisher":{"@id":"https:\/\/sparkminds.net\/#organization"},"image":{"@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage"},"thumbnailUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp","articleSection":["Custom Web\/App","General"],"inLanguage":"vi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/","url":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/","name":"Create a Streaming App with React Native and GetStream","isPartOf":{"@id":"https:\/\/sparkminds.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage"},"image":{"@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage"},"thumbnailUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp","datePublished":"2024-12-27T11:09:01+00:00","dateModified":"2024-12-27T11:12:43+00:00","breadcrumb":{"@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#primaryimage","url":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp","contentUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/12\/create-a-streaming-app-scaled.webp","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/sparkminds.net\/create-a-streaming-app-with-react-native-and-getstream\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sparkminds.net\/"},{"@type":"ListItem","position":2,"name":"Create a Streaming App with React Native and GetStream"}]},{"@type":"WebSite","@id":"https:\/\/sparkminds.net\/#website","url":"https:\/\/sparkminds.net\/","name":"SparkMinds","description":"A Reliable Software Development Partner","publisher":{"@id":"https:\/\/sparkminds.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sparkminds.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/sparkminds.net\/#organization","name":"SparkMinds J.S.C","alternateName":"SparkMinds","url":"https:\/\/sparkminds.net\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/","url":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png","contentUrl":"https:\/\/sparkminds.net\/wp-content\/uploads\/2024\/11\/sticky-logo-menu-sparkmind.png","width":181,"height":66,"caption":"SparkMinds J.S.C"},"image":{"@id":"https:\/\/sparkminds.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sparkminds.jsc","https:\/\/www.linkedin.com\/company\/sparkminds-j-s-c\/about\/"]},{"@type":"Person","@id":"https:\/\/sparkminds.net\/#\/schema\/person\/f4769a5d0dd2b458b03580b337c920b8","name":"admin","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/sparkminds.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdfb7783cd4581a22bc1899273891ef702c5338854739f578d2f5cb72d515f34?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/sparkminds.net"],"url":"https:\/\/sparkminds.net\/vi\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts\/3281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/comments?post=3281"}],"version-history":[{"count":5,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts\/3281\/revisions"}],"predecessor-version":[{"id":3314,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/posts\/3281\/revisions\/3314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/media\/3284"}],"wp:attachment":[{"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/media?parent=3281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/categories?post=3281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sparkminds.net\/vi\/wp-json\/wp\/v2\/tags?post=3281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}