Skip to main content

Get started

Push Video enables web3 native real time communication between wallets, groups, NFTs or even conditional (gated) groups. To do so, you will be using Push SDK API that will abstract away the complexity of authentication, encryption, signing, sending and receiving of media stream and connection.

Speed run​

The following speed run is designed to give you a quick overview of usage and demonstrates how Push Video can be integrated successfully in minimal lines of code.

  // Import Push SDK & ethers
  import { CONSTANTS, PushAPI, TYPES } from '@pushprotocol/restapi';
  import { ethers } from "ethers";

  // data will store the video call state, we will only use this to read the video call state
  // and update the UI accordingly
  let data: TYPES.VIDEO.DATA = CONSTANTS.VIDEO.INITIAL_DATA;

  // setData is a function that will update the video call state as and when it changes internally
  const setData = (fn) => {
    data = fn(data);
  };

  // Creating a random signer from a wallet, ideally this is the wallet you will connect
  const signer = ethers.Wallet.createRandom();

  // Initialize wallet user, use 'PROD' instead of 'STAGING' for mainnet apps
  const userAlice = await PushAPI.initialize(signer, {
    env: CONSTANTS.ENV.STAGING,
  });

  // Create Stream to Listen to video events
  const stream = await userAlice.initStream([CONSTANTS.STREAM.VIDEO]);

  // Initialising the video API
  const aliceVideoCall = await userAlice.video.initialize(setData, {
    stream: stream,
    config: {
      video: true, // to enable video on start
      audio: true, // to enable audio on start
    },
    media?: MediaStream, // to pass your existing media stream (for backend use)
  });

  // Setup listener for video call events
  stream.on(CONSTANTS.STREAM.VIDEO, async (data : TYPES.VIDEO.EVENT) => {
    if (data.event === CONSTANTS.STREAM.VIDEO.REQUEST) {
      // Request is coming, approve the call or show modal to accept/deny
      aliceVideoCall.approve();

      // Recommeded to store the incoming caller address in a state for future use
      // let incomingCallerAddress = data.peerInfo.address;
    }

    if (data.event === CONSTANTS.VIDEO.EVENT.APPROVE) {
      // ApproveVideo Event is fired when the user (your peer) approves your video call request
      // Once Approved, your video call is now connected successfully
      console.log("Video Call Approved");
    }

    if (data.event === CONSTANTS.VIDEO.EVENT.DENY) {
      // DenyVideo Event is fired when the user (your peer) rejects your video call request
      // Here you can show an UI toast to inform the user that the video call was rejected by the user (your peer)
      console.log("User Denied the Call");
    }

    if (data.event === CONSTANTS.VIDEO.EVENT.CONNECT) {
      // ConnectVideo Event is fired when the video call is connected successfully
      console.log("Video Call Connected");
    }

    if (data.event === CONSTANTS.VIDEO.EVENT.DISCONNECT) {
      // DisconnectVideo Event is fired when the video call is disconnected/Hung up by either party
      // Here you can simply reload the page or reinitialize the video call object
      console.log("Video Call ended!");
    }
  });

  // connect the stream
  await Stream.connect();

  // Fire video call request
  await aliceVideoCall.request([recipient]); // see supported wallet standards - https://push.org/docs/video/supported-wallet-standards

Installation​

// Install Libraries
npm install @pushprotocol/restapi@latest ethers@^5.7

Quickstart from SDK repos​

Workshop Video​


Testing​

Push SDK playground and full API coverage​

Full API coverage with sample runable code can be found in the examples below: