Movie Speak To LiveView and OpenTok. In my own post that is previous Streaming with LiveView and Mux
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
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.
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.
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:
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: