Implementing a Live Streaming feature on your site with C# .Net Core and AWS

June 16, 2021Code , Development , Technology

These days, Live Streaming services are causing a great impact in terms of staying connected with other people, now during this pandemic, the technologies we have are capable of serving these needs.

In this post, I want to describe a few points and recommendations about which technologies we can use to embed your existing live-streaming source on our own site or app and some essential and advanced features you can integrate too.

So first we need to understand what a live streaming service is; this kind of service gives you the ability to watch streaming video in real-time without the need to download the complete video before playing it. This is possible because the data is being transmitted to the internet a little bit at a time.

Live broadcasting video is one of the most popular services to watch a real-time video; you might be already using one of these, Facebook, YouTube, or Twitch. These apps allow you to broadcast live video to your audience so we’re going to see some steps to embed this live broadcast on your site.

Getting started

Video Embedding

Most of the providers mentioned above have API’s available for you to use, so let’s think we’re going to use Twitch as our streaming source (the same will apply for Facebook and YouTube). We can use the Twitch API to get a user’s channel by id or get channel streams as well.

GET https://api.twitch.tv/kraken/channels/<channel ID>

Now that we know that the channel exists, we can integrate the Twitch SDK on our page in order to start watching the configured channel stream. Per Twitch’s documentation they show three different ways to embed videos:

  • Non-interactive iframes for video
  • Interactive iframes for video
  • Non-interactive iframes for clips
<iframe
    src="https://player.twitch.tv/?channel=viaronet&parent=streamernews.example.com&muted=true"
    height="720"
    width="1280"
    allowfullscreen="true">
</iframe>

And that’s it, we have embedded our existing Livestream source into our own page so we will be able to start watching a video in real-time when the broadcast starts on the Twitch channel.

Real time updates

But this is not the only important thing here, we can also integrate other technologies like WebSockets to broadcast messages to other users connected to our site. This can be done by using WebSockets in AWS API Gateway. This is a great service provided by Amazon that will give you the ability to integrate different parts of your Livestream service to give the end-user the experience of real-time interactions.

aws apigatewayv2 --region us-east-1 create-api --name "myTestSocket" --protocol-type WEBSOCKET --route-selection-expression '$request.body.action'

Let’s think we have a WebSocket already implemented, we can send a message on the socket every time a channel is updated/added as the source and all the clients connected to the socket will receive a message that we can use for example to update the page to display the configured Twitch channel broadcast so that users don’t need to refresh the page to see the embedded video.

Once deployed, our web socket api url will looks like this:

wss://{api-id}.execute-api.{region}.amazonaws.com/{stageName}

Now we can connect to our socket from the client side, for example:

function openSocket (url) { // url will be our websocket api url
    var mySocket = new WebSocket(url);
    mySocket.onOpen = onSocketOpen;
    mySocket.onClose = onSocketClose;
    mySocket.onMessage = onSocketMessage;    return mySocket;
}
mySocket.send(serializedMessage);

Recommendations

Chat

Don’t forget about design, a well-designed Livestream system will attract more audience; but what if this audience wants to interact while watching the live broadcast? Well, we can mention another feature of streaming apps, Comments, and Sharing. Let’s continue with our example from the above sections. Integrating a chat option on our page is an essential feature so that users can interact and keep in touch. This can be done with some help from the WebSocket and in this part, we want to introduce some other services from Amazon:

Assuming we have already developed the updates on our page to add a chat section where users can type messages, we’re going to use the WebSocket again, this time we’re integrating two other services, we can create an AWS lambda function that will be executed from a message posted on the socket and we can set up our Lambda function to save the message posted in the chat to a database, for example, DynamoDB; this way when another client comes in we can deliver the existing chat history with another lambda function that can be executed when a new socket connection is opened.

Let’s see an example on how to post a new entry to a DynamoDB table:

IAmazonDynamoDB _ddbClient = new AmazonDynamoDBClient();
public async Task<string> postComment(Message message) {
    var messageId = GenerateMessageId();
    var ddbRequest = new PutItemRequest{
        TableName = "myDbTableName",
        Item = new Dictionary<string, AttributeValue> {
            {"messageid", new AttributeValue {S = messageId }},
            {"Comment", new AttributeValue {S = message.Comment }}
        }
    }
}
await _ddbClient.PutItemAsync(ddbRequest);

Now let’s move into our last section.

Advanced features

We have already built an embedded live broadcast with a chat option. Now another feature that is well known in the live streaming services is to collect donations during the broadcast. Here we can integrate with any 3rd party payment system or develop our own (which can be discussed later in another post).

This feature can be added to our page so that users can support the streamer if they are enjoying the broadcast, for which we can also make good use of the advantages provided by the AWS Services, either DynamoDB or any Amazon RDS relational databases to persist our data.

Conclusion

There are plenty of technologies out there that will allow you to build your own live stream app or to connect with an existing stream provider. Here’s a list of technologies and services recommended from our example:

  • Programming language: C#
  • Hosting: Amazon EC2
  • Client side: Javascript with Angular
  • Server side: .Net Core
  • Database: PostgreSQL, DynamoDB
  • Notifications: AWS WebSockets, Lambdas
  • Queues: AWS SQS

This are some additional references we quoted for this post:


Related post

What to look for when hiring a software developer from an outsourcing company?

Development , Outsourcing , Technology

There are some key factors to consider when hiring a software developer from an outsourcing company. Outsourcing has become a common practice, especially when it comes to software development since it provides a cost-effective solution when hiring process developing talent. Although you will avoid the usual pains of the hiring process, it’s always good to …

Read more
Migrating to C# 7.3 .NetFramework project

Code , Development , Tech , Technology , Tutorial

At Viaro Networks, I’m currently working on upgrading the version of .Net Core or the .Net Framework for some projects of one of our clients. To accomplish this task we have to upgrade the C# version, this means we will also need to refactor a lot of code and check the available documentation. We also …

Read more

Leave A Comment

Your email is safe with us.