@fishjam-cloud/react-client 0.5.1 → 0.5.2
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.
- package/dist/Client.d.ts +6 -17
- package/dist/Client.d.ts.map +1 -1
- package/dist/Client.js +8 -136
- package/dist/DeviceManager.d.ts +2 -2
- package/dist/DeviceManager.d.ts.map +1 -1
- package/dist/create.d.ts +1 -2
- package/dist/create.d.ts.map +1 -1
- package/dist/create.js +109 -136
- package/dist/index.d.ts +2 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/screenShareTrackManager.d.ts +4 -0
- package/dist/screenShareTrackManager.d.ts.map +1 -0
- package/dist/screenShareTrackManager.js +92 -0
- package/dist/state.types.d.ts +1 -6
- package/dist/state.types.d.ts.map +1 -1
- package/dist/trackManager.d.ts +7 -22
- package/dist/trackManager.d.ts.map +1 -1
- package/dist/trackManager.js +84 -84
- package/dist/types.d.ts +48 -29
- package/dist/types.d.ts.map +1 -1
- package/dist/useSetupMedia.d.ts.map +1 -1
- package/dist/useSetupMedia.js +13 -69
- package/dist/utils/track.d.ts +4 -0
- package/dist/utils/track.d.ts.map +1 -0
- package/dist/utils/track.js +37 -0
- package/package.json +6 -6
- package/readme.md +10 -14
- package/dist/ScreenShareManager.d.ts +0 -57
- package/dist/ScreenShareManager.d.ts.map +0 -1
- package/dist/ScreenShareManager.js +0 -135
package/readme.md
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
[](https://www.npmjs.com/package/@fishjam-cloud/react-client)
|
|
2
|
+
[](https://www.typescriptlang.org)
|
|
3
|
+
[](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_react_client.html)
|
|
4
|
+
|
|
1
5
|
# Fishjam React Client
|
|
2
6
|
|
|
3
7
|
React client library for [Fishjam Cloud](https://cloud.fishjam.stream).
|
|
@@ -6,7 +10,7 @@ the [TS client](../ts-client/README.md).
|
|
|
6
10
|
|
|
7
11
|
## Documentation
|
|
8
12
|
|
|
9
|
-
Documentation is available [here](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_react_client.html or you can generate it locally:
|
|
13
|
+
Documentation is available [here](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_react_client.html) or you can generate it locally:
|
|
10
14
|
|
|
11
15
|
```bash
|
|
12
16
|
yarn run docs
|
|
@@ -14,26 +18,23 @@ yarn run docs
|
|
|
14
18
|
|
|
15
19
|
## Installation
|
|
16
20
|
|
|
17
|
-
You can install
|
|
21
|
+
You can install this package using `npm`:
|
|
18
22
|
|
|
19
23
|
```bash
|
|
20
24
|
npm install @fishjam-cloud/react-client
|
|
21
25
|
```
|
|
22
26
|
|
|
27
|
+
or `yarn`:
|
|
28
|
+
|
|
23
29
|
```bash
|
|
24
|
-
yarn
|
|
30
|
+
yarn @fishjam-cloud/react-client
|
|
25
31
|
```
|
|
26
32
|
|
|
27
|
-
It was tested with `nodejs` version mentioned in [`.tool-versions`](./.tool-versions) file.
|
|
28
|
-
|
|
29
33
|
## Usage
|
|
30
34
|
|
|
31
|
-
For pure TypeScript usage,
|
|
32
|
-
see [TS client](../ts-client/README.md).
|
|
33
|
-
|
|
34
35
|
Prerequisites:
|
|
35
36
|
|
|
36
|
-
- Account on Fishjam Cloud with App configured.
|
|
37
|
+
- Account on [Fishjam Cloud](https://cloud.fishjam.stream) with App configured.
|
|
37
38
|
- Created room and token of peer in that room.
|
|
38
39
|
You can use Room Manager to create room and peer token.
|
|
39
40
|
|
|
@@ -133,11 +134,6 @@ export const App = () => {
|
|
|
133
134
|
};
|
|
134
135
|
```
|
|
135
136
|
|
|
136
|
-
### Releasing new versions
|
|
137
|
-
|
|
138
|
-
To release a new version of the package, go to `Actions` > `Release package` workflow and trigger it with the chosen release type.
|
|
139
|
-
The workflow will bump the package version in `package.json`, release the package to NPM, create a new git tag and a GitHub release.
|
|
140
|
-
|
|
141
137
|
## Examples
|
|
142
138
|
|
|
143
139
|
For examples, see [examples](../../examples/react-client/) folder.
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import type TypedEmitter from "typed-emitter";
|
|
2
|
-
import type { DeviceError, DevicesStatus } from "./types";
|
|
3
|
-
import type { TrackKind } from "@fishjam-cloud/ts-client";
|
|
4
|
-
export type TrackType = TrackKind | "audiovideo";
|
|
5
|
-
export type MediaDeviceType = "displayMedia" | "userMedia";
|
|
6
|
-
export type DisplayMediaManagerEvents = {
|
|
7
|
-
deviceReady: (event: {
|
|
8
|
-
type: TrackType;
|
|
9
|
-
}, state: ScreenShareDeviceState) => void;
|
|
10
|
-
deviceStopped: (event: {
|
|
11
|
-
type: TrackType;
|
|
12
|
-
}, state: ScreenShareDeviceState) => void;
|
|
13
|
-
deviceEnabled: (event: {
|
|
14
|
-
type: TrackType;
|
|
15
|
-
}, state: ScreenShareDeviceState) => void;
|
|
16
|
-
deviceDisabled: (event: {
|
|
17
|
-
type: TrackType;
|
|
18
|
-
}, state: ScreenShareDeviceState) => void;
|
|
19
|
-
error: (event: {
|
|
20
|
-
type: TrackType;
|
|
21
|
-
error: DeviceError | null;
|
|
22
|
-
rawError: any;
|
|
23
|
-
}, state: ScreenShareDeviceState) => void;
|
|
24
|
-
};
|
|
25
|
-
export interface ScreenShareManagerConfig {
|
|
26
|
-
audioTrackConstraints?: boolean | MediaTrackConstraints;
|
|
27
|
-
videoTrackConstraints?: boolean | MediaTrackConstraints;
|
|
28
|
-
}
|
|
29
|
-
export type ScreenShareMedia = {
|
|
30
|
-
stream: MediaStream | null;
|
|
31
|
-
track: MediaStreamTrack | null;
|
|
32
|
-
enabled: boolean;
|
|
33
|
-
};
|
|
34
|
-
export type ScreenShareDeviceState = {
|
|
35
|
-
status: DevicesStatus;
|
|
36
|
-
audioMedia: ScreenShareMedia | null;
|
|
37
|
-
videoMedia: ScreenShareMedia | null;
|
|
38
|
-
error: DeviceError | null;
|
|
39
|
-
};
|
|
40
|
-
declare const ScreenShareManager_base: new () => TypedEmitter<DisplayMediaManagerEvents>;
|
|
41
|
-
export declare class ScreenShareManager extends ScreenShareManager_base {
|
|
42
|
-
private readonly defaultConfig?;
|
|
43
|
-
private config?;
|
|
44
|
-
private data;
|
|
45
|
-
getSnapshot(): ScreenShareDeviceState;
|
|
46
|
-
constructor(defaultConfig?: ScreenShareManagerConfig);
|
|
47
|
-
setConfig(config: ScreenShareManagerConfig): void;
|
|
48
|
-
private getType;
|
|
49
|
-
getMedia: () => ScreenShareMedia | null;
|
|
50
|
-
start(config?: ScreenShareManagerConfig): Promise<void>;
|
|
51
|
-
private setupOnEndedCallback;
|
|
52
|
-
private onTrackEnded;
|
|
53
|
-
stop(type: TrackType): Promise<void>;
|
|
54
|
-
setEnable(type: TrackType, value: boolean): void;
|
|
55
|
-
}
|
|
56
|
-
export {};
|
|
57
|
-
//# sourceMappingURL=ScreenShareManager.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenShareManager.d.ts","sourceRoot":"","sources":["../src/ScreenShareManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,YAAY,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW,CAAC;AAE3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACjF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnF,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpF,KAAK,EAAE,CACL,KAAK,EAAE;QACL,IAAI,EAAE,SAAS,CAAC;QAChB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,EACD,KAAK,EAAE,sBAAsB,KAC1B,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,qBAAqB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IACxD,qBAAqB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;CACzD;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;iDAEiE,YAAY,CAAC,yBAAyB,CAAC;AAA1G,qBAAa,kBAAmB,SAAQ,uBAAmE;IACzG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAA2B;IAC1D,OAAO,CAAC,MAAM,CAAC,CAA2B;IAE1C,OAAO,CAAC,IAAI,CAKV;IAGK,WAAW,IAAI,sBAAsB;gBAIhC,aAAa,CAAC,EAAE,wBAAwB;IAK7C,SAAS,CAAC,MAAM,EAAE,wBAAwB;IAIjD,OAAO,CAAC,OAAO;IAOR,QAAQ,gCAA8B;IAEhC,KAAK,CAAC,MAAM,CAAC,EAAE,wBAAwB;IA0CpD,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,YAAY,CAKlB;IAEW,IAAI,CAAC,IAAI,EAAE,SAAS;IA2B1B,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO;CAwBjD"}
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import EventEmitter from "events";
|
|
2
|
-
import { parseUserMediaError } from "./utils/errors";
|
|
3
|
-
export class ScreenShareManager extends EventEmitter {
|
|
4
|
-
defaultConfig;
|
|
5
|
-
config;
|
|
6
|
-
data = {
|
|
7
|
-
audioMedia: null,
|
|
8
|
-
videoMedia: null,
|
|
9
|
-
status: "Not requested",
|
|
10
|
-
error: null,
|
|
11
|
-
};
|
|
12
|
-
// todo add nested read only
|
|
13
|
-
getSnapshot() {
|
|
14
|
-
return this.data;
|
|
15
|
-
}
|
|
16
|
-
constructor(defaultConfig) {
|
|
17
|
-
super();
|
|
18
|
-
this.defaultConfig = defaultConfig;
|
|
19
|
-
}
|
|
20
|
-
setConfig(config) {
|
|
21
|
-
this.config = config;
|
|
22
|
-
}
|
|
23
|
-
getType(options) {
|
|
24
|
-
if (options.audio && options.video)
|
|
25
|
-
return "audiovideo";
|
|
26
|
-
if (options.audio)
|
|
27
|
-
return "audio";
|
|
28
|
-
if (options.video)
|
|
29
|
-
return "video";
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
getMedia = () => this.data.videoMedia;
|
|
33
|
-
async start(config) {
|
|
34
|
-
const options = {
|
|
35
|
-
video: config?.videoTrackConstraints ??
|
|
36
|
-
this.config?.videoTrackConstraints ??
|
|
37
|
-
this.defaultConfig?.videoTrackConstraints,
|
|
38
|
-
audio: config?.audioTrackConstraints ??
|
|
39
|
-
this.config?.audioTrackConstraints ??
|
|
40
|
-
this.defaultConfig?.audioTrackConstraints,
|
|
41
|
-
};
|
|
42
|
-
const type = this.getType(options);
|
|
43
|
-
if (!type)
|
|
44
|
-
return;
|
|
45
|
-
try {
|
|
46
|
-
const newStream = await navigator.mediaDevices.getDisplayMedia(options);
|
|
47
|
-
this.data = {
|
|
48
|
-
error: null,
|
|
49
|
-
videoMedia: {
|
|
50
|
-
enabled: true,
|
|
51
|
-
stream: newStream,
|
|
52
|
-
track: newStream?.getVideoTracks()[0] ?? null,
|
|
53
|
-
},
|
|
54
|
-
audioMedia: {
|
|
55
|
-
enabled: true,
|
|
56
|
-
stream: newStream,
|
|
57
|
-
track: newStream?.getAudioTracks()[0] ?? null,
|
|
58
|
-
},
|
|
59
|
-
status: "OK",
|
|
60
|
-
};
|
|
61
|
-
this.setupOnEndedCallback();
|
|
62
|
-
this.emit("deviceReady", { type: type }, this.data);
|
|
63
|
-
}
|
|
64
|
-
catch (error) {
|
|
65
|
-
const parsedError = parseUserMediaError(error);
|
|
66
|
-
this.emit("error", { type, error: parsedError, rawError: error }, this.data);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
setupOnEndedCallback() {
|
|
70
|
-
if (this.data.videoMedia?.track) {
|
|
71
|
-
this.data.videoMedia.track.addEventListener("ended", async (event) => await this.onTrackEnded("video", event.target.id));
|
|
72
|
-
}
|
|
73
|
-
if (this.data.audioMedia?.track) {
|
|
74
|
-
this.data.audioMedia.track.addEventListener("ended", async (event) => await this.onTrackEnded("audio", event.target.id));
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
onTrackEnded = async (kind, trackId) => {
|
|
78
|
-
const mediaType = kind === "video" ? "videoMedia" : "audioMedia";
|
|
79
|
-
if (trackId === this?.data[mediaType]?.track?.id) {
|
|
80
|
-
await this.stop("audiovideo");
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
async stop(type) {
|
|
84
|
-
if (type === "video") {
|
|
85
|
-
for (const track of this.data?.videoMedia?.stream?.getTracks() ?? []) {
|
|
86
|
-
track.stop();
|
|
87
|
-
}
|
|
88
|
-
this.data.videoMedia = null;
|
|
89
|
-
}
|
|
90
|
-
else if (type === "audio") {
|
|
91
|
-
// todo test it
|
|
92
|
-
for (const track of this.data?.audioMedia?.stream?.getTracks() ?? []) {
|
|
93
|
-
track.stop();
|
|
94
|
-
}
|
|
95
|
-
this.data.audioMedia = null;
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
for (const track of this.data?.videoMedia?.stream?.getTracks() ?? []) {
|
|
99
|
-
track.stop();
|
|
100
|
-
}
|
|
101
|
-
this.data.videoMedia = null;
|
|
102
|
-
for (const track of this.data?.audioMedia?.stream?.getTracks() ?? []) {
|
|
103
|
-
track.stop();
|
|
104
|
-
}
|
|
105
|
-
this.data.audioMedia = null;
|
|
106
|
-
}
|
|
107
|
-
this.emit("deviceStopped", { type }, this.data);
|
|
108
|
-
}
|
|
109
|
-
setEnable(type, value) {
|
|
110
|
-
if (type === "video" && this.data.videoMedia?.track) {
|
|
111
|
-
this.data.videoMedia.track.enabled = value;
|
|
112
|
-
this.data.videoMedia.enabled = value;
|
|
113
|
-
}
|
|
114
|
-
else if (type === "audio" && this.data.audioMedia?.track) {
|
|
115
|
-
this.data.audioMedia.track.enabled = value;
|
|
116
|
-
this.data.audioMedia.enabled = value;
|
|
117
|
-
}
|
|
118
|
-
else {
|
|
119
|
-
if (this.data.videoMedia?.track) {
|
|
120
|
-
this.data.videoMedia.track.enabled = value;
|
|
121
|
-
this.data.videoMedia.enabled = value;
|
|
122
|
-
}
|
|
123
|
-
if (this.data.audioMedia?.track) {
|
|
124
|
-
this.data.audioMedia.track.enabled = value;
|
|
125
|
-
this.data.audioMedia.enabled = value;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
if (value) {
|
|
129
|
-
this.emit("deviceEnabled", { type }, this.data);
|
|
130
|
-
}
|
|
131
|
-
else {
|
|
132
|
-
this.emit("deviceDisabled", { type }, this.data);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
}
|