@phenixrts/sdk 2023.0.2 → 2023.0.3

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 (48) hide show
  1. package/dist/debug/channels.js +1 -1
  2. package/dist/debug/full.js +1 -1
  3. package/dist/debug/groups.js +1 -1
  4. package/dist/debug/messaging.js +1 -1
  5. package/dist/debug/publish.js +3 -3
  6. package/dist/debug.private/channels.js +1 -1
  7. package/dist/debug.private/full.js +1 -1
  8. package/dist/debug.private/groups.js +1 -1
  9. package/dist/debug.private/messaging.js +1 -1
  10. package/dist/debug.private/publish.js +3 -3
  11. package/dist/es5.debug.private/channels.js +1 -1
  12. package/dist/es5.debug.private/full.js +1 -1
  13. package/dist/es5.debug.private/groups.js +1 -1
  14. package/dist/es5.debug.private/messaging.js +1 -1
  15. package/dist/es5.debug.private/publish.js +3 -3
  16. package/dist/legacy.debug/channels.js +1 -1
  17. package/dist/legacy.debug/full.js +1 -1
  18. package/dist/legacy.debug/groups.js +1 -1
  19. package/dist/legacy.debug/messaging.js +1 -1
  20. package/dist/legacy.debug/publish.js +3 -3
  21. package/dist/legacy.debug.private/channels.js +1 -1
  22. package/dist/legacy.debug.private/full.js +1 -1
  23. package/dist/legacy.debug.private/groups.js +1 -1
  24. package/dist/legacy.debug.private/messaging.js +1 -1
  25. package/dist/legacy.debug.private/publish.js +3 -3
  26. package/dist/legacy.min/channels.js +1 -1
  27. package/dist/legacy.min/full.js +1 -1
  28. package/dist/legacy.min/groups.js +1 -1
  29. package/dist/legacy.min/messaging.js +1 -1
  30. package/dist/legacy.min/publish.js +1 -1
  31. package/dist/legacy.min/publish.js.map +1 -1
  32. package/dist/min/channels.js +1 -1
  33. package/dist/min/full.js +1 -1
  34. package/dist/min/groups.js +1 -1
  35. package/dist/min/messaging.js +1 -1
  36. package/dist/min/publish.js +1 -1
  37. package/dist/min/publish.js.map +1 -1
  38. package/dist/min.private/channels.js +1 -1
  39. package/dist/min.private/full.js +1 -1
  40. package/dist/min.private/groups.js +1 -1
  41. package/dist/min.private/messaging.js +1 -1
  42. package/dist/min.private/publish.js +1 -1
  43. package/dist/min.private/publish.js.map +1 -1
  44. package/examples/src/channel-viewer-native-peer-connection-access.html +13 -0
  45. package/examples/src/channel-viewer-native-peer-connection-access.js +57 -0
  46. package/examples/src/user-media-publisher-change-video-track.html +27 -0
  47. package/examples/src/user-media-publisher-change-video-track.js +122 -0
  48. package/package.json +1 -1
package/examples/src/channel-viewer-native-peer-connection-access.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <!-- Optional: Initialize environment based on URL parameter `token` -->
4
+ <meta name="phenix-channel-token-uri-parameter-name" value="token"/>
5
+ <script>
6
+ __phenixPageLoadTime = new Date().getTime();
7
+ </script>
8
+ <script src="https://dl.phenixrts.com/JsSDK/2023.0.latest/min/channels.js"></script>
9
+ <body style="margin: 0">
10
+ <video style="width: 100vw; height: 100vh; background: black" controls muted autoplay playsinline></video>
11
+ <script src="channel-viewer-native-peer-connection-access.js"></script>
12
+ </body>
13
+ </html>
package/examples/src/channel-viewer-native-peer-connection-access.js ADDED
@@ -0,0 +1,57 @@
1
+ /**
2
+ * Copyright 2022 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
3
+ */
4
+ /* global phenix */
5
+ // Alternate ways to load the sdk directly:
6
+ // import phenix from '@phenixrts/sdk';
7
+ // import phenix from "../../dist/min/channels";
8
+
9
+ const nativeStatisticsPollInterval = 3000;
10
+ const token = new URLSearchParams(location.search).get('token') || '';
11
+ const videoElement = document.getElementsByTagName('video')[0];
12
+ const channel = phenix.Channels.createChannel({
13
+ videoElement,
14
+ token
15
+ });
16
+ let nativeStatisticsPollTimeout;
17
+
18
+ // Example of getting to native PeerConnection object and displaying native statistics
19
+ // Subscribing to PeerConnection observable
20
+ channel.peerConnection.subscribe(peerConnection => {
21
+ if (nativeStatisticsPollTimeout) {
22
+ clearTimeout(nativeStatisticsPollTimeout);
23
+ nativeStatisticsPollTimeout = null;
24
+ }
25
+
26
+ if (peerConnection) {
27
+ // Getting native PeerConnection object (Must be used in read-only mode otherwise it may interfere with the state management)
28
+ const nativePeerConnection = peerConnection.native;
29
+ const trackNativeStatistics = () => {
30
+ nativeStatisticsPollTimeout = setTimeout(() => {
31
+ // Getting native statistics reports and display them in console
32
+ nativePeerConnection.getStats().then(stats => {
33
+ stats.forEach(report => {
34
+ console.log('Report Type: ', report.type);
35
+ console.table(report);
36
+ });
37
+
38
+ trackNativeStatistics();
39
+ });
40
+ }, nativeStatisticsPollInterval);
41
+ };
42
+
43
+ trackNativeStatistics();
44
+ }
45
+ });
46
+
47
+ channel.autoMuted.subscribe(autoMuted => {
48
+ if (autoMuted) {
49
+ console.log('Playback was auto-muted by browser. Please use user action to initiate `channel.unmute()`');
50
+ }
51
+ });
52
+
53
+ channel.autoPaused.subscribe(autoPaused => {
54
+ if (autoPaused) {
55
+ console.log('Playback was auto-paused by browser. Please use user action to initiate `channel.play()`');
56
+ }
57
+ });
package/examples/src/user-media-publisher-change-video-track.html ADDED
@@ -0,0 +1,27 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <!-- Optional: Initialize environment based on URL parameter `token` -->
5
+ <meta name="phenix-channel-token-uri-parameter-name" value="token"/>
6
+ <script>
7
+ __phenixPageLoadTime = new Date().getTime();
8
+ </script>
9
+ <script src="https://dl.phenixrts.com/JsSDK/2023.0.latest/min/publish.js"></script>
10
+ </head>
11
+
12
+ <body style="margin: 0">
13
+ <video id="mainVideoElement" style="width: 100vw; height: calc(100vh - 50px); background: black" controls muted autoplay playsinline></video>
14
+ <div style="position: absolute;right: 40px;top: 40px">
15
+ <video id="secondaryVideoElement" style="width: auto;height: 100px;background: black;display: none;border: 1px solid #ccc;" muted autoplay playsinline></video>
16
+ </div>
17
+ <div style="width: 100vw;height: 50px;display: flex;align-items: center;align-content: center;justify-content: center; flex-wrap: wrap">
18
+ <div>
19
+ <button id="stop" style="margin: 5px;">Stop</button>
20
+ <button id="start" style="margin: 5px; display: none">Start</button>
21
+ <span>State: <span id="state"></span></span>
22
+ <button id="changeMediaStream" style="margin: 5px;">Change Media Stream</button>
23
+ </div>
24
+ </div>
25
+ <script src="user-media-publisher-change-video-track.js"></script>
26
+ </body>
27
+ </html>
package/examples/src/user-media-publisher-change-video-track.js ADDED
@@ -0,0 +1,122 @@
1
+ /**
2
+ * Copyright 2022 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
3
+ */
4
+ /* global phenix */
5
+ // Alternate ways to load the sdk directly:
6
+ // import phenix from '@phenixrts/sdk';
7
+ // import phenix from "../../dist/min/publish";
8
+
9
+ const token = new URLSearchParams(location.search).get('token') || '';
10
+ const mainVideoElement = document.getElementById('mainVideoElement');
11
+ const secondaryVideoElement = document.getElementById('secondaryVideoElement');
12
+ const stopButton = document.getElementById('stop');
13
+ const startButton = document.getElementById('start');
14
+ const stateSpan = document.getElementById('state');
15
+ let isScreenSharingActive = false;
16
+ const changeMediaStreamButton = document.getElementById('changeMediaStream');
17
+ const screenName = new URLSearchParams(location.search).get('screenName') || (Math.random() + 1).toString(36).substring(2);
18
+ const PublisherState = phenix.PublisherState;
19
+
20
+ navigator.mediaDevices.getUserMedia({
21
+ video: true,
22
+ audio: true
23
+ }).then(mediaStream => {
24
+ const publisher = phenix.Publishers.createPublisher({
25
+ mediaStream,
26
+ name: screenName,
27
+ token
28
+ });
29
+ let mediaStreamInUse = mediaStream;
30
+ let cameraStream = mediaStream;
31
+ let screenSharingMediaStream;
32
+ // Example of how to switch media stream
33
+ const changeMediaStream = () => {
34
+ if (publisher.state.value === PublisherState.Publishing) {
35
+ // Stop running stream
36
+ if (!isScreenSharingActive) {
37
+ if (screenSharingMediaStream) {
38
+ publisher.setMediaStream(screenSharingMediaStream);
39
+ mediaStreamInUse = screenSharingMediaStream;
40
+ mainVideoElement.srcObject = screenSharingMediaStream;
41
+ secondaryVideoElement.srcObject = cameraStream;
42
+ isScreenSharingActive = true;
43
+
44
+ return;
45
+ }
46
+
47
+ navigator.mediaDevices.getDisplayMedia().then(screenSharingMediaStream_ => {
48
+ screenSharingMediaStream_.addTrack(publisher.mediaStream.value.getAudioTracks()[0]);
49
+ secondaryVideoElement.srcObject = cameraStream;
50
+ secondaryVideoElement.play();
51
+ publisher.setMediaStream(screenSharingMediaStream_);
52
+ screenSharingMediaStream = screenSharingMediaStream_;
53
+ mediaStreamInUse = screenSharingMediaStream_;
54
+ mainVideoElement.srcObject = screenSharingMediaStream_;
55
+
56
+ secondaryVideoElement.style.display = 'inline-block';
57
+ isScreenSharingActive = true;
58
+
59
+ return;
60
+ });
61
+ }
62
+
63
+ isScreenSharingActive = false;
64
+
65
+ publisher.setMediaStream(cameraStream);
66
+ mediaStreamInUse = cameraStream;
67
+ mainVideoElement.srcObject = cameraStream;
68
+ secondaryVideoElement.srcObject = screenSharingMediaStream;
69
+ }
70
+ };
71
+
72
+ changeMediaStreamButton.onclick = () => changeMediaStream();
73
+
74
+ // eslint-disable-next-line
75
+ const publisherStateSubscription = publisher.state.subscribe(state => {
76
+ stateSpan.textContent = PublisherState[state];
77
+
78
+ if (state === PublisherState.Publishing) {
79
+ startButton.style.display = 'none';
80
+ stopButton.style.display = 'inline-block';
81
+ mainVideoElement.srcObject = mediaStreamInUse;
82
+ } else {
83
+ mainVideoElement.srcObject = null;
84
+ startButton.style.display = 'inline-block';
85
+ stopButton.style.display = 'none';
86
+ }
87
+ });
88
+
89
+ stopButton.onclick = () => {
90
+ publisher.stop().then(() => {
91
+ mainVideoElement.srcObject = null;
92
+
93
+ if (cameraStream) {
94
+ cameraStream.getTracks()
95
+ .forEach(track => track.stop());
96
+ cameraStream = null;
97
+ }
98
+
99
+ if (screenSharingMediaStream) {
100
+ screenSharingMediaStream.getTracks()
101
+ .forEach(track => track.stop());
102
+ screenSharingMediaStream = null;
103
+ secondaryVideoElement.style.display = 'none';
104
+ }
105
+
106
+ isScreenSharingActive = false;
107
+ });
108
+ };
109
+
110
+ startButton.onclick = () => {
111
+ navigator.mediaDevices.getUserMedia({
112
+ video: true,
113
+ audio: true
114
+ }).then(newMediaStream => {
115
+ publisher.setMediaStream(newMediaStream);
116
+ mediaStreamInUse = newMediaStream;
117
+ cameraStream = newMediaStream;
118
+
119
+ publisher.start();
120
+ });
121
+ };
122
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phenixrts/sdk",
3
- "version": "2023.0.2",
3
+ "version": "2023.0.3",
4
4
  "description": "JavaScript SDK",
5
5
  "main": "dist/min/channels",
6
6
  "types": "dist/types/sdk/channels/index.d.ts",