Hello World!

Welcome to our first part of the Getting Started Guide. In this tutorial, you'll learn how to do the following:

  • Add an application in the LiveSwitch Console
  • Add an application in the LiveSwitch Cloud
  • Set up your development environment
  • Write log messages
  • Generate a token
  • Register a client
  • Join the client into a channel

At the end of this tutorial, you'll build a simple "Hello World" app that connects to the LiveSwitch Cloud. Once you complete this tutorial, you'll have the foundation to build LiveSwitch applications in subsequent tutorials.

At the end of this tutorial, you'll build a simple "Hello World" app that connects to the LiveSwitch Server. Once you complete this tutorial, you'll have the foundation to build LiveSwitch applications in subsequent tutorials.

Prerequisites

Before you begin, make sure that you have:

Tools

Add an Application

Before you can work on your code, you must add an aplication in the LiveSwitch Console.

  1. Log in to your LiveSwitch Console at https://{your-gateway-domain}:{port}/admin.
  2. Create a "Hello World" application by clicking Applications > NEW APPLICATION, and then enter the desired Application ID and Shared Secret.
  3. Go to the Home page and select the application you just created in the Start Developing page. You should see your Application ID, Gateway URL, and Shared Secret there. You'll need them for generating your application token.

Set Up Your Project

We've set up a GitHub repository that contains the project code for this tutorial. This repository includes the starting code for the .NET, Android, iOS, and TypeScript projects under the net, android, ios, and typescript folders. You can choose the desired language and start building an app from there. Each project includes all not-yet functional classes required for the app. We'll ask you to copy the code from the tutorial to the class files to make them functional during your learning.

To make things easier, we also provide all the UI components for the app so that you can focus on learning LiveSwitch's API. We've commented out the code for UI that's not needed for your first app. We'll ask you to uncomment the code in the subsequent tutorials when a UI is needed.

Clone the repository from the command line:

git clone https://github.com/liveswitch/liveswitch-codelabs.git
  1. Download and unzip the LiveSwitch .NET SDK from the LiveSwitch Server Downloads page.
  2. Download and unzip the LiveSwitch .NET SDK from the Cloud Console Downloads page.
  3. In your project root directory, create a lib folder.
  4. Copy all the .dll files from the DotNet45 folder in the LiveSwitch .NET client SDK into the lib folder.
  5. Copy the DotNet45\lib\win_x64 and DotNet45\lib\win_x86 folders from the LiveSwitch .NET client SDK to the lib folder.
  6. Use Visual Studio to open HelloWorld.sln.
  7. Add all the .dll files in the lib folder as references.
  8. In Visual Studio's Solution Explorer, click Show All Files.
  9. Include lib\win_x64 and lib\win_x86 into the project by right-clicking them and selecting Include in Project.
    Important

    Select all the files in the two folders. Right-click the files and then click Properties. In the Properties tab, set Copy to Output Directory to Copy if newer.

  10. In your project, open the HelloWorldLogic.cs file and add using FM.LiveSwitch;.

Compose the Token

In a video conference, you need some way for the participants to communicate with each other. In LiveSwitch, the Gateway fulfills this role. The Gateway connects everyone who wants to participate in a media session. It controls which individuals can communicate with each other and restricts unauthorized access. To start a session, you must first register with the LiveSwitch Gateway. When you submit a request to register, you're required to generate an authorization token.

A token is a key that's encoded with the details of your authorization request. Each token is composed of several parts.

A channel is a unique identifier that describes an audio or video conference. Generally, for each video conference that the participants join in, you'll want to have a unique channel associated with it. We'll use "stream-channel" as our channel ID for this tutorial but you can use any string for the ID.

Paste the following code into the Config.cs file, and replace with your own Application ID, Shared Secret, and Gateway URL.

public class Config
{
    public static readonly string ApplicationId = "replace-with-your-app-id";
    public static readonly string ChannelId = "stream-channel";
    public static readonly string GatewayURL = "replace-with-your-gateway-url";
    public static readonly string SharedSecret = "replace-with-your-shared-secret";
}

Write Log Messages

The LiveSwitch Client SDK has a logging API that provides information about what's happening for you to troubleshoot your app. To write log messages, you must set the log level to define the importance of the message and register a log provider where you'll output your log messages. For more information about setting up log, refer to the Set Up Client Logging topic. Here, we set the log level as Debug and use the default provider which is the IDE's console.

Copy the following code inside the HelloWorldLogic class in the HelloWordLogic.cs file.

private HelloWorldLogic()
{
    Log.RegisterProvider(new ConsoleLogProvider(LogLevel.Debug));
}

Join a Channel

The next step is to make a registration request. Do the following:

  1. Create a client instance and instantiate it.

  2. Generate an authorization token for that client.

    Warning

    You should never generate the token client-side in production. We're doing so for demo purposes only. For more information, refer to the Generate Authorization Token Server Side topic.

  3. Register the client with the token by invoking the client.register method of the client instance. This method returns a promise, which is resolved if the registration is successful and is rejected if it's not. Write the registration state to log.

    Tip

    Make sure to validate the result of this promise before attempting to proceed with any further operations. If the registration is successful, the promise returns a set of channels that it has registered the client to. These will match the channels that you specified when you created your authorization token.

When composing the token, we hard-coded the channel ID for demonstration purposes. This joins the client into the channel automatically.

Copy the following code inside the HelloWorldLogic class.

// Create a client instance
public Client Client { get; private set; }
public Channel Channel { get; private set; } 
// Make a registration request
public async Task JoinAsync()
{
    // Instantiate the client
    Client = new Client(GatewayURL, ApplicationId);
    ChannelClaim[] channelClaims = new[] { new ChannelClaim(ChannelId) };
    string token = Token.GenerateClientRegisterToken(
        ApplicationId,
        Client.UserId,
        Client.DeviceId,
        Client.Id,
        null,
        channelClaims,
        SharedSecret
    );

    var channels = await Client.Register(token).AsTask();
    OnClientRegistered(channels);
}

private void OnClientRegistered(Channel[] channels)
{
    Channel = channels[0];
    DisplayMessage($"Client {Client.Id} has successfully connected to channel {Channel.Id}, Hello World!");
    Log.Info(string.Format("Client {0} has successfully connected to channel {1}, Hello World!", Client.Id, Channel.Id));
}

Run Your App

Note

LiveSwitch recommends that you use a phone and not an emulator to run the mobile apps. It's possible to run the mobile apps on an emulator, but the camera doesn't work.

Run your app in your project IDE. Your app window appears with several buttons. Click Join. You should see the client has successfully joined message. Congratulations, you've built your first LiveSwitch app! Now, go to your LiveSwitch Console, and select the Hello World app. You should see one client and one channel.

We don't have any connections because we haven't streamed any video yet. All the buttons except **Join** aren't functional. We'll make them functional in subsequent tutorials.

Have an Issue?

If you run into an issue, use the Report an issue button to get help fixing the problem.