Below are excerpts from our Javascript Sample Appplication

JSX:

<button onClick={() => initiateDigitalCall(userId)}>Start Direct Call</button>

JS:

initiateDigitalCall = async (callee) =>
    new Promise((resolve, reject) => {
      this.joinDirectSpace(callee._id)
        .then(() => {
          const mediaSessionEvents = {
            topicId: this.spaceId,
            category: 'space.call.offer',
            sender: this.sender,
            data: [],
            version: '1.1',
            content: {
              subscribeTime: new Date().toISOString(),
              mediaSession: {}
            },
            created: new Date().toISOString(),
            receivers: [callee],
            topicTitle: callee?.displayname
          };

          this.diallingTone.play();

          this.socketConnection.on('CHANNEL_SUBSCRIBED', () => {
            this.EventEmitter.dispatch('state', { data: { channelSubscribed: true } });
            this.socketConnection.emit('SEND_MEDIA_SESSION_EVENTS', mediaSessionEvents);
            resolve();
          });
        })
        .catch((err) => {
          reject(err);
        });
    });

  cancelDigitalCall = () => {
    const cancelSpaceCallObj = {
      topicId: this.spaceId,
      category: 'space.call.cancelled',
      sender: this.sender,
      data: [],
      version: '1.1',
      content: {
        subscribeTime: this.spaceContent?.subscribedTime || new Date().toISOString(),
        mediaSession: {}
      },
      created: new Date().toISOString(),
      receivers: [this.callee],
      topicTitle: this.callee?.displayname
    };

    this.diallingTone.pause();
    this.EventEmitter.dispatch('state', { data: { showModalDigitalCall: false } });
    this.socketConnection.emit('SEND_MEDIA_SESSION_EVENTS', cancelSpaceCallObj);
  };

  endDigitalCall = () => {
    this.diallingTone.pause();
    this.EventEmitter.dispatch('state', { data: { showModalDigitalCall: false } });
  };

  declineDigitalCall = (callerObj) => {
    const declineDigitalCallObj = {
      spaceCallId: callerObj?.spaceCallId,
      meetingId: callerObj?.callerObj,
      topicId: callerObj?.topicId,
      category: 'space.call.rejected',
      receivers: [callerObj?.sender],
      sender: this.sender,
      content: {
        subscribeTime: this.spaceContent?.subscribedTime || new Date().toISOString(),
        mediaSession: {}
      },
      version: '1.1'
    };

    this.ringTone.pause();
    this.EventEmitter.dispatch('state', { data: { showIncomingCallModal: false } });
    this.socketConnection.emit('SEND_MEDIA_SESSION_EVENTS', declineDigitalCallObj);
  };

  acceptDigitalCall = (val) => {
    this.spaceId = val.topicId;
    const acceptSpaceCallObj = {
      spaceCallId: val.spaceCallId,
      meetingId: val.meetingId,
      topicId: val.topicId,
      category: 'space.call.accepted',
      receivers: [val.sender],
      sender: this.sender,
      content: {
        subscribeTime: new Date().toISOString(),
        mediaSession: {}
      },
      version: '1.1'
    };

    this.socketConnection.emit('SEND_MEDIA_SESSION_EVENTS', acceptSpaceCallObj);
    this.joinSpace(val.topicId).then(() => {
      this.initiateSpacesCall();
      this.diallingTone.pause();
      this.EventEmitter.dispatch('state', { data: { showModalDigitalCall: false } });
    });
  };