Examples

This is legacy documentation. We are no longer onboarding new Gruveo for Developers customers.

Note: The examples below showcase the technicalities of interacting with the Embed API. For a discussion of the common implementation scenarios for connecting your web app users in video or voice calls, please see Implementation Recipes.

A Simple Example

The Gruveo embed below will join the "mycode123" video call room when the "Call" button above it is clicked. The embed will generate a test console message saying "10 seconds have passed" 10 seconds after the call is established.

Open this page in two tabs and click the "Call" button in both to see the example in action.

Here is the source code for the example.

<p>
  <button id="call-btn">Call</button>
</p>

<div id="myembed"></div>

<script>
  var clientId = "demo";

  var tag = document.createElement("script");
  tag.src = "https://www.gruveo.com/embed-api/";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var embed;
  function onGruveoEmbedAPIReady() {
    embed = new Gruveo.Embed("myembed", {
      responsive: 1,
      embedParams: {
        clientid: clientId,
        color: "63b2de"
      }
    });

    embed
      .on("error", onEmbedError)
      .on("requestToSignApiAuthToken", onEmbedRequestToSignApiAuthToken)
      .on("ready", onEmbedReady)
      .on("stateChange", onEmbedStateChange);
  }

  function onEmbedError(e) {
    console.error("Received error " + e.error + ".");
  }

  function onEmbedRequestToSignApiAuthToken(e) {
    // The below assumes that you have a server-side signer endpoint at /signer,
    // where you pass e.token in the body of a POST request.
    fetch('/signer', {
      method: 'POST',
      body: e.token
    })
      .then(function(res) {
        if (res.status !== 200) {  
          return;  
        }
        res.text()
          .then(function(signature) {
            embed.authorize(signature);
          });
      });
  }

  function onEmbedReady(e) {
    document.getElementById("call-btn").addEventListener("click", function() {
      embed.call("mycode123", true);
    });
  }

  function onEmbedStateChange(e) {
    if (e.state == "call") {
      setTimeout(function() {
        console.log("10 seconds have passed");
      }, 10000);
    }
  }
</script>

<p>

</p>

var clientId = "demo";

var tag = document.createElement("script");

tag.src = "https://www.gruveo.com/embed-api/";

var firstScriptTag = document.getElementsByTagName("script")[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var embed;

function onGruveoEmbedAPIReady() {

embed = new Gruveo.Embed("myembed", {

responsive: 1,

embedParams: {

clientid: clientId,

color: "63b2de"

}

});

embed

.on("error", onEmbedError)

.on("requestToSignApiAuthToken", onEmbedRequestToSignApiAuthToken)

.on("ready", onEmbedReady)

.on("stateChange", onEmbedStateChange);

}

function onEmbedError(e) {

console.error("Received error " + e.error + ".");

}

function onEmbedRequestToSignApiAuthToken(e) {

// The below assumes that you have a server-side signer endpoint at /signer,

// where you pass e.token in the body of a POST request.

fetch('/signer', {

method: 'POST',

body: e.token

})

.then(function(res) {

if (res.status !== 200) {

return;

}

res.text()

.then(function(signature) {

embed.authorize(signature);

});

}

function onEmbedReady(e) {

document.getElementById("call-btn").addEventListener("click", function() {

embed.call("mycode123", true);

});

}

function onEmbedStateChange(e) {

if (e.state == "call") {

setTimeout(function() {

console.log("10 seconds have passed");

}, 10000);

}

</script>

This example builds upon the code found in the Embedding the Widget section and adds the following functionality:

The onEmbedReady() event handler is bound to the embed’s ready event and so it will be called when the Gruveo embed is loaded and is ready for operation. In onEmbedReady(), a click event listener is added to the "Call" button which invokes the embed's embed.call() method to initiate a call.
The onEmbedStateChange() function will be called whenever the embed’s state changes, which may indicate that a call has been initialized, a “no WebRTC” message is displayed and so forth. The function indicates that after a call has been established (i.e. embed state switches to call), it will be set to end after 10 seconds.

Embed API Demo

The Embed API Demo is a more involved example of interacting with the Gruveo Embed API. Launch the demo using the button below, or check out its source code on GitHub.

Launch Embed API demo