Blog Details

• Elixir
• Engineering

we explored exactly just how easy it absolutely was to incorporate Phoenix LiveView with Mux to reside stream video. Because it ended up, it absolutely was quite simple: under 70 lines of rule. Although the method we utilized in that post would work perfect for live streaming events or meeting talks, the small wait wouldn’t work with real-time interaction such as for instance movie talk.

On this page, i shall explore exactly just exactly how Phoenix LiveView can be employed to quickly and simply engineer a video clip talk solution.

this time around we are utilizing OpenTok, which will be now element of Vonage while the Vonage Video API. The post may also be somewhat various in through the example repository and explain the logic behind the code that it is not a step-by-step tutorial, I will instead walk you. Not surprisingly, the video that is full needed more lines of rule than our uni-directional streaming instance did, however it nevertheless arrived in less than 350 lines (

125 of these for the lobby).

You will see the instance repository here, and also as with all the past post, you can observe the initial commit ended up being made after merely operating mix phx.new –live –no-ecto opentok_liveview , and all sorts of subsequent rule beyond the generated rule is in this commit.

Lobby and Area Master

Room Master

First, let’s simply simply take an instant go through the logic within the instance which takes spot before we arrive at the video that is actual. In Elixir, we store and access ephemeral system-wide state in a GenServer. For the instance, we shop space and individual information within the RoomMaster. We won’t enter into the details of GenServers, but also for our purposes, we must understand that the RoomMaster keeps monitoring of record of spaces, who’s in each space, and factual statements about each individual such as for example their username, flow identifier (once they begin streaming), their personal token, and a guide to their LiveView process ID so we could alert them whenever their space details modification.

An individual attempts to join room that doesn’t yet occur, the RoomMaster produces an OpenTok session when it comes to room and adds the space to its list:

As you can plainly see, we have been utilizing the ExOpentok library for server-side interaction with OpenTok, producing the session id with ExOpentok.init() .

As soon as the RoomMaster has to include a person to your available space, it once again go right here makes use of ExOpentok to build a token for the room’s session, through the phone call ExOpentok.Token.generate(session_id) and shops the brand new users information in its state for the space:

We also loop through the existing users and let them know that someone is joining the room through a :room_updated message as you can see. We will have exactly just just how LiveView handles this message that is incoming we arrive at the Room LiveView page in a little.

Lobby

The standard PageView created by LiveView is among the most lobby. The PageView template together with PageView LiveView show how concise the declarative nature of LiveView is, because of the template to arrive at under 40 lines of rule, plus the LiveView just assigning the existing variety of spaces as retrieved through the RoomMaster on mount, and managing some fundamental occasions that either up-date the assigns or redirect an individual to a space.

The Video Chat Place

All this, nonetheless, is setup for where in actuality the genuine movie miracle really occurs, the Room LiveView.

You can find three components into the available Room LiveView: the template, the LiveView, and also the javascript.

The area LiveView

Within the LiveView mount, we come across that the username and space title from the URL are captured and kept into the assigns, after which in the event that LiveView is connected, it’s going to ask the RoomMaster to participate the available space, assigning the room details if effective:

We additionally observe this LiveView handles the message that is:room_updated we saw referenced into the RoomMaster. Whenever this message is gotten, the LiveView simply assigns the room information that is new. This may result in the UI to upgrade plus the user that is new come in the web web browser:

The rest associated with LiveView file is a component associated with dance that takes place forward and backward involving the JavaScript plus the LiveView. We’re going to follow that dance forward and backward in an effort, so jump that is let’s to your JavaScript apply for now.

LiveView and JavaScript

One of several major great things about LiveView is the fact that it eliminates composing many, if you don’t all, JavaScript required to create rich experiences that are interactive the internet. One destination in which you will have to write a little bit of JavaScript occurs when reaching customer libraries that by by themselves are written in JavaScript. This is actually the instance we now have right here: the OpenTok collection is just A javascript collection. This library is included by us in our application simply by incorporating a script tag into the root design LiveView template.

The answer because of this occasion will are the key, token, and session_id. Right right Back into the JavaScript, we come across exactly just just how these answer values are utilized:

First, we initialize the OpenTok session with all the key and session id. We then initialize an OpenTok Publisher and point it during the publisher-div we within the template. OpenTok will simply take over that div and populate it using their audience and settings. We then hook up to the session with your token that is unique we in the host. As soon as linked, we begin posting to your session. Should this be effective, we will reunite a flow id, which we are able to share with the host so other clients understand which user is associated with which flow. This can update everyone else’s LiveView with a subscriber-div even as we saw when you look at the template:

We additionally tell the session how to deal with the “streamCreated” event, which causes with this individual whenever any kind of users get in on the session. It calls this function: