Google Calendar Integration For Video Calling

Picture this: You're setting up a virtual meeting and want it to be as straightforward as possible. That's where integrating a video calling tool directly into Google Calendar comes into play.

Google Calendar is one of the most used tools for organizing our schedules, but it's more than just a digital datebook. Paired with a video conferencing solution, it becomes a powerhouse for enhanced real-time collaboration. The key to making this work is direct access. Users want an experience where adding video calling to a meeting is as intuitive as setting the meeting itself.

We will explore how to effortlessly include our own video calling solution (in our case: built with Stream Video, but can be any other service) within a Google Calendar event. No more tool-switching or last-minute link searches – just a straightforward, efficient process.

What do we mean by that? Whenever a new meeting inside Google Calendar is created, there is a button with the option to “Add Video Conferencing”. In the dropdown there is the option to select Google Meet, for example. After finishing this tutorial our own solution will be shown there alongside the options that were previously there (see video below).

Necessary Steps

Adding a custom video calling tool to Google Calendar requires us to have two things before we can start:

1. A Google Account
2. A Google Cloud Platform project

There are several steps involved in integrating Stream’s video calling API into Google Calendar, so let’s break it down.

1. Create a Google Apps Script project
2. Register Stream video with the Calendar API
3. Set up the integration with our custom tool through a script
4. Set up a consent screen for requesting data access from users

We will go through these steps in detail, so let’s begin.

Google Apps Script

The first thing we need to do is to create a new Apps Script project in the dashboard. Click the New Project button and rename it to fit your application.

Now that we have the project, we need to change two settings. Head over to Project settings and under General Settings, make sure the checkbox for Show "appsscript.json" manifest file in editor is checked. We need to activate this to see and edit the file to register our tool.

In addition, scroll down to Google Cloud Platform (GCP) Project and click on Change project. Add the GCP project number (we can find it in the dashboard) and hit Set project. This connection is necessary for the Apps Script project to be picked up by the GCP project.

Next, we need to enable the Calendar advanced service because we want to communicate with the Google Calendar API from our script. To do this, go to Services, hit the +, and scroll until you find the Google Calendar API. Click the Add button it appears in the services list.

To tell the system that we have a conferencing solution that we want to give access to, we need to add it to our manifest file as an add-on. The addOns parameter requires us to define two objects: common and calendar (more details on the Manifest file can be found here).

Go back to the Editor and inside of the appsscript.json file, paste the code below and hit the Save project button (the disk):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "addOns": {
    "common": {
      "name": "My Video Solution",
      "logoUrl": "<link-to-logo>",
      "useLocaleFromApp": true,
      "homepageTrigger": {
        "runFunction": "onHomepage",
        "enabled": true
      }
    },
    "calendar": {
      "conferenceSolution": [
        {
          "id": 1,
          "name": "My Video Solution",
          "logoUrl": "<link-to-logo>",
          "onCreateFunction": "createConference"
        }
      ]
    }
  }
}

Change the name and logoUrl parameters in both the common and the calendar sections to match your product. With this definition, we tell the system that we have a conferencing solution and that whenever someone wants to create a conference with it, the createConference function should be called. We also need the onHomepage function to create a card that is shown for our product. Neither of these exists— yet.

Hit the + button next to Files, select Script, and call it calendar.

First, we’ll tackle the onHomepage function. Add this to the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * Callback for rendering the homepage card.
 * @return {CardService.Card} The card to show to the user.
 */
function onHomepage(e) {
  console.log(e);
  var card = CardService.newCardBuilder();
  var peekHeader = CardService.newCardHeader()
      .setTitle('Addon for scheduling stream video call')
      .setSubtitle('more info at getstream.io');

  card.setPeekCardHeader(peekHeader)
  return card.build()
}

This creates a card with a title and a subtitle using the CardService provided by Google (documentation).

Second, we’ll need to add the createConference function. We get an arg object with data about the event, such as the calendarId and eventId we use to retrieve the calendarEvent itself.

We use a custom create3rdPartyConference function (that we’ll implement in a second) that gives us the necessary data to build a ConferenceData object that we populate with the video info and then return.

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function createConference(arg) {
  const eventData = arg.eventData;
  const calendarId = eventData.calendarId;
  const eventId = eventData.eventId;

  // Retrieve the Calendar event information
  var calendarEvent;
  try {
    calendarEvent = Calendar.Events.get(calendarId, eventId);
  } catch (err) {
    // Event does not exist just yet; proceed with given event ID
    calendarEvent = {
      id: eventId,
    };
  }

  // Create a conference on our third-party service and return the
  // conference data or errors in a custom JSON object.
  var conferenceInfo = create3rdPartyConference(calendarEvent);

  // Build and return a ConferenceData object
  var dataBuilder = ConferenceDataService.newConferenceDataBuilder();

  if (!conferenceInfo.error) {
    // Build the ConferenceData object from the returned conference info.
    var conferenceTypeParameter = ConferenceDataService.newConferenceParameter()
        .setKey('conferenceSolutionType')
        .setValue('stream');

    dataBuilder.setConferenceId(conferenceInfo.id).addConferenceParameter(conferenceTypeParameter)

    if (conferenceInfo.videoUri) {
      var videoEntryPoint = ConferenceDataService.newEntryPoint()
          .setEntryPointType(ConferenceDataService.EntryPointType.VIDEO)
          .setUri(conferenceInfo.videoUri);
      dataBuilder.addEntryPoint(videoEntryPoint);
    }
  } else {
    var error = ConferenceDataService.newConferenceError().setConferenceErrorType(ConferenceDataService.ConferenceErrorType.TEMPORARY);
    dataBuilder.setError(error);
  }

  // Build and return the ConferenceData object.
  return dataBuilder.build();
}

The create3rdPartyConference function will look different for each product. We’ll show you how we use it for the Stream video project, so that we can get an idea of how it works and what it does.

1
2
3
4
5
6
7
8
9
10
11
12
13
function create3rdPartyConference(calendarEvent) {
  var id = Math.floor(Math.random() * (99999999999 - 11111111111 + 1)) + min;
  var options = {
    "method": "POST",
    "payload": `{}`,
  };
  var url = "https://<link-to-my-video-app>/join/" + id;
  UrlFetchApp.fetch(url, options);
  var data = {};
  data.id = id
  data.videoUri = url;
  return data;
}

We populate the data we return with an id for the conference and set a videoUri that can later be used to join the conference via a link.

Note: This is a very basic setup that doesn’t allow for much customization. We can also add more settings to it; read more here.

This is all the work we need in the Apps Script section, so let’s head over to our GCP project.

Adding an OAuth Consent Screen

For our application to work, users must grant us access to their calendars. So, we need to configure the consent screen. This is done in the Google Cloud Project, so we’re heading to the Google Cloud Console there.

After selecting the project we’re using, we click on the hamburger menu in the top left (the three stripes), go to APIs and Services, and then to the OAuth consent screen. We click Add and set up who has access. In the example below, we’re using the Internal option to safely test it before releasing it to the public.

See It In Action

With that, we’re ready to test our application. Head over to Google Calendar and create a new meeting using the plus button at the top left. In the Add Video Conferencing select the dropdown and see our solution in the list.

When selecting it, it requires us to authorize access. This is what we just set with the OAuth consent screen. Click Authorize, select your mail account, and hit Allow. It will now send a request to your tool as specified in the script and create a meeting link for all participants to join.

Summary

Great job, we did it! We added the Stream Video API to Google Calendar so that users can add it as a conferencing tool.

We used a Google Cloud Platform project and an Apps Script project. We defined what to do and which information to take and add to the requests to Stream’s backend when creating a new meeting and populated the created meeting with that information.

If you want to explore building your own video conferencing solution with Stream, you can start building for free. We also have plenty of documentation to make it easy for you to get started. If you need some support, feel free to explore our many video tutorials on the Stream blog or our video docs for each SDK.

We hope this was useful for you, and we can’t wait to see what you build with our video SDKs!