From 1b5c52b185c21d64bcb4c10ba5a0307f3182df41 Mon Sep 17 00:00:00 2001 From: Firas Mumtaz <72166289+firascodes@users.noreply.github.com> Date: Thu, 13 Jul 2023 03:41:58 +0530 Subject: [PATCH 1/3] Update README.md --- .../examples/sdk-frontend/video/README.md | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/examples/sdk-frontend/video/README.md b/packages/examples/sdk-frontend/video/README.md index 73bce73b4..fd84c52b8 100644 --- a/packages/examples/sdk-frontend/video/README.md +++ b/packages/examples/sdk-frontend/video/README.md @@ -1,4 +1,12 @@ -This is a [RainbowKit](https://rainbowkit.com) + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org/) project bootstrapped with [`create-rainbowkit`](https://github.com/rainbow-me/rainbowkit/tree/main/packages/create-rainbowkit). + +# SDK Frontend Video Example + +This is an example project demonstrating how to implement Push Protocol on the frontend, specifically focusing on video notifications. +This example is a valuable resource for any developer looking to integrate Push into their frontend services. By exploring the code, you can gain a deeper understanding of how to implement various features of the Push Protocol in a frontend application. + +## Overview + +The `sdk-frontend/video` project provides a practical demonstration of how to set up and configure the EPNS in a frontend application, including how to handle video notifications and communicate with the blockchain. ## Getting Started @@ -19,16 +27,6 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd ## 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 +This is a [RainbowKit](https://rainbowkit.com) + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org/) project bootstrapped with [`create-rainbowkit`](https://github.com/rainbow-me/rainbowkit/tree/main/packages/create-rainbowkit). -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. From 40e65c37e1ba7a19fdb0c18f7804575e91e6d3dc Mon Sep 17 00:00:00 2001 From: Firas Mumtaz <72166289+firascodes@users.noreply.github.com> Date: Tue, 18 Jul 2023 14:53:15 +0530 Subject: [PATCH 2/3] Update README.md --- .../examples/sdk-frontend/video/README.md | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/packages/examples/sdk-frontend/video/README.md b/packages/examples/sdk-frontend/video/README.md index fd84c52b8..e7737ebd6 100644 --- a/packages/examples/sdk-frontend/video/README.md +++ b/packages/examples/sdk-frontend/video/README.md @@ -8,6 +8,66 @@ This example is a valuable resource for any developer looking to integrate Push The `sdk-frontend/video` project provides a practical demonstration of how to set up and configure the EPNS in a frontend application, including how to handle video notifications and communicate with the blockchain. +## Testing the app + +This is a step-by-step guide that will walk you through the process of setting up and testing a video call using the Push Video SDK. + +Here are the steps you'll need to follow: + +## - Initialization of the Push Video Class + +Start by initializing the Push Video class and storing the video object in the `ref`. + +```javascript +const videoObjectRef = useRef() +``` + +## - Creation of React State + +Create a React state to store all of the video call data onto it. + +```javascript +const [data,setData] = useState{ + PushAPI.video.initVideoCallData; +} +``` + +## - Initialize Video Call Object + +Now you'll want to initialize the video call object. + +```javascript +const videoObject = new PushAPI.video.Video({ + signer: SignerType; + chainId: number; + pgpPrivateKey: string; + env?: ENV; + setData: (fn: (data: VideoCallData) => VideoCallData) => void; +}); +``` + +## - Fire Video Call Request + +Fire a video call request and trigger the set video call function (`setRequestVideoCall`). + +## - Checking Local Stream and Setting Push Sockets + +Check if a local stream is present, then set up Push Sockets for receiving the video call request by using the `usePushSocket` hook. + +## - Receiving Video Call Notification + +To receive a video call notification, check whether the `additionalMeta` type is `push video call` or not. + + + +## - Video Explanation + +For a more in-depth explanation and walkthrough, you can refer to the [video tutorial](INSERT_VIDEO_LINK_HERE) that covers the whole repository in detail. + +For further reference and a more in-depth tutorial, refer to our [official documentation](https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-video). + + + ## Getting Started First, install the dependencies: From f2ba2bef0bb29bb7295862f9b31bc4851ff51dd8 Mon Sep 17 00:00:00 2001 From: Firas Mumtaz <72166289+firascodes@users.noreply.github.com> Date: Thu, 20 Jul 2023 17:39:42 +0530 Subject: [PATCH 3/3] Update README.md --- .../examples/sdk-frontend/video/README.md | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/examples/sdk-frontend/video/README.md b/packages/examples/sdk-frontend/video/README.md index e7737ebd6..0c5e21957 100644 --- a/packages/examples/sdk-frontend/video/README.md +++ b/packages/examples/sdk-frontend/video/README.md @@ -8,11 +8,13 @@ This example is a valuable resource for any developer looking to integrate Push The `sdk-frontend/video` project provides a practical demonstration of how to set up and configure the EPNS in a frontend application, including how to handle video notifications and communicate with the blockchain. -## Testing the app +## Steps to test the app! This is a step-by-step guide that will walk you through the process of setting up and testing a video call using the Push Video SDK. -Here are the steps you'll need to follow: +For further reference and a more in-depth tutorial, refer to our [Official Documentation!](https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-video). + +Here are the steps in brief you'll need to follow: ## - Initialization of the Push Video Class @@ -48,25 +50,32 @@ const videoObject = new PushAPI.video.Video({ ## - Fire Video Call Request -Fire a video call request and trigger the set video call function (`setRequestVideoCall`). +We are now ready to request/initiate a video call. As the name suggests, this will be done on the initiator's end. +```javascript +await videoObject.request({ + senderAddress: string; + recipientAddress: string; + chatId: string; + onReceiveMessage?: (message: string) => void; + retry?: boolean; +}); +``` ## - Checking Local Stream and Setting Push Sockets Check if a local stream is present, then set up Push Sockets for receiving the video call request by using the `usePushSocket` hook. +In order to receive a video call request, we need to listen for the USER_FEEDS event from @pushprotocol/socket and use the following code inside of the event listener: +To receive a video call notification, check whether the `additionalMeta` type is `push video call` or not. -## - Receiving Video Call Notification +[Refer to this link for the code snippet](https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-video/start-a-video-call#receiving-a-request-in-sockets) -To receive a video call notification, check whether the `additionalMeta` type is `push video call` or not. -## - Video Explanation +## Video Explanation For a more in-depth explanation and walkthrough, you can refer to the [video tutorial](INSERT_VIDEO_LINK_HERE) that covers the whole repository in detail. -For further reference and a more in-depth tutorial, refer to our [official documentation](https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-video). - - ## Getting Started