Building a Simple Video Chatroom with Flask and OpenTok

OpenTok Flask Demo
This tutorial will show you how to create a simple, yet functional video chatroom using the OpenTok API and Flask. Flask is a python based micro-framework to create web apps.

The App

The app we’ll be creating will be a simple website which will allow you to instantly create a video chatroom.

Setup

So, let’s get started! First of all, you’ll need to install Flask. Then, create a new folder and inside, make a new file called main.py.

In main.py:

from flask import Flask, redirect, url_for,render_template

app = Flask(__name__)
app.config.from_object(__name__)

if __name__ == '__main__':
   app.run()

Here we’re importing Flask into our Python script along with some other modules we’ll be using and then initializing our Flask app. We now have to install the OpenTok Python SDK via Pip:

pip install opentok-python-sdk

Now, import the OpenTokSDK and include your API information.
Your new main.py should look like this:

from flask import Flask, redirect, url_for,render_template
import OpenTokSDK

app = Flask(__name__)

app.config.from_object(__name__)

api_key = "" # Replace with your OpenTok API key.
api_secret = "" # Replace with your OpenTok API secret.

opentok_sdk = OpenTokSDK.OpenTokSDK(api_key, api_secret)

if __name__ == '__main__':
   app.run()

Now, we have to add some basic url routing. When a user first goes to the site, he should be redirected to a new chatroom. In OpenTok, chatrooms are represented by sessions, each of which has a session_id. This chatroom url for this app will be based off of an OpenTok Session ID.

@app.route('/')
def index():
   session_properties = {OpenTokSDK.SessionProperties.p2p_preference: "disabled"}
   session = opentok_sdk.create_session(None, session_properties)

The session_properties variable is ensuring that Peer-to-Peer videochatting is disabled, since this is a multiparty chat. We then create a new OpenTok Session based off these properties.

Next, we need a function which allows us to enter a chatroom by using the Session ID part of the url. So, we will route all urls with Session IDs (like http://domain.com/session_id) to a new function called chat.

@app.route('/<session_id>')
def chat(session_id):
   token=opentok_sdk.generate_token(session_id)
   return render_template('chat.html', api_key= api_key, session_id=session_id, token=token)

In this method, we will create a new token for anyone visiting a specific chatroom. Tokens are like a key to a chatroom, where the session is the room. Each person that connects to an OpenTok Session has a unique token which serves as his or her key to the chatroom. We then send the API Key, the Session ID, and the token to a template to render the video chat UI in the front end.

Now, in the index method, we have to add the actual redirecting part of the code. The method should now look like this:

@app.route('/')
def index():
   session_properties = {OpenTokSDK.SessionProperties.p2p_preference: "disabled"}
   session = opentok_sdk.create_session(None, session_properties)
   url= url_for('chat',session_id=session.session_id)
   return redirect(url)

Now, anyone that goes to the index page gets sent to a new chat room by creating an OpenTok Session and calling the chat function based off of this new session’s ID.

That’s it for the Python side of the app!

For the front end part of this, read our excellent Javascript Hello World Tutorial.

You can view a live demo of the Flask Chatroom App here.
You can also view the full source code of the project here.