Monitor React Native

1
import { fastpixReactNativeVideo } from "@fastpix/react-native-video-data"; 

1
import Video from "react-native-video"; 
2
import { fastpixReactNativeVideo } from "@fastpix/react-native-video-data"; 
3
4
const FastPixVideo = fastpixReactNativeVideo(Video);  

1
import React, { useRef } from "react";
2
import {
3
  SafeAreaView,
4
  StyleSheet,
5
  View,
6
  StatusBar,
7
  Platform,
8
  Dimensions,
9
  Text,
10
} from "react-native";
11
import Video from "react-native-video";
12
import { version as videoVersion } from "react-native-video/package.json";
13
import { fastpixReactNativeVideo } from "@fastpix/react-native-video-data";
14
import app from "./package.json";
15
16
const FastPixVideo = fastpixReactNativeVideo(Video);
17
18
// Video Metadata
19
const VIDEO_SOURCE = {
20
  uri: "https://stream.fastpix.com/1f3d3b7b-dfc2-4b29-a9ff-9e71c36acc64.m3u8", // Replace with your source Playback URL
21
  title: "My Video",
22
  id: "your-video-id",
23
  poster: "https://placehold.co/600x400/000000/FFF?text=FastPix+Demo",
24
  category: "Demo",
25
};
26
27
export default function App() {
28
  const videoRef = useRef(null);
29
30
  return (
31
    <SafeAreaView style={styles.safeArea}>
32
      <StatusBar
33
        translucent
34
        backgroundColor="transparent"
35
        barStyle="dark-content"
36
      />
37
38
      <View style={styles.container}>
39
        <Text style={styles.title}>FastPix Video Player</Text>
40
        <Text style={styles.subtitle}>Instrumented with FastPix Analytics</Text>
41
42
        <FastPixVideo
43
          ref={videoRef}
44
          source={{ uri: VIDEO_SOURCE.uri }}
45
          poster={VIDEO_SOURCE.poster}
46
          controls
47
          resizeMode="contain"
48
          style={styles.video}
49
          Platform={Platform}
50
          Dimensions={Dimensions}
51
          shouldTrackViewer={false}
52
          muted={false}
53
          paused={false}
54
          reportBandwidth={true}
55
          showRenditions={true}
56
          posterResizeMode="cover"
57
          fastpixData={{
58
            debug: false,
59
60
            // Application metadata — can be imported directly from your package.json
61
            application_name: app.name, // From package.json: name
62
            application_version: app.version, // From package.json: version
63
            data: {
64
              workspace_id: "WORKSPACE_ID", // REQUIRED: Your FastPix Workspace ID
65
              video_title: "VIDEO_TITLE", // Title of the video
66
              video_id: "VIDEO_ID", // Unique identifier for the video
67
              viewer_id: "VIEWER_ID", // Unique identifier for the viewer
68
              video_series: "VIDEO_SERIES", // (Optional) Series name
69
              video_content_type: VIDEO_SOURCE.category, // (Optional) Content category
70
              video_stream_type: "on-demand", // Type of stream
71
              player_name: "react-native-video",
72
              player_version: videoVersion,
73
              player_software_version: videoVersion, // Redundant but informative
74
75
              // Add additional custom dimensions here if needed
76
            },
77
          }}
78
        />
79
      </View>
80
    </SafeAreaView>
81
  );
82
}
83
84
// Styling
85
const styles = StyleSheet.create({
86
  safeArea: {
87
    flex: 1,
88
    backgroundColor: "#f2f4f7",
89
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
90
  },
91
  container: {
92
    flex: 1,
93
    padding: 16,
94
    justifyContent: "flex-start",
95
  },
96
  title: {
97
    fontSize: 22,
98
    fontWeight: "800",
99
    color: "#1e2a3a",
100
    textAlign: "center",
101
    marginBottom: 6,
102
  },
103
  subtitle: {
104
    fontSize: 14,
105
    color: "#7b8194",
106
    textAlign: "center",
107
    marginBottom: 20,
108
  },
109
  video: {
110
    width: "100%",
111
    aspectRatio: 16 / 9,
112
    borderRadius: 12,
113
    backgroundColor: "#000",
114
    overflow: "hidden",
115
    elevation: 8,
116
    shadowColor: "#000",
117
    shadowOffset: { width: 0, height: 4 },
118
    shadowOpacity: 0.1,
119
    shadowRadius: 6,
120
  },
121
});

1
fastpixData.data.viewer_id = "YOUR_CUSTOM_VIEWER_ID"

1
<FastPixVideo
2
  source={{ uri: "https://your-stream-url.m3u8" }}
3
  controls
4
  shouldTrackViewer={false} // Disable SDK-managed viewer ID
5
  fastpixData={{
6
    data: {
7
      workspace_id: "YOUR_WORKSPACE_ID",
8
      viewer_id: "user_12345", // Your own custom viewer ID
9
10
      // Additional Metadata (optional)
11
      video_title: "Sample Video",
12
      video_id: "video_001",
13
      video_stream_type: "on-demand",
14
    },
15
  }}
16
/>

1
<FastPixVideo
2
  source={{ uri: "https://your-stream-url.m3u8" }}
3
  controls
4
  shouldTrackViewer={true} // Enable SDK-managed viewer ID
5
  fastpixData={{
6
    data: {
7
      workspace_id: "YOUR_WORKSPACE_ID",
8
      viewer_id: "user_12345", // Your own custom viewer ID
9
10
      // Additional Metadata (optional)
11
      video_title: "Sample Video",
12
      video_id: "video_001",
13
      video_stream_type: "on-demand",
14
    },
15
  }}
16
/>

1
Platform = { Platform }; 
2
Dimensions = { Dimensions }; 

1
<FastPixVideo
2
  source={{ uri: "https://your-stream-url.m3u8" }}
3
  controls
4
  Platform={Platform} // Mandatory
5
  Dimensions={Dimensions} // Mandatory
6
  fastpixData={{
7
    data: {
8
      workspace_id: "YOUR_WORKSPACE_ID",
9
10
      // Additional Metadata (optional)
11
      video_title: "Sample Video",
12
      video_id: "video_001",
13
      video_stream_type: "on-demand",
14
    },
15
  }}
16
/>

1
<FastPixVideo
2
  source={{ uri: "https://your-stream-url.m3u8" }}
3
  controls
4
  Platform={Platform} // Mandatory
5
  Dimensions={Dimensions} // Mandatory
6
  reportBandwidth={true} // Track bitrate/variant changes
7
  fastpixData={{
8
    data: {
9
      workspace_id: "YOUR_WORKSPACE_ID",
10
11
      // Additional Metadata (optional)
12
      video_title: "Sample Video",
13
      video_id: "video_001",
14
      video_stream_type: "on-demand",
15
    },
16
  }}
17
/>