Skip to content
This repository has been archived by the owner on Jun 28, 2024. It is now read-only.

Commit

Permalink
Add autoStreaming and preview options to screenshare (#51)
Browse files Browse the repository at this point in the history 
* Fix screenshare state being lost on disconnect

* Add `autoStreaming` and `preview` options to screenshare

* Run prettier
  • Loading branch information
@szebniok
szebniok authored Oct 18, 2023
1 parent 8282949 commit 57c09db
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 23 deletions.
2 changes: 1 addition & 1 deletion examples/use-camera-and-microphone-example/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions examples/use-camera-and-microphone-example/src/MainControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ const videoPreviewAtom = atomWithStorage<boolean | undefined>("videoPreview", un
const audioAutoStreamingAtom = atomWithStorage<boolean | undefined>("audioAutoStreaming", undefined);
const audioPreviewAtom = atomWithStorage<boolean | undefined>("audioPreviewAtom", undefined);

const screenshareAutoStreamingAtom = atomWithStorage<boolean | undefined>("screenshareAutoStreaming", undefined);
const screensharePreviewAtom = atomWithStorage<boolean | undefined>("screensharePreviewAtom", undefined);

const autostartAtom = atomWithStorage<boolean>("autostart", false, undefined, { unstable_getOnInit: true });

export const MainControls = () => {
Expand All @@ -47,6 +50,9 @@ export const MainControls = () => {
const [audioAutoStreaming, setAudioAutoStreaming] = useAtom(audioAutoStreamingAtom);
const [audioPreview, setAudioPreview] = useAtom(audioPreviewAtom);

const [screenshareAutoStreaming, setScreenshareAutoStreaming] = useAtom(screenshareAutoStreamingAtom);
const [screensharePreview, setScreensharePreview] = useAtom(screensharePreviewAtom);

const [autostart, setAutostart] = useAtom(autostartAtom);

const { init } = useSetupMedia({
Expand All @@ -67,6 +73,8 @@ export const MainControls = () => {
defaultTrackMetadata: DEFAULT_AUDIO_TRACK_METADATA,
},
screenshare: {
autoStreaming: screenshareAutoStreaming,
preview: screensharePreview,
trackConstraints: true,
defaultTrackMetadata: DEFAULT_VIDEO_TRACK_METADATA,
},
Expand Down Expand Up @@ -129,6 +137,19 @@ export const MainControls = () => {
set={setAudioPreview}
radioClass="radio-secondary"
/>

<ThreeStateRadio
name="Screenshare Auto Streaming (default false)"
value={screenshareAutoStreaming}
set={setScreenshareAutoStreaming}
radioClass="radio-secondary"
/>
<ThreeStateRadio
name="Screenshare Preview (default true)"
value={screensharePreview}
set={setScreensharePreview}
radioClass="radio-secondary"
/>
</div>
<div className="flex flex-row flex-wrap w-full gap-2">
<button
Expand Down
4 changes: 2 additions & 2 deletions src/reducer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ export const reducer = <PeerMetadata, TrackMetadata>(
case "disconnect":
state?.connectivity?.client?.removeAllListeners();
state?.connectivity?.client?.disconnect();
return { ...createDefaultState(), media: state.media };
return { ...createDefaultState(), media: state.media, screenshare: state.screenshare, devices: state.devices };
// connections events
case "onSocketOpen":
return onSocketOpen<PeerMetadata, TrackMetadata>()(state);
Expand All @@ -405,7 +405,7 @@ export const reducer = <PeerMetadata, TrackMetadata>(
state?.connectivity?.client?.removeAllListeners();
state?.connectivity?.client?.disconnect();
// return onDisconnected<PeerMetadata, TrackMetadata>()(state)
return { ...createDefaultState(), media: state.media };
return { ...createDefaultState(), media: state.media, screenshare: state.screenshare, devices: state.devices };
case "onAuthSuccess":
return onAuthSuccess<PeerMetadata, TrackMetadata>()(state);
case "onAuthError":
Expand Down
28 changes: 26 additions & 2 deletions src/useMedia/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,23 @@ export const useSetupMedia = <PeerMetadata, TrackMetadata>(
if (config.microphone.autoStreaming && mediaRef.current.data?.audio.status === "OK") {
addTrack("audio", config.microphone.defaultTrackMetadata, undefined, config.microphone.defaultMaxBandwidth);
}

if (config.screenshare.autoStreaming && screenshareMediaRef.current.data?.status === "OK") {
addTrack(
"screenshare",
config.screenshare.defaultTrackMetadata,
undefined,
config.screenshare.defaultMaxBandwidth
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [state.status, config.camera.autoStreaming, config.microphone.autoStreaming, addTrack]);
}, [
state.status,
config.camera.autoStreaming,
config.microphone.autoStreaming,
config.screenshare.autoStreaming,
addTrack,
]);

const removeTrack = useCallback(
(type: Type) => {
Expand Down Expand Up @@ -172,7 +187,16 @@ export const useSetupMedia = <PeerMetadata, TrackMetadata>(
const screenshareTrack = screenshareResult.data?.media?.track;
const screenshareStream = screenshareResult.data?.media?.stream;

if (screenshareTrackIdRef.current && screenshareTrack && screenshareStream) {
const screensharePreview = config.screenshare.preview ?? true;

if (!screensharePreview && screenshareResult.data?.status === "OK" && screenshareStream) {
addTrack(
"screenshare",
config.screenshare.defaultTrackMetadata,
undefined,
config.screenshare.defaultMaxBandwidth
);
} else if (screenshareTrackIdRef.current && screenshareTrack && screenshareStream) {
// todo track metadata
if (!screenshareTrackIdRef.current) return;
replaceTrack("screenshare", screenshareTrack, screenshareStream, undefined);
Expand Down
2 changes: 2 additions & 0 deletions src/useMedia/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export type UseSetupMediaConfig<TrackMetadata> = {
defaultMaxBandwidth?: TrackBandwidthLimit;
};
screenshare: {
autoStreaming?: boolean;
preview?: boolean;
trackConstraints: boolean | MediaTrackConstraints;
defaultTrackMetadata?: TrackMetadata;
defaultMaxBandwidth?: TrackBandwidthLimit;
Expand Down
36 changes: 18 additions & 18 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@
"uuid" "^8.3.2"

"@jellyfish-dev/ts-client-sdk@^0.2.0":
version "0.2.0"
resolved "https://registry.npmjs.org/@jellyfish-dev/ts-client-sdk/-/ts-client-sdk-0.2.0.tgz"
integrity sha512-Bk9YWo7rG5CtHc2pawRtSRn/m3o5SIj2TXtXSEcrFEVoYbjHnNlCW5ns+LpvCOvspBxXTJfiXReBCzqpIpBkWQ==
"integrity" "sha512-Bk9YWo7rG5CtHc2pawRtSRn/m3o5SIj2TXtXSEcrFEVoYbjHnNlCW5ns+LpvCOvspBxXTJfiXReBCzqpIpBkWQ=="
"resolved" "https://registry.npmjs.org/@jellyfish-dev/ts-client-sdk/-/ts-client-sdk-0.2.0.tgz"
"version" "0.2.0"
dependencies:
"@jellyfish-dev/membrane-webrtc-js" "^0.5.1"
"events" "^3.3.0"
Expand Down Expand Up @@ -174,9 +174,9 @@
"version" "4.14.195"

"@types/node@>=13.7.0":
version "20.8.2"
resolved "https://registry.npmjs.org/@types/node/-/node-20.8.2.tgz"
integrity sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w==
"integrity" "sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w=="
"resolved" "https://registry.npmjs.org/@types/node/-/node-20.8.2.tgz"
"version" "20.8.2"

"@types/prop-types@*":
"integrity" "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
Expand Down Expand Up @@ -440,10 +440,10 @@
dependencies:
"esutils" "^2.0.2"

dprint-node@^1.0.7:
version "1.0.8"
resolved "https://registry.npmjs.org/dprint-node/-/dprint-node-1.0.8.tgz"
integrity sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg==
"dprint-node@^1.0.7":
"integrity" "sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg=="
"resolved" "https://registry.npmjs.org/dprint-node/-/dprint-node-1.0.8.tgz"
"version" "1.0.8"
dependencies:
"detect-libc" "^1.0.3"

Expand Down Expand Up @@ -1110,10 +1110,10 @@ dprint-node@^1.0.7:
dependencies:
"is-number" "^7.0.0"

ts-poet@^6.5.0:
version "6.6.0"
resolved "https://registry.npmjs.org/ts-poet/-/ts-poet-6.6.0.tgz"
integrity sha512-4vEH/wkhcjRPFOdBwIh9ItO6jOoumVLRF4aABDX5JSNEubSqwOulihxQPqai+OkuygJm3WYMInxXQX4QwVNMuw==
"ts-poet@^6.5.0":
"integrity" "sha512-4vEH/wkhcjRPFOdBwIh9ItO6jOoumVLRF4aABDX5JSNEubSqwOulihxQPqai+OkuygJm3WYMInxXQX4QwVNMuw=="
"resolved" "https://registry.npmjs.org/ts-poet/-/ts-poet-6.6.0.tgz"
"version" "6.6.0"
dependencies:
"dprint-node" "^1.0.7"

Expand All @@ -1125,10 +1125,10 @@ ts-poet@^6.5.0:
"long" "^5.2.3"
"protobufjs" "^7.2.4"

ts-proto@^1.147.2:
version "1.160.0"
resolved "https://registry.npmjs.org/ts-proto/-/ts-proto-1.160.0.tgz"
integrity sha512-AUJQ0noLEkLew81MYmNPF/z8QDIBxAIJ4UKt9sH2AwdaywOTk1jh1NoluoCr3cGScpVh0GHWCB/UA4V0fOO8fg==
"ts-proto@^1.147.2":
"integrity" "sha512-AUJQ0noLEkLew81MYmNPF/z8QDIBxAIJ4UKt9sH2AwdaywOTk1jh1NoluoCr3cGScpVh0GHWCB/UA4V0fOO8fg=="
"resolved" "https://registry.npmjs.org/ts-proto/-/ts-proto-1.160.0.tgz"
"version" "1.160.0"
dependencies:
"case-anything" "^2.1.13"
"protobufjs" "^7.2.4"
Expand Down

0 comments on commit 57c09db

Please sign in to comment.