This web-agent web application is intended to be integrated within any third party web application through an iframe.

The application is hosted here. Without parameters, it does not much. Url parameters must be set to control it.

First one, aK is the apiKey, which can be obtained from ApiRTC.com.

Then, cN specifies the Conversation name.

Specifying ?aK=myDemoApiKey&cN=Test shall make the application ready to create an invitation link to a Conversation named Test.

Note : myDemoApiKey shall be used for this demo only, and may not allow to use all features (such as short-messages invitation for example).

To integrate the application within html, use an iframe as below :

<iframe
  src="https://apirtc.github.io/web-agent?aK=myDemoApiKey&cN=Test"
  height="720px"
  width="100%"
  allow="autoplay;microphone;camera;display-capture;encrypted-media;clipboard-write;"
></iframe>

Constants values can be found in generated doc here.

Using url parameters to provide information to the iframe-d web-agent application is good for static and/or initial values. But the values can't be changed without reloading.

However, the hosting application may need to change the Conversation name, or update guest phone number with no reload.

Also, the web-agent application has real-time features that the hosting application may need to be notified of. For example, when a snapshot is taken, this is up to the hosting application to handle it (just display it, or upload it to a database server).

To enable such real-time interaction, the web-agent application implements a dual channel communication, using standard Window: postMessage mechanism.

In order for host application to receive messages from web-agent, it has to register a window listener for message events:

const WEB_AGENT_APP_ORIGIN = "https://apirtc.github.io";
const receiveMessage = (event) => {
  if (event.origin !== WEB_AGENT_APP_ORIGIN) return;

  const message = event.data;

  switch (message.type) {
    case "ready": {
      // web-agent app is ready to receive messages
      break;
    }
    case "snapshot": {
      const dataUrl = message.dataUrl;
      // display or store the snapshot dataUrl.
      break;
    }
    ...
    default:
      console.warn(`Unhandled message.type ${message.type}.`);
  }
};

window.addEventListener("message", receiveMessage);

The actual message is an object in event.data. A message has a type field, and other fields depending on the type value.

Hosting application can post a message to web-agent by getting a handle on the iframe object and use postMessage:

iframe.contentWindow.postMessage(
  {
    type: "conversation",
    name: "new_conversation_name",
  },
  WEB_AGENT_APP_ORIGIN
);

The fields complex types definitions can be found here.

Note: host application must wait for having received the ready message from web-agent before posting messages.

Visit sample page for a demonstration of dynamic control of the iframe-d web-agent app !

Also available on CodePen