@stream-io/video-react-native-sdk 0.0.1-alpha.275 → 0.0.1-alpha.277

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/src/components/participants/LocalParticipantView.js +8 -2
  3. package/dist/src/components/participants/LocalParticipantView.js.map +1 -1
  4. package/dist/src/providers/MediaStreamManagement/index.js +10 -18
  5. package/dist/src/providers/MediaStreamManagement/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/participants/LocalParticipantView.tsx +17 -2
  8. package/src/providers/MediaStreamManagement/index.tsx +17 -27
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [0.0.1-alpha.277](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.276...@stream-io/video-react-native-sdk-0.0.1-alpha.277) (2023-07-12)
6
+
7
+
8
+
9
+ ## [0.0.1-alpha.276](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.275...@stream-io/video-react-native-sdk-0.0.1-alpha.276) (2023-07-12)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * **react-native:** camera facing mode mirroring issue ([#775](https://github.com/GetStream/stream-video-js/issues/775)) ([92eb545](https://github.com/GetStream/stream-video-js/commit/92eb545609fb6722636716d064d8108e8849d3be))
15
+
16
+
17
+
5
18
  ## [0.0.1-alpha.275](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.274...@stream-io/video-react-native-sdk-0.0.1-alpha.275) (2023-07-12)
6
19
 
7
20
 
package/dist/src/components/participants/LocalParticipantView.js CHANGED
@@ -34,6 +34,7 @@ const icons_1 = require("../../icons");
34
34
  const A11yLabels_1 = require("../../constants/A11yLabels");
35
35
  const Avatar_1 = require("../utility/Avatar");
36
36
  const constants_1 = require("../../constants");
37
+ const hooks_1 = require("../../utils/hooks");
37
38
  const MediaStreamManagement_1 = require("../../providers/MediaStreamManagement");
38
39
  const ParticipantReaction_1 = require("./internal/ParticipantReaction");
39
40
  /**
@@ -47,6 +48,8 @@ const LocalParticipantView = (props) => {
47
48
  const { style = containerStyle } = props;
48
49
  const localParticipant = (0, video_react_bindings_1.useLocalParticipant)();
49
50
  const { isCameraOnFrontFacingMode } = (0, MediaStreamManagement_1.useMediaStreamManagement)();
51
+ // it takes a few milliseconds for the camera stream to actually switch
52
+ const debouncedCameraOnFrontFacingMode = (0, hooks_1.useDebouncedValue)(isCameraOnFrontFacingMode, 300);
50
53
  const pan = (0, react_1.useRef)(new react_native_1.Animated.ValueXY()).current;
51
54
  const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
52
55
  onMoveShouldSetPanResponder: () => true,
@@ -61,12 +64,15 @@ const LocalParticipantView = (props) => {
61
64
  return null;
62
65
  }
63
66
  const isVideoMuted = !localParticipant.publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
67
+ // when camera is switching show a blank stream
68
+ //otherwise the camera stream will be shown in wrong mirror state for a few milliseconds
69
+ const showBlankStream = isCameraOnFrontFacingMode !== debouncedCameraOnFrontFacingMode;
64
70
  if (layout === 'fullscreen') {
65
71
  return (<react_native_1.View accessibilityLabel={A11yLabels_1.A11yComponents.LOCAL_PARTICIPANT_FULLSCREEN} style={style}>
66
72
  <react_native_1.View style={styles.topView}>
67
73
  <ParticipantReaction_1.ParticipantReaction reaction={localParticipant.reaction} sessionId={localParticipant.sessionId}/>
68
74
  </react_native_1.View>
69
- {isVideoMuted ? (<Avatar_1.Avatar participant={localParticipant}/>) : (<VideoRenderer_1.VideoRenderer mirror={isCameraOnFrontFacingMode} mediaStream={localParticipant.videoStream} style={styles.videoStreamFullScreen} zOrder={zOrder}/>)}
75
+ {isVideoMuted ? (<Avatar_1.Avatar participant={localParticipant}/>) : showBlankStream ? (<react_native_1.View style={styles.videoStreamFullScreen}/>) : (<VideoRenderer_1.VideoRenderer mirror={debouncedCameraOnFrontFacingMode} mediaStream={localParticipant.videoStream} style={styles.videoStreamFullScreen} zOrder={zOrder}/>)}
70
76
  </react_native_1.View>);
71
77
  }
72
78
  return (<react_native_1.Animated.View accessibilityLabel={A11yLabels_1.A11yComponents.LOCAL_PARTICIPANT} style={{
@@ -80,7 +86,7 @@ const LocalParticipantView = (props) => {
80
86
  </react_native_1.View>
81
87
  {isVideoMuted ? (<react_native_1.View style={theme_1.theme.icon.md}>
82
88
  <icons_1.VideoSlash color={theme_1.theme.light.static_white}/>
83
- </react_native_1.View>) : (<VideoRenderer_1.VideoRenderer mirror={isCameraOnFrontFacingMode} mediaStream={localParticipant.videoStream} style={styles.videoStream} zOrder={zOrder}/>)}
89
+ </react_native_1.View>) : showBlankStream ? (<react_native_1.View style={styles.videoStream}/>) : (<VideoRenderer_1.VideoRenderer mirror={debouncedCameraOnFrontFacingMode} mediaStream={localParticipant.videoStream} style={styles.videoStream} zOrder={zOrder}/>)}
84
90
  </react_native_1.View>
85
91
  </react_native_1.Animated.View>);
86
92
  };
package/dist/src/components/participants/LocalParticipantView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LocalParticipantView.js","sourceRoot":"","sources":["../../../../src/components/participants/LocalParticipantView.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"LocalParticipantView.js","sourceRoot":"","sources":["../../../../src/components/participants/LocalParticipantView.tsx"],"names":[],"mappings":"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"}
package/dist/src/providers/MediaStreamManagement/index.js CHANGED
@@ -47,9 +47,8 @@ const MediaStreamManagement = ({ children }) => {
47
47
  const call = (0, video_react_bindings_1.useCall)();
48
48
  const callingState = (0, video_react_bindings_1.useCallCallingState)();
49
49
  const videoDevices = (0, contexts_1.useStreamVideoStoreValue)((store) => store.videoDevices);
50
- const currentVideoDevice = (0, contexts_1.useStreamVideoStoreValue)((store) => store.currentVideoDevice);
51
- const setState = (0, contexts_1.useStreamVideoStoreSetState)();
52
- const [isCameraOnFrontFacingMode, setIsCameraOnFrontFacingMode] = (0, react_1.useState)(currentVideoDevice?.facing === 'front' ?? false);
50
+ const localVideoStream = (0, video_react_bindings_1.useLocalParticipant)()?.videoStream;
51
+ const [isCameraOnFrontFacingMode, setIsCameraOnFrontFacingMode] = (0, react_1.useState)(true);
53
52
  const [initAudioEnabled, setInitialAudioEnabled] = (0, react_1.useState)(permissions_1.isMicPermissionGranted$.getValue());
54
53
  const [initVideoEnabled, setInitialVideoEnabled] = (0, react_1.useState)(permissions_1.isCameraPermissionGranted$.getValue());
55
54
  const publishVideoStream = (0, useVideoPublisher_1.useVideoPublisher)({
@@ -91,23 +90,16 @@ const MediaStreamManagement = ({ children }) => {
91
90
  return !prev;
92
91
  }), []);
93
92
  const toggleCameraFacingMode = (0, react_1.useCallback)(() => {
94
- const videoDevice = videoDevices.find((device) => {
95
- // Check to only switch between video devices
96
- if (device.kind !== 'videoinput') {
97
- return;
93
+ const canSwitchCamera = videoDevices.length > 1;
94
+ if (canSwitchCamera && localVideoStream) {
95
+ const tracks = localVideoStream.getVideoTracks();
96
+ const videoTrack = tracks[0];
97
+ if (videoTrack) {
98
+ videoTrack._switchCamera();
99
+ setIsCameraOnFrontFacingMode((prev) => !prev);
98
100
  }
99
- return !isCameraOnFrontFacingMode
100
- ? device.facing === 'front'
101
- : device.facing === 'environment';
102
- });
103
- if (!videoDevice) {
104
- return;
105
101
  }
106
- setIsCameraOnFrontFacingMode((prev) => !prev);
107
- setState({
108
- currentVideoDevice: videoDevice,
109
- });
110
- }, [isCameraOnFrontFacingMode, videoDevices, setState]);
102
+ }, [localVideoStream, videoDevices.length]);
111
103
  const contextValue = (0, react_1.useMemo)(() => {
112
104
  return {
113
105
  initialAudioEnabled: initAudioEnabled,
package/dist/src/providers/MediaStreamManagement/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/providers/MediaStreamManagement/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAOe;AACf,0DAAkE;AAClE,0EAA+E;AAC/E,uEAG+C;AAC/C,2DAAwD;AACxD,2DAAwD;AACxD,+CAAqC;AACrC,6CAGwB;AAmDxB,MAAM,kBAAkB,GACtB,IAAA,qBAAa,EAAyC,IAAI,CAAC,CAAC;AAE9D;;;;;;;;;GASG;AACI,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAyB,EAAE,EAAE;IAC3E,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,MAAM,YAAY,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,IAAA,mCAAwB,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7E,MAAM,kBAAkB,GAAG,IAAA,mCAAwB,EACjD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB,CACpC,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,sCAA2B,GAAE,CAAC;IAE/C,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,IAAA,gBAAQ,EACxE,kBAAkB,EAAE,MAAM,KAAK,OAAO,IAAI,KAAK,CAChD,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EACzD,qCAAuB,CAAC,QAAQ,EAAE,CACnC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EACzD,wCAA0B,CAAC,QAAQ,EAAE,CACtC,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAA,qCAAiB,EAAC;QAC3C,iBAAiB,EAAE,CAAC,gBAAgB;KACrC,CAAC,CAAC;IACH,MAAM,kBAAkB,GAAG,IAAA,qCAAiB,EAAC;QAC3C,iBAAiB,EAAE,CAAC,gBAAgB;KACrC,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC3C,IACE,YAAY,KAAK,2BAAY,CAAC,IAAI;YAClC,YAAY,KAAK,2BAAY,CAAC,OAAO,EACrC;YACA,sBAAsB,CAAC,KAAK,CAAC,CAAC;SAC/B;aAAM;YACL,IAAI,EAAE,WAAW,CAAC,wBAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SAC9C;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC3C,IACE,YAAY,KAAK,2BAAY,CAAC,IAAI;YAClC,YAAY,KAAK,2BAAY,CAAC,OAAO,EACrC;YACA,sBAAsB,CAAC,KAAK,CAAC,CAAC;SAC/B;aAAM;YACL,IAAI,EAAE,WAAW,CAAC,wBAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SAC9C;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,2BAA2B,GAAG,IAAA,mBAAW,EAC7C,GAAG,EAAE,CACH,sBAAsB,CAAC,CAAC,IAAI,EAAE,EAAE;QAC9B,IAAI,CAAC,qCAAuB,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;YAChD,oBAAK,CAAC,KAAK,CACT,yDAAyD,CAC1D,CAAC;YACF,OAAO,KAAK,CAAC;SACd;QACD,OAAO,CAAC,IAAI,CAAC;IACf,CAAC,CAAC,EACJ,EAAE,CACH,CAAC;IACF,MAAM,2BAA2B,GAAG,IAAA,mBAAW,EAC7C,GAAG,EAAE,CACH,sBAAsB,CAAC,CAAC,IAAI,EAAE,EAAE;QAC9B,IAAI,CAAC,wCAA0B,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;YACnD,oBAAK,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;YACnE,OAAO,KAAK,CAAC;SACd;QACD,OAAO,CAAC,IAAI,CAAC;IACf,CAAC,CAAC,EACJ,EAAE,CACH,CAAC;IAEF,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC9C,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YAC/C,6CAA6C;YAC7C,IAAI,MAAM,CAAC,IAAI,KAAK,YAAY,EAAE;gBAChC,OAAO;aACR;YACD,OAAO,CAAC,yBAAyB;gBAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,OAAO;gBAC3B,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,aAAa,CAAC;QACtC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,4BAA4B,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC9C,QAAQ,CAAC;YACP,kBAAkB,EAAE,WAAW;SAChC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,yBAAyB,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChC,OAAO;YACL,mBAAmB,EAAE,gBAAgB;YACrC,mBAAmB,EAAE,gBAAgB;YACrC,yBAAyB;YACzB,2BAA2B;YAC3B,2BAA2B;YAC3B,sBAAsB;YACtB,kBAAkB;YAClB,kBAAkB;YAClB,mBAAmB;YACnB,mBAAmB;SACpB,CAAC;IACJ,CAAC,EAAE;QACD,gBAAgB;QAChB,gBAAgB;QAChB,yBAAyB;QACzB,2BAA2B;QAC3B,2BAA2B;QAC3B,sBAAsB;QACtB,kBAAkB;QAClB,kBAAkB;QAClB,mBAAmB;QACnB,mBAAmB;KACpB,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAC/C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAC/B,CAAC;AACJ,CAAC,CAAC;AA7HW,QAAA,qBAAqB,yBA6HhC;AAEF;;;;;GAKG;AACI,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,MAAM,KAAK,GAAG,IAAA,kBAAU,EAAC,kBAAkB,CAAC,CAAC;IAC7C,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;KAC1C;IACD,OAAO,KAAwC,CAAC;AAClD,CAAC,CAAC;AANW,QAAA,wBAAwB,4BAMnC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/providers/MediaStreamManagement/index.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -84,5 +84,5 @@
84
84
  "typedoc-plugin-markdown": "^3.15.3",
85
85
  "typescript": "^4.9.5"
86
86
  },
87
- "version": "0.0.1-alpha.275"
87
+ "version": "0.0.1-alpha.277"
88
88
  }
package/src/components/participants/LocalParticipantView.tsx CHANGED
@@ -15,6 +15,7 @@ import { VideoSlash } from '../../icons';
15
15
  import { A11yComponents } from '../../constants/A11yLabels';
16
16
  import { Avatar } from '../utility/Avatar';
17
17
  import { LOCAL_VIDEO_VIEW_STYLE, Z_INDEX } from '../../constants';
18
+ import { useDebouncedValue } from '../../utils/hooks';
18
19
  import { useMediaStreamManagement } from '../../providers/MediaStreamManagement';
19
20
  import { ParticipantReaction } from './internal/ParticipantReaction';
20
21
 
@@ -58,6 +59,11 @@ export const LocalParticipantView = (props: LocalParticipantViewProps) => {
58
59
  const { style = containerStyle } = props;
59
60
  const localParticipant = useLocalParticipant();
60
61
  const { isCameraOnFrontFacingMode } = useMediaStreamManagement();
62
+ // it takes a few milliseconds for the camera stream to actually switch
63
+ const debouncedCameraOnFrontFacingMode = useDebouncedValue(
64
+ isCameraOnFrontFacingMode,
65
+ 300,
66
+ );
61
67
  const pan = useRef(new Animated.ValueXY()).current;
62
68
  const panResponder = useRef(
63
69
  PanResponder.create({
@@ -79,6 +85,11 @@ export const LocalParticipantView = (props: LocalParticipantViewProps) => {
79
85
  SfuModels.TrackType.VIDEO,
80
86
  );
81
87
 
88
+ // when camera is switching show a blank stream
89
+ //otherwise the camera stream will be shown in wrong mirror state for a few milliseconds
90
+ const showBlankStream =
91
+ isCameraOnFrontFacingMode !== debouncedCameraOnFrontFacingMode;
92
+
82
93
  if (layout === 'fullscreen') {
83
94
  return (
84
95
  <View
@@ -93,9 +104,11 @@ export const LocalParticipantView = (props: LocalParticipantViewProps) => {
93
104
  </View>
94
105
  {isVideoMuted ? (
95
106
  <Avatar participant={localParticipant} />
107
+ ) : showBlankStream ? (
108
+ <View style={styles.videoStreamFullScreen} />
96
109
  ) : (
97
110
  <VideoRenderer
98
- mirror={isCameraOnFrontFacingMode}
111
+ mirror={debouncedCameraOnFrontFacingMode}
99
112
  mediaStream={localParticipant.videoStream}
100
113
  style={styles.videoStreamFullScreen}
101
114
  zOrder={zOrder}
@@ -126,9 +139,11 @@ export const LocalParticipantView = (props: LocalParticipantViewProps) => {
126
139
  <View style={theme.icon.md}>
127
140
  <VideoSlash color={theme.light.static_white} />
128
141
  </View>
142
+ ) : showBlankStream ? (
143
+ <View style={styles.videoStream} />
129
144
  ) : (
130
145
  <VideoRenderer
131
- mirror={isCameraOnFrontFacingMode}
146
+ mirror={debouncedCameraOnFrontFacingMode}
132
147
  mediaStream={localParticipant.videoStream}
133
148
  style={styles.videoStream}
134
149
  zOrder={zOrder}
package/src/providers/MediaStreamManagement/index.tsx CHANGED
@@ -7,7 +7,11 @@ import React, {
7
7
  useState,
8
8
  } from 'react';
9
9
  import { CallingState, SfuModels } from '@stream-io/video-client';
10
- import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
10
+ import {
11
+ useCall,
12
+ useCallCallingState,
13
+ useLocalParticipant,
14
+ } from '@stream-io/video-react-bindings';
11
15
  import {
12
16
  isMicPermissionGranted$,
13
17
  isCameraPermissionGranted$,
@@ -15,10 +19,7 @@ import {
15
19
  import { useAudioPublisher } from './useAudioPublisher';
16
20
  import { useVideoPublisher } from './useVideoPublisher';
17
21
  import { Alert } from 'react-native';
18
- import {
19
- useStreamVideoStoreSetState,
20
- useStreamVideoStoreValue,
21
- } from '../../contexts';
22
+ import { useStreamVideoStoreValue } from '../../contexts';
22
23
 
23
24
  /**
24
25
  * API to control device enablement, device selection and media stream access for a call.
@@ -86,14 +87,10 @@ export const MediaStreamManagement = ({ children }: PropsWithChildren<{}>) => {
86
87
  const call = useCall();
87
88
  const callingState = useCallCallingState();
88
89
  const videoDevices = useStreamVideoStoreValue((store) => store.videoDevices);
89
- const currentVideoDevice = useStreamVideoStoreValue(
90
- (store) => store.currentVideoDevice,
91
- );
92
- const setState = useStreamVideoStoreSetState();
90
+ const localVideoStream = useLocalParticipant()?.videoStream;
93
91
 
94
- const [isCameraOnFrontFacingMode, setIsCameraOnFrontFacingMode] = useState(
95
- currentVideoDevice?.facing === 'front' ?? false,
96
- );
92
+ const [isCameraOnFrontFacingMode, setIsCameraOnFrontFacingMode] =
93
+ useState(true);
97
94
 
98
95
  const [initAudioEnabled, setInitialAudioEnabled] = useState<boolean>(
99
96
  isMicPermissionGranted$.getValue(),
@@ -158,23 +155,16 @@ export const MediaStreamManagement = ({ children }: PropsWithChildren<{}>) => {
158
155
  );
159
156
 
160
157
  const toggleCameraFacingMode = useCallback(() => {
161
- const videoDevice = videoDevices.find((device) => {
162
- // Check to only switch between video devices
163
- if (device.kind !== 'videoinput') {
164
- return;
158
+ const canSwitchCamera = videoDevices.length > 1;
159
+ if (canSwitchCamera && localVideoStream) {
160
+ const tracks = localVideoStream.getVideoTracks();
161
+ const videoTrack = tracks[0];
162
+ if (videoTrack) {
163
+ videoTrack._switchCamera();
164
+ setIsCameraOnFrontFacingMode((prev) => !prev);
165
165
  }
166
- return !isCameraOnFrontFacingMode
167
- ? device.facing === 'front'
168
- : device.facing === 'environment';
169
- });
170
- if (!videoDevice) {
171
- return;
172
166
  }
173
- setIsCameraOnFrontFacingMode((prev) => !prev);
174
- setState({
175
- currentVideoDevice: videoDevice,
176
- });
177
- }, [isCameraOnFrontFacingMode, videoDevices, setState]);
167
+ }, [localVideoStream, videoDevices.length]);
178
168
 
179
169
  const contextValue = useMemo(() => {
180
170
  return {