tangled
alpha
login
or
join now
stream.place
/
streamplace
Live video on the AT Protocol
74
fork
atom
overview
issues
1
pulls
pipelines
Merge branch 'eli/webrtc-with-pip' into 0.7-rc
Eli Mallon
7 months ago
abddd7bf
9155a5d3
+37
-9
4 changed files
expand all
collapse all
unified
split
js
app
app.config.ts
components
player
video.native.tsx
package.json
pnpm-lock.yaml
+7
js/app/app.config.ts
···
157
"expo-video",
158
"expo-web-browser",
159
streamplaceReactNativeWebRTC,
0
0
0
0
0
0
0
160
["expo-sqlite", { useSQLCipher: true }],
161
"expo-file-system",
162
[
···
157
"expo-video",
158
"expo-web-browser",
159
streamplaceReactNativeWebRTC,
160
+
[
161
+
"expo-video",
162
+
{
163
+
supportsBackgroundPlayback: true,
164
+
supportsPictureInPicture: true,
165
+
},
166
+
],
167
["expo-sqlite", { useSQLCipher: true }],
168
"expo-file-system",
169
[
+23
-3
js/app/components/player/video.native.tsx
···
5
useStreamplaceStore,
6
} from "@streamplace/components";
7
import { useVideoPlayer, VideoPlayerEvents, VideoView } from "expo-video";
8
-
import { useEffect } from "react";
9
-
import { MediaStream, RTCView } from "react-native-webrtc";
10
import { View } from "tamagui";
11
import { srcToUrl } from "./shared";
12
import useWebRTC from "./use-webrtc";
···
101
onFullscreenExit={() => {
102
setFullscreen(false);
103
}}
104
-
allowsPictureInPicture
0
105
/>
106
);
107
}
···
113
{ src: src, selectedRendition },
114
PlayerProtocol.WEBRTC,
115
);
0
116
const [stream, stuck] = useWebRTC(url);
117
118
const setStatus = usePlayerStore((x) => x.setStatus);
···
154
return <View></View>;
155
}
156
0
0
0
0
0
0
0
0
0
0
0
157
return (
158
<RTCView
0
159
mirror={false}
160
objectFit={"contain"}
161
streamURL={mediaStream.toURL()}
162
style={{
163
backgroundColor: "#111",
164
flex: 1,
0
0
0
0
0
0
165
}}
166
/>
167
);
···
5
useStreamplaceStore,
6
} from "@streamplace/components";
7
import { useVideoPlayer, VideoPlayerEvents, VideoView } from "expo-video";
8
+
import { useEffect, useRef } from "react";
9
+
import { MediaStream, RTCPIPView, RTCView } from "react-native-webrtc";
10
import { View } from "tamagui";
11
import { srcToUrl } from "./shared";
12
import useWebRTC from "./use-webrtc";
···
101
onFullscreenExit={() => {
102
setFullscreen(false);
103
}}
104
+
// allowsPictureInPicture
105
+
// startsPictureInPictureAutomatically
106
/>
107
);
108
}
···
114
{ src: src, selectedRendition },
115
PlayerProtocol.WEBRTC,
116
);
117
+
const rtcView = useRef<typeof RTCPIPView>(null);
118
const [stream, stuck] = useWebRTC(url);
119
120
const setStatus = usePlayerStore((x) => x.setStatus);
···
156
return <View></View>;
157
}
158
159
+
let pipOptions = {
160
+
startAutomatically: true,
161
+
fallbackView: (
162
+
<View style={{ height: 50, width: 50, backgroundColor: "red" }} />
163
+
) as any,
164
+
preferredSize: {
165
+
width: 854,
166
+
height: 480,
167
+
},
168
+
};
169
+
170
return (
171
<RTCView
172
+
ref={rtcView as any}
173
mirror={false}
174
objectFit={"contain"}
175
streamURL={mediaStream.toURL()}
176
style={{
177
backgroundColor: "#111",
178
flex: 1,
179
+
}}
180
+
pictureInPictureEnabled={true}
181
+
autoStartPictureInPicture={true}
182
+
pictureInPicturePreferredSize={{
183
+
width: 160,
184
+
height: 90,
185
}}
186
/>
187
);
+1
-1
js/app/package.json
···
86
"react-native-screens": "~4.11.1",
87
"react-native-svg": "15.12.0",
88
"react-native-web": "^0.20.0",
89
-
"react-native-webrtc": "^124.0.5",
90
"react-native-webview": "13.15.0",
91
"react-redux": "^9.1.2",
92
"react-use-websocket": "^4.13.0",
···
86
"react-native-screens": "~4.11.1",
87
"react-native-svg": "15.12.0",
88
"react-native-web": "^0.20.0",
89
+
"react-native-webrtc": "git+https://github.com/EdgarJMesquita/react-native-webrtc.git#8bae93dc32d6c80b61f12a04974886a6812fbca6",
90
"react-native-webview": "13.15.0",
91
"react-redux": "^9.1.2",
92
"react-use-websocket": "^4.13.0",
+6
-5
pnpm-lock.yaml
···
235
specifier: ^0.20.0
236
version: 0.20.0(encoding@0.1.13)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
237
react-native-webrtc:
238
-
specifier: ^124.0.5
239
-
version: 124.0.5(react-native@0.79.3(@babel/core@7.26.0)(@types/react@18.3.12)(bufferutil@4.0.8)(react@19.0.0)(utf-8-validate@5.0.10))
240
react-native-webview:
241
specifier: 13.15.0
242
version: 13.15.0(react-native@0.79.3(@babel/core@7.26.0)(@types/react@18.3.12)(bufferutil@4.0.8)(react@19.0.0)(utf-8-validate@5.0.10))(react@19.0.0)
···
10554
peerDependencies:
10555
react-native: '>=0.60.0'
10556
10557
-
react-native-webrtc@124.0.5:
10558
-
resolution: {integrity: sha512-LIQJKst+t53bJOcQef9VXuz3pVheSBUA4olQGkxosbF4pHW1gsWoXYmf6wmI2zrqOA+aZsjjB6aT9AKLyr6a0Q==}
0
10559
peerDependencies:
10560
react-native: '>=0.60.0'
10561
···
26863
transitivePeerDependencies:
26864
- supports-color
26865
26866
-
react-native-webrtc@124.0.5(react-native@0.79.3(@babel/core@7.26.0)(@types/react@18.3.12)(bufferutil@4.0.8)(react@19.0.0)(utf-8-validate@5.0.10)):
26867
dependencies:
26868
base64-js: 1.5.1
26869
debug: 4.3.4
···
235
specifier: ^0.20.0
236
version: 0.20.0(encoding@0.1.13)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
237
react-native-webrtc:
238
+
specifier: git+https://github.com/EdgarJMesquita/react-native-webrtc.git#8bae93dc32d6c80b61f12a04974886a6812fbca6
239
+
version: https://codeload.github.com/EdgarJMesquita/react-native-webrtc/tar.gz/8bae93dc32d6c80b61f12a04974886a6812fbca6(react-native@0.79.3(@babel/core@7.26.0)(@types/react@18.3.12)(bufferutil@4.0.8)(react@19.0.0)(utf-8-validate@5.0.10))
240
react-native-webview:
241
specifier: 13.15.0
242
version: 13.15.0(react-native@0.79.3(@babel/core@7.26.0)(@types/react@18.3.12)(bufferutil@4.0.8)(react@19.0.0)(utf-8-validate@5.0.10))(react@19.0.0)
···
10554
peerDependencies:
10555
react-native: '>=0.60.0'
10556
10557
+
react-native-webrtc@https://codeload.github.com/EdgarJMesquita/react-native-webrtc/tar.gz/8bae93dc32d6c80b61f12a04974886a6812fbca6:
10558
+
resolution: {tarball: https://codeload.github.com/EdgarJMesquita/react-native-webrtc/tar.gz/8bae93dc32d6c80b61f12a04974886a6812fbca6}
10559
+
version: 124.0.5
10560
peerDependencies:
10561
react-native: '>=0.60.0'
10562
···
26864
transitivePeerDependencies:
26865
- supports-color
26866
26867
+
react-native-webrtc@https://codeload.github.com/EdgarJMesquita/react-native-webrtc/tar.gz/8bae93dc32d6c80b61f12a04974886a6812fbca6(react-native@0.79.3(@babel/core@7.26.0)(@types/react@18.3.12)(bufferutil@4.0.8)(react@19.0.0)(utf-8-validate@5.0.10)):
26868
dependencies:
26869
base64-js: 1.5.1
26870
debug: 4.3.4