-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into perf/computed-observables-share-replay
- Loading branch information
Showing
20 changed files
with
260 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
packages/client/docusaurus/docs/javascript/10-advanced/05-join-from-link.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| --- | ||
| title: Joining a call from a link | ||
| description: Learn how you can add a flow where users can join from a link. | ||
| --- | ||
|
|
||
| Many video calling apps that offer video and audio conferencing features, support joining a call from a link. | ||
| This is a great way to allow users to join a call without having to go through many complex steps. | ||
|
|
||
| In the next few steps, we will show how such a flow can be implemented using the Stream's Video SDKs. | ||
|
|
||
| ## Define the URL structure | ||
|
|
||
| The first step is to define the URL structure that will be used to join a call. | ||
| Typically, the URL will contain the following information: | ||
|
|
||
| - your app's domain | ||
| - an optional route pointing to the calling features of your app | ||
| - the call ID | ||
| - optional call type information, in case your app supports multiple call types | ||
|
|
||
| In our example, we will use the following URL structure: | ||
|
|
||
| - `https://myapp.com/join?call_id=123&call_type=default` | ||
|
|
||
| ## Get call information and join a call | ||
|
|
||
| Once the user opens the link, your app needs to read the call ID and call type from the URL as they are required parameters for our SDK. | ||
| Next, we will use the call information to setup and join the call. | ||
|
|
||
| In the example below, we will use standard browser APIs to read the call ID and call type from the URL. | ||
|
|
||
| ```ts | ||
| import { StreamVideoClient } from '@stream-io/video-client'; | ||
|
|
||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const callId = urlParams.get('call_id'); | ||
| const callType = urlParams.get('call_type') || 'default'; // or your custom call type | ||
|
|
||
| // initialize the client, call and join the call | ||
| const client = new StreamVideoClient({ apiKey, user, token }); | ||
| const call = client.call(callType, callId); | ||
| await call.join(); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@stream-io/video-client", | ||
| "version": "0.3.21", | ||
| "version": "0.3.22", | ||
| "packageManager": "[email protected]", | ||
| "main": "dist/index.cjs.js", | ||
| "module": "dist/index.es.js", | ||
|
|
@@ -48,15 +48,14 @@ | |
| "@rollup/plugin-replace": "^5.0.2", | ||
| "@rollup/plugin-typescript": "^11.1.2", | ||
| "@types/jsonwebtoken": "^9.0.1", | ||
| "@types/rimraf": "^3.0.2", | ||
| "@types/sdp-transform": "^2.4.6", | ||
| "@types/ua-parser-js": "^0.7.36", | ||
| "@types/ws": "^8.5.4", | ||
| "@vitest/coverage-v8": "^0.34.4", | ||
| "dotenv": "^16.3.1", | ||
| "happy-dom": "^11.0.2", | ||
| "prettier": "^2.8.4", | ||
| "rimraf": "^3.0.2", | ||
| "rimraf": "^5.0.1", | ||
| "rollup": "^3.28.1", | ||
| "typescript": "^4.9.5", | ||
| "vite": "^4.4.9", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@stream-io/video-react-bindings", | ||
| "version": "0.2.22", | ||
| "version": "0.2.23", | ||
| "packageManager": "[email protected]", | ||
| "main": "./dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
|
|
@@ -31,9 +31,8 @@ | |
| "@stream-io/i18n": "workspace:^", | ||
| "@stream-io/video-client": "workspace:^", | ||
| "@types/react": "^18.0.26", | ||
| "@types/rimraf": "^3.0.2", | ||
| "react": "^18.2.0", | ||
| "rimraf": "^3.0.2", | ||
| "rimraf": "^5.0.1", | ||
| "typescript": "^4.9.5" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@stream-io/video-react-native-sdk", | ||
| "version": "0.0.19", | ||
| "version": "0.0.20", | ||
| "packageManager": "[email protected]", | ||
| "main": "dist/commonjs/index.js", | ||
| "module": "dist/module/index.js", | ||
|
|
@@ -106,7 +106,6 @@ | |
| "@types/react-native": "^0.70.4", | ||
| "@types/react-native-incall-manager": "^3.2.1", | ||
| "@types/react-test-renderer": "^18", | ||
| "@types/rimraf": "^3.0.2", | ||
| "jest": "^29.5.0", | ||
| "react-native": "0.71.8", | ||
| "react-native-builder-bob": "^0.21.3", | ||
|
|
@@ -117,7 +116,7 @@ | |
| "react-native-svg": "^13.6.0", | ||
| "react-native-voip-push-notification": "3.3.1", | ||
| "react-test-renderer": "^18.2.0", | ||
| "rimraf": "^3.0.2", | ||
| "rimraf": "^5.0.1", | ||
| "ts-jest": "^29.1.0", | ||
| "ts-node": "^10.9.1", | ||
| "typescript": "^4.9.5" | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
packages/react-sdk/docusaurus/docs/React/10-advanced/05-join-from-link.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| --- | ||
| title: Joining a call from a link | ||
| description: Learn how you can add a flow where users can join from a link. | ||
| --- | ||
|
|
||
| Many video calling apps that offer video and audio conferencing features, support joining a call from a link. | ||
| This is a great way to allow users to join a call without having to go through many complex steps. | ||
|
|
||
| In the next few steps, we will show how such a flow can be implemented using the Stream's React Video SDKs. | ||
|
|
||
| ## Define the URL structure | ||
|
|
||
| The first step is to define the URL structure that will be used to join a call. | ||
| Typically, the URL will contain the following information: | ||
|
|
||
| - your app's domain | ||
| - an optional route pointing to the calling features of your app | ||
| - the call ID | ||
| - optional call type information, in case your app supports multiple call types | ||
|
|
||
| In our example, we will use the following URL structure: | ||
|
|
||
| - `https://myapp.com/join?call_id=123&call_type=default` | ||
|
|
||
| ## Get call information and join a call | ||
|
|
||
| Once the user opens the link, your app needs to read the call ID and call type from the URL as they are required parameters for our SDK. | ||
| Next, we will use the call information to setup and join the call. | ||
|
|
||
| In the example below, we will use standard browser APIs to read the call ID and call type from the URL. | ||
|
|
||
| ```tsx | ||
| import { | ||
| CallControls, | ||
| SpeakerLayout, | ||
| StreamCall, | ||
| StreamVideo, | ||
| StreamVideoClient, | ||
| } from '@stream-io/video-react-sdk'; | ||
|
|
||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const callId = urlParams.get('call_id'); | ||
| const callType = urlParams.get('call_type') || 'default'; // or your custom call type | ||
|
|
||
| // initialize the client, call and join the call | ||
| const client = new StreamVideoClient({ apiKey, user, token }); | ||
| const call = client.call(callType, callId); | ||
| await call.join(); | ||
|
|
||
| export const MyCallingApp = () => { | ||
| return ( | ||
| <StreamVideo client={client}> | ||
| <StreamCall call={call}> | ||
| <SpeakerLayout /> | ||
| <CallControls /> | ||
| </StreamCall> | ||
| </StreamVideo> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Integration popular routing libraries | ||
|
|
||
| In the React ecosystem, there are many routing libraries that can be used to handle routing in your app. | ||
| In the next few steps, we will show how you can integrate the Stream's React Video SDKs with some of the most popular routing libraries. | ||
|
|
||
| ### React Router | ||
|
|
||
| [React Router](https://reactrouter.com) provides a [`useParams`](https://reactrouter.com/en/main/hooks/use-params) hook that can be used to read the call ID and call type from the URL. | ||
|
|
||
| ### Next.js Router | ||
|
|
||
| [Next.js](https://nextjs.org) provides a [`useRouter`](https://nextjs.org/docs/api-reference/next/router#userouter) hook that can be used to read the call ID and call type from the URL. | ||
|
|
||
| Alternatively, you can use the [`useParams`](https://nextjs.org/docs/app/api-reference/functions/use-params) hook in case it is more convenient for your use case. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "@stream-io/video-react-sdk", | ||
| "version": "0.3.25", | ||
| "version": "0.3.26", | ||
| "packageManager": "[email protected]", | ||
| "main": "./dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
|
|
@@ -46,10 +46,9 @@ | |
| "devDependencies": { | ||
| "@stream-io/video-styling": "workspace:^", | ||
| "@types/prop-types": "^15.7.5", | ||
| "@types/rimraf": "^3.0.2", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "rimraf": "^3.0.2", | ||
| "rimraf": "^5.0.1", | ||
| "typescript": "^4.9.5" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.