OpenTok startArchive/stopArchive on the FE side

[serhiimilkovskyi]

Hi
I need to connect start/stopArchive functionality but on the frontend-side. Is there a way to do it on the FE side?

I created two ways to start archive from the FE and for both solutions, I always get the CORS issue.
@msach22, could you help me?

1. via fetch

startArchive = (recordData) => {
    const body = {
      sessionId: this.props.sessionId,
      name: recordData.name,
      resolution: recordData.resolution,
      outputMode: 'composed',
      layout: 'pip',
    };

    fetch(`https://api.opentok.com/v2/project/${REACT_APP_TOKBOX_API_KEY}/archive`, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-type': 'application/json',
        'X-OPENTOK-AUTH': JSON.stringify(this.props.meetingUserTokenId),
      },
    })
      .then((response) => response.json())
      .then((archiveData) => {
        this.archive = archiveData;
        console.log('archiveData', archiveData);
      })
      .catch((error) => {
        message.warning('There was an error starting the archive');
      });
  };

2. via opentok npm package

import OpenTok from 'opentok';
...
const newOpenTok = new OpenTok(REACT_APP_TOKBOX_API_KEY, REACT_APP_TOKBOX_API_SECRET_KEY);
...

startArchiveTwo = (recordData) => {
    this.archiveError = null;

    const data = {
      name: recordData.name,
      resolution: recordData.resolution,
      outputMode: 'composed',
    };

    this.newOpenTok.startArchive(this.props.sessionId, { ...data }, (err, archive) => {
      if (err) {
        message.warning('There was an error starting the archive');
        console.log('startArchiveERROR', err);
      } else {
        console.log('archiveData', archive);
      }
    });
  };

[moficodes]

the sdk is not meant to be called from a browser. also if you are putting this code in your frontend you are leaking secrets. Opentok api won't allow a browser as an origin for security reasons. you will have to create a nodejs server that serves your front end.