diff --git a/packages/examples/sdk-frontend/README.md b/packages/examples/sdk-frontend/README.md index 73bce73b4..500144bcd 100644 --- a/packages/examples/sdk-frontend/README.md +++ b/packages/examples/sdk-frontend/README.md @@ -2,33 +2,16 @@ This is a [RainbowKit](https://rainbowkit.com) + [wagmi](https://wagmi.sh) + [Ne ## Getting Started -First, install the dependencies: -```bash -yarn -``` +1. Install the dependencies: + ```bash + yarn + ``` -Then run the development server: - -```bash -yarn run dev -``` +2. Run the development server: + ```bash + yarn run dev + ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. - -## Learn More - -To learn more about this stack, take a look at the following resources: - -- [RainbowKit Documentation](https://rainbowkit.com) - Learn how to customize your wallet connection flow. -- [wagmi Documentation](https://wagmi.sh) - Learn how to interact with Ethereum. -- [Next.js Documentation](https://nextjs.org/docs) - Learn how to build a Next.js application. - -You can check out [the RainbowKit GitHub repository](https://github.com/rainbow-me/rainbowkit) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/packages/examples/sdk-frontend/package.json b/packages/examples/sdk-frontend/package.json index 2d088fb7b..3b7a393f1 100644 --- a/packages/examples/sdk-frontend/package.json +++ b/packages/examples/sdk-frontend/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@pushprotocol/restapi": "^1.4.5", + "@pushprotocol/restapi": "^1.4.38", "@pushprotocol/socket": "^0.5.1", "@pushprotocol/uiweb": "^1.1.8", "@rainbow-me/rainbowkit": "0.12.14", diff --git a/packages/examples/sdk-frontend/pages/_app.tsx b/packages/examples/sdk-frontend/pages/_app.tsx index 4827f82dd..f56330a22 100644 --- a/packages/examples/sdk-frontend/pages/_app.tsx +++ b/packages/examples/sdk-frontend/pages/_app.tsx @@ -8,6 +8,7 @@ import { import { configureChains, createClient, WagmiConfig } from 'wagmi'; import { sepolia } from 'wagmi/chains'; import { publicProvider } from 'wagmi/providers/public'; +import { infuraProvider } from 'wagmi/providers/infura'; import '@rainbow-me/rainbowkit/styles.css'; import '../styles/globals.css'; @@ -16,7 +17,13 @@ import { useEffect, useState } from 'react'; // import { useSpaceComponents } from './../components/Spaces/useSpaceComponent'; import { AccountContext } from '../contexts'; -const { chains, provider } = configureChains([sepolia], [publicProvider()]); +const { chains, provider } = configureChains( + [sepolia], + [ + infuraProvider({ apiKey: '5524d420b29f4f7a8d8d2f582a0d43f7' }), + publicProvider(), + ] +); const { connectors } = getDefaultWallets({ appName: 'Connect', @@ -43,7 +50,7 @@ const SpacesComponentProvider = ({ children }: ISpacesComponentProps) => { return ( // - {children} + { children } // ); }; @@ -62,11 +69,13 @@ function MyApp({ Component, pageProps }: AppProps) { {loadWagmi ? ( - + {/* */} - + {/* */} - + ) : null} diff --git a/packages/examples/sdk-frontend/pages/video.tsx b/packages/examples/sdk-frontend/pages/video.tsx index 2b99b8abf..48fae44f2 100644 --- a/packages/examples/sdk-frontend/pages/video.tsx +++ b/packages/examples/sdk-frontend/pages/video.tsx @@ -20,7 +20,7 @@ interface VideoCallMetaDataType { } // env which will be used for the video call -const env = ENV.DEV; +const env = ENV.STAGING; const Home: NextPage = () => { const { address, isConnected } = useAccount(); diff --git a/packages/restapi/src/lib/video/Video.ts b/packages/restapi/src/lib/video/Video.ts index 010d98fef..ad9262d60 100644 --- a/packages/restapi/src/lib/video/Video.ts +++ b/packages/restapi/src/lib/video/Video.ts @@ -375,13 +375,20 @@ export class Video { this.peerInstances[connectedAddress]?.destroy(); this.peerInstances[connectedAddress] = null; } + + // destroy the local stream + if (this.data.local.stream) { + endStream(this.data.local.stream); + } + + // reset the state + this.setData(() => initVideoCallData); } - if ( - this.callType === VIDEO_CALL_TYPE.PUSH_VIDEO || - (this.callType === VIDEO_CALL_TYPE.PUSH_SPACE && - parsedData?.details?.type === SPACE_DISCONNECT_TYPE.STOP) - ) { + if (this.callType === VIDEO_CALL_TYPE.PUSH_VIDEO) { + this.peerInstances[recipientAddress]?.destroy(); + this.peerInstances[recipientAddress] = null; + // destroy the local stream if (this.data.local.stream) { endStream(this.data.local.stream); @@ -444,6 +451,19 @@ export class Video { return Promise.resolve(); } + // fetching the iceServers config + const iceServerConfig = await getIceServerConfig(this.env); + + // creating peer instance + this.peerInstances[recipientAddress] = new Peer({ + initiator: false, + trickle: false, + stream: this.data.local.stream, + config: { + iceServers: iceServerConfig, + }, + }); + // set videoCallInfo state with status 2 (call received) this.setData((oldData) => { return produce(oldData, (draft) => { @@ -477,18 +497,6 @@ export class Video { }); }); - // fetching the iceServers config - const iceServerConfig = await getIceServerConfig(this.env); - - this.peerInstances[recipientAddress] = new Peer({ - initiator: false, - trickle: false, - stream: this.data.local.stream, - config: { - iceServers: iceServerConfig, - }, - }); - // setup error handler this.peerInstances[recipientAddress].on('error', (err: any) => { console.log('error in accept request', err); @@ -678,13 +686,20 @@ export class Video { this.peerInstances[connectedAddress]?.destroy(); this.peerInstances[connectedAddress] = null; } + + // destroy the local stream + if (this.data.local.stream) { + endStream(this.data.local.stream); + } + + // reset the state + this.setData(() => initVideoCallData); } - if ( - this.callType === VIDEO_CALL_TYPE.PUSH_VIDEO || - (this.callType === VIDEO_CALL_TYPE.PUSH_SPACE && - parsedData?.details?.type === SPACE_DISCONNECT_TYPE.STOP) - ) { + if (this.callType === VIDEO_CALL_TYPE.PUSH_VIDEO) { + this.peerInstances[recipientAddress]?.destroy(); + this.peerInstances[recipientAddress] = null; + // destroy the local stream if (this.data.local.stream) { endStream(this.data.local.stream); @@ -905,31 +920,34 @@ export class Video { // Signal all the connected peers that the local peer has changed their audio state for (const incomingPeer of this.data.incoming) { - if (incomingPeer.status === VideoCallStatus.CONNECTED && this.peerInstances[incomingPeer.address]) { - try { - this.peerInstances[incomingPeer.address].send( - JSON.stringify({ type: 'isAudioOn', value: state }) - ); - } catch (error) { - console.error("Error sending data:", error); - } + if ( + incomingPeer.status === VideoCallStatus.CONNECTED && + this.peerInstances[incomingPeer.address] + ) { + try { + this.peerInstances[incomingPeer.address].send( + JSON.stringify({ type: 'isAudioOn', value: state }) + ); + } catch (error) { + console.error('Error sending data:', error); + } } } - if (this.data.local.stream) { - if (state) { - restartAudioStream(this.data.local.stream); - } else { - stopAudioStream(this.data.local.stream); - } - this.setData((oldData) => { - return produce(oldData, (draft) => { - draft.local.audio = state; - }); - }); + if (this.data.local.stream) { + if (state) { + restartAudioStream(this.data.local.stream); + } else { + stopAudioStream(this.data.local.stream); } + this.setData((oldData) => { + return produce(oldData, (draft) => { + draft.local.audio = state; + }); + }); + } } -} + } // helper functions