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: