fix(video): fix recurring video calls bug, rpc in example app (#850)

push-protocol · Nov 16, 2023 · 7012721 · 7012721
1 parent 299c9b8
commit 7012721
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 74 deletions.
diff --git 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
@@ -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
@@ -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 (
     // <SpacesUIProvider spaceUI={spaceUI} theme={customtheme}>
-      {children}
+    { children }
     // </SpacesUIProvider>
   );
 };
@@ -62,11 +69,13 @@ function MyApp({ Component, pageProps }: AppProps) {
       {loadWagmi ? (
         <WagmiConfig client={wagmiClient}>
           <RainbowKitProvider theme={darkTheme()} chains={chains}>
-          <AccountContext.Provider value={{ pgpPrivateKey, setPgpPrivateKey }}>
+            <AccountContext.Provider
+              value={{ pgpPrivateKey, setPgpPrivateKey }}
+            >
               {/* <SpacesComponentProvider> */}
-                <Component {...pageProps} />
+              <Component {...pageProps} />
               {/* </SpacesComponentProvider> */}
-          </AccountContext.Provider>
+            </AccountContext.Provider>
           </RainbowKitProvider>
         </WagmiConfig>
       ) : null}

diff --git 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
@@ -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