Added dockerized version and added Channel/Room selector from Django_…

Docker-Compose.yml

@@ -0,0 +1,26 @@
+version: "3"
+
+services:
+  redis:
+    restart: always
+    image: redis:latest
+    networks:
+      - main
+    ports:
+      - "6379:6379/tcp"
+  web:
+    restart: always
+    build: ./web
+    image: django_video
+    command: python manage.py runserver 0.0.0.0:8000
+    ports:
+      - "8000:8000"
+    networks:
+      - main
+    volumes:
+      - ./web/mysite:/usr/src/app/
+    env_file: .env
+    environment:
+      - DEBUG=true
+networks:
+  main:

web/Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3
+
+ARG DEBIAN_FRONTEND=noninteractive
+ENV PYTHONUNBUFFERED 1
+ENV PYTHONDONTWRITEBYTECODE 1
+
+
+RUN mkdir /usr/src/app
+
+COPY requirements.txt /usr/src/app
+COPY mysite/ /usr/src/app
+
+WORKDIR /usr/src/app
+
+RUN python3 -m pip install --upgrade pip \
+    && python3 -m pip install --upgrade pip setuptools wheel \
+    && python3 -m pip install -r requirements.txt \
+    && apt-get clean autoclean \
+    && apt-get autoremove --yes 
+

web/mysite/chat/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

web/mysite/chat/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ChatConfig(AppConfig):
+    name = 'chat'

web/mysite/chat/consumers.py

@@ -0,0 +1,90 @@
+import json
+from channels.generic.websocket import AsyncWebsocketConsumer
+
+import asyncio
+
+class ChatConsumer(AsyncWebsocketConsumer):
+    async def connect(self):
+
+        self.room_name = self.scope['url_route']['kwargs']['room_name']
+        self.room_group_name = 'chat_%s' % self.room_name
+        await self.channel_layer.group_add(
+            self.room_group_name,
+            self.channel_name
+        )
+
+        await self.accept()
+
+    async def disconnect(self, close_code):
+
+        await self.channel_layer.group_discard(
+            self.room_group_name,
+            self.channel_name
+        )
+
+        print('Disconnected!')
+
+
+    # Receive message from WebSocket
+    async def receive(self, text_data):
+        receive_dict = json.loads(text_data)
+        print(receive_dict)
+        peer_username = receive_dict['peer']
+        action = receive_dict['action']
+        message = receive_dict['message']
+
+        # print('unanswered_offers: ', self.unanswered_offers)
+
+        print('Message received: ', message)
+
+        print('peer_username: ', peer_username)
+        print('action: ', action)
+        print('self.channel_name: ', self.channel_name)
+
+        if(action == 'new-offer') or (action =='new-answer'):
+            # in case its a new offer or answer
+            # send it to the new peer or initial offerer respectively
+
+            receiver_channel_name = receive_dict['message']['receiver_channel_name']
+
+            print('Sending to ', receiver_channel_name)
+
+            # set new receiver as the current sender
+            receive_dict['message']['receiver_channel_name'] = self.channel_name
+
+            await self.channel_layer.send(
+                receiver_channel_name,
+                {
+                    'type': 'send.sdp',
+                    'receive_dict': receive_dict,
+                }
+            )
+
+            return
+
+        # set new receiver as the current sender
+        # so that some messages can be sent
+        # to this channel specifically
+        receive_dict['message']['receiver_channel_name'] = self.channel_name
+
+        # send to all peers
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                'type': 'send.sdp',
+                'receive_dict': receive_dict,
+            }
+        )
+
+    async def send_sdp(self, event):
+        receive_dict = event['receive_dict']
+
+        this_peer = receive_dict['peer']
+        action = receive_dict['action']
+        message = receive_dict['message']
+
+        await self.send(text_data=json.dumps({
+            'peer': this_peer,
+            'action': action,
+            'message': message,
+        }))

web/mysite/chat/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

web/mysite/chat/routing.py

@@ -0,0 +1,9 @@
+from django.urls import re_path
+
+from . import consumers
+
+websocket_urlpatterns = [
+    re_path(r'chat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
+    re_path(r'peer[12]/', consumers.ChatConsumer.as_asgi()),
+    re_path(r'peer', consumers.ChatConsumer.as_asgi()),
+]

web/mysite/chat/templates/chat/index.html

@@ -0,0 +1,27 @@
+<!-- chat/templates/chat/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Chat Rooms</title>
+</head>
+<body>
+    What chat room would you like to enter?<br>
+    <input id="room-name-input" type="text" size="100"><br>
+    <input id="room-name-submit" type="button" value="Enter">
+
+    <script>
+        document.querySelector('#room-name-input').focus();
+        document.querySelector('#room-name-input').onkeyup = function(e) {
+            if (e.keyCode === 13) {  // enter, return
+                document.querySelector('#room-name-submit').click();
+            }
+        };
+
+        document.querySelector('#room-name-submit').onclick = function(e) {
+            var roomName = document.querySelector('#room-name-input').value;
+            window.location.pathname = '/chat/' + roomName + '/';
+        };
+    </script>
+</body>
+</html>

web/mysite/chat/templates/chat/peer.html

@@ -0,0 +1,12 @@
+{% extends 'main.html' %}
+
+{% load static %}
+
+{% block content %}
+    <!-- <script>
+        var numbTurnCredential = '{{numb_turn_credential}}';
+        var numbTurnUsername = '{{numb_turn_username}}';
+    </script> -->
+    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
+    <script type="text/javascript" src="{% static 'js/peer.js' %}"></script>
+{% endblock %}

web/mysite/chat/templates/chat/peer1.html

@@ -0,0 +1,10 @@
+{% extends 'trial_main.html' %}
+
+{% load static %}
+
+{% block content %}
+    <div>
+        <button id="btn-send-offer">Send Offer SDP</button>
+    </div>
+    <script type="text/javascript" src="{% static 'js/peer1.js' %}"></script>
+{% endblock %}

web/mysite/chat/templates/chat/peer2.html

@@ -0,0 +1,7 @@
+{% extends 'trial_main.html' %}
+
+{% load static %}
+
+{% block content %}
+    <script type="text/javascript" src="{% static 'js/peer2.js' %}"></script>
+{% endblock %}

web/mysite/chat/templates/chat/room.html

@@ -0,0 +1,52 @@
+<!-- chat/templates/chat/room.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Chat Room</title>
+</head>
+<body>
+    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
+    <input id="chat-message-input" type="text" size="100"><br>
+    <input id="chat-message-submit" type="button" value="Send">
+    {{ room_name|json_script:"room-name" }}
+    <script>
+        const roomName = JSON.parse(document.getElementById('room-name').textContent);
+
+        const chatSocket = new WebSocket(
+            'ws://'
+            + window.location.host
+            + '/ws/chat/'
+            + roomName
+            + '/'
+        );
+
+        chatSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+            document.querySelector('#chat-log').value += (data.message + '\n');
+        };
+
+        chatSocket.onclose = function(e) {
+            console.error('Chat socket closed unexpectedly');
+        };
+
+        document.querySelector('#chat-message-input').focus();
+        document.querySelector('#chat-message-input').onkeyup = function(e) {
+            if (e.keyCode === 13) {  // enter, return
+                document.querySelector('#chat-message-submit').click();
+            }
+        };
+
+        document.querySelector('#chat-message-submit').onclick = function(e) {
+            const messageInputDom = document.querySelector('#chat-message-input');
+            const message = messageInputDom.value;
+            const peer = messageInputDom.value;
+            chatSocket.send(JSON.stringify({
+                'message': message
+            }));
+            messageInputDom.value = '';
+        };
+
+    </script>
+</body>
+</html>

web/mysite/chat/templates/main.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+{% load static %}
+
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Django Channels WebRTC</title>
+	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
+</head>
+<body>
+	<h3 id="label-username">USERNAME</h3>
+	<div>
+		<input id="username"><button id="btn-join">Join Room</button>
+	</div>
+	<div class="main-grid-container">
+		<!-- for grid layout
+		assign class video-grad-layout -->
+		<div id="video-container">
+			<div><video id="local-video" style="float: left;" autoplay playsinline></video></div>
+			<button id="btn-toggle-audio" class="btn btn-dark">Audio Mute</button>
+			<button id="btn-toggle-video" class="btn btn-dark">Video Off</button>
+		</div>
+		<div id="chat">
+			<h3> CHAT </h3>
+			<div id="messages">
+				<ul id="message-list"></ul>
+			</div>
+			<div id="ct"><input id="msg"><button id="btn-send-msg">send</button></div>
+			<button id="btn-share-screen">Share Screen</button>
+
+			<button id="btn-record-screen">Record Screen</button>
+
+			<button class="view-button" id="share-file-button">Share File</button>
+			<div id="select-file-dialog" style="display: none;">
+				<div id="dialog-content">
+				  <div id="select-file">
+					<div id="label">Select a file:</div>
+					<input type="file" id="select-file-input">
+				  </div>
+				  <div id="dialog-footer">
+					<button id="ok-button" disabled>Ok</button>
+					<button id="cancel-button" class="cancel-button">Cancel</button>
+				  </div>
+				</div>
+			  </div>
+		</div>
+	</div>
+    {% block content %}
+    {% endblock %}
+</body>
+</html>

web/mysite/chat/templates/trial_main.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+{% load static %}
+
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Django Channels WebRTC</title>
+	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
+</head>
+<body>
+	<h3 id="label-username">USERNAME</h3>
+	<div>
+		<input id="username"><button id="btn-join">Join Room</button>
+	</div>
+	<div class="main-grid-container">
+		<!-- for grid layout
+		assign class video-grad-layout -->
+		<div>
+			<div><video id="local-video" style="float: left;" autoplay playsinline></video></div>
+			<div>
+				<video id="remote-video" style="float: right;" autoplay playsinline></video>
+				<button id="btn-play-remote-video" style="visibility: hidden">Click to view remote video</button>
+			</div>
+		</div>
+		<div id="chat">
+			<h3> CHAT </h3>
+			<div id="messages">
+				<ul id="message-list"></ul>
+			</div>
+			<div id="ct"><input id="msg"><button id="btn-send-msg">send</button></div>
+			<button id="btn-share-screen">Share Screen</button>
+		</div>
+	</div>
+    {% block content %}
+    {% endblock %}
+</body>
+</html>

web/mysite/chat/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

web/mysite/chat/urls.py

@@ -0,0 +1,8 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='index'),
+    path('peer', views.peer, name='peer'),
+    path('chat/<str:room_name>/', views.peer, name='room')
+]