├── call ├── __init__.py ├── migrations │ └── __init__.py ├── models.py ├── admin.py ├── tests.py ├── urls.py ├── views.py ├── apps.py ├── routing.py ├── consumers.py └── templates │ └── index.html ├── videocall ├── __init__.py ├── wsgi.py ├── asgi.py ├── urls.py └── settings.py ├── Procfile.pre ├── requirements.txt ├── static ├── logo.png ├── profile.png ├── call.css └── call.js ├── Procfile ├── .gitignore ├── readme.md ├── manage.py └── README.md /call/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /videocall/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /call/migrations/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Procfile.pre: -------------------------------------------------------------------------------- 1 | web: gunicorn videocall.asgi -------------------------------------------------------------------------------- /call/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /call/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /call/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Django==3.2.5 2 | channels==3.0.4 3 | gunicorn==20.1.0 4 | daphne==3.0.2 -------------------------------------------------------------------------------- /static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InfoDevkota/WebRTC-Django-Django-Channels-Video-Call/HEAD/static/logo.png -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: daphne videocall.asgi:application --port $PORT --bind 0.0.0.0 -v2 2 | worker: python manage.py runworker -v2 -------------------------------------------------------------------------------- /static/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InfoDevkota/WebRTC-Django-Django-Channels-Video-Call/HEAD/static/profile.png -------------------------------------------------------------------------------- /call/urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import path 2 | 3 | from . import views 4 | 5 | urlpatterns = [ 6 | path('', views.index, name='index'), 7 | ] -------------------------------------------------------------------------------- /call/views.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | 3 | # Create your views here. 4 | def index(request): 5 | return render(request, 'index.html') -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | 4 | # Django stuff: 5 | *.log 6 | local_settings.py 7 | db.sqlite3 8 | db.sqlite3-journal 9 | -------------------------------------------------------------------------------- /call/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class CallConfig(AppConfig): 5 | default_auto_field = 'django.db.models.BigAutoField' 6 | name = 'call' 7 | -------------------------------------------------------------------------------- /call/routing.py: -------------------------------------------------------------------------------- 1 | # call/routing.py 2 | from django.urls import re_path 3 | 4 | from . import consumers 5 | 6 | websocket_urlpatterns = [ 7 | re_path(r'ws/call/', consumers.CallConsumer.as_asgi()), 8 | ] -------------------------------------------------------------------------------- /videocall/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for videocall project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.2/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'videocall.settings') 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 1. Please verify you have python installed `$ python --version` 2 | 2. Verify you have Django installed `$ python -m django --version` [Instalation Guide](https://docs.djangoproject.com/en/stable/intro/install/) 3 | 3. Verify you have Django Channels installed `$ python -c 'import channels; print(channels.__version__)'` [Instalation Guide](https://channels.readthedocs.io/en/stable/installation.html) 4 | 5 | Article:- 6 | [https://www.bloggernepal.com/2021/10/video-call-in-django-with-webrtc-and-channels.html](https://www.bloggernepal.com/2021/10/video-call-in-django-with-webrtc-and-channels.html) 7 | 8 | Video:- 9 | [https://www.youtube.com/watch?v=N7lbtbmqLvM](https://www.youtube.com/watch?v=N7lbtbmqLvM) -------------------------------------------------------------------------------- /manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | """Run administrative tasks.""" 9 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'videocall.settings') 10 | try: 11 | from django.core.management import execute_from_command_line 12 | except ImportError as exc: 13 | raise ImportError( 14 | "Couldn't import Django. Are you sure it's installed and " 15 | "available on your PYTHONPATH environment variable? Did you " 16 | "forget to activate a virtual environment?" 17 | ) from exc 18 | execute_from_command_line(sys.argv) 19 | 20 | 21 | if __name__ == '__main__': 22 | main() 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebRTC-Django-Django-Channels-Video-Call 2 | 3 | 1. Please verify you have python installed `$ python --version` 4 | 2. Verify you have Django installed `$ python -m django --version` [Instalation Guide](https://docs.djangoproject.com/en/stable/intro/install/) 5 | 3. Verify you have Django Channels installed `$ python -c 'import channels; print(channels.__version__)'` [Instalation Guide](https://channels.readthedocs.io/en/stable/installation.html) 6 | 7 | Article:- 8 | [https://www.bloggernepal.com/2021/10/video-call-in-django-with-webrtc-and-channels.html](https://www.bloggernepal.com/2021/10/video-call-in-django-with-webrtc-and-channels.html) 9 | 10 | Video:- 11 | [https://www.youtube.com/watch?v=N7lbtbmqLvM](https://www.youtube.com/watch?v=N7lbtbmqLvM) 12 | -------------------------------------------------------------------------------- /videocall/asgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | ASGI config for videocall project. 3 | 4 | It exposes the ASGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/ 8 | """ 9 | 10 | import os 11 | 12 | from channels.auth import AuthMiddlewareStack 13 | from channels.routing import ProtocolTypeRouter, URLRouter 14 | from django.core.asgi import get_asgi_application 15 | import call.routing 16 | 17 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "videocall.settings") 18 | 19 | # application = get_asgi_application() 20 | application = ProtocolTypeRouter({ 21 | "http": get_asgi_application(), 22 | "websocket": AuthMiddlewareStack( 23 | URLRouter( 24 | call.routing.websocket_urlpatterns 25 | ) 26 | ), 27 | }) 28 | -------------------------------------------------------------------------------- /videocall/urls.py: -------------------------------------------------------------------------------- 1 | """videocall URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/3.2/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.urls import include, path 14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 | """ 16 | from django.contrib import admin 17 | from django.urls import path 18 | 19 | from django.conf.urls import include 20 | from django.conf.urls.static import static 21 | from django.conf import settings 22 | 23 | urlpatterns = [ 24 | path('admin/', admin.site.urls), 25 | path('', include('call.urls')), 26 | ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) 27 | -------------------------------------------------------------------------------- /static/call.css: -------------------------------------------------------------------------------- 1 | .dialWrapper { 2 | width: 300px; 3 | background-color: antiquewhite; 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | .dialNumpadHWrapper { 9 | display: flex; 10 | flex-direction: row; 11 | justify-content: center; 12 | align-items: stretch; 13 | } 14 | 15 | .dialNumber { 16 | display: flex; 17 | width: 100px; 18 | height: 50px; 19 | align-items: center; 20 | justify-content: center; 21 | cursor: pointer; 22 | } 23 | 24 | .incomingWrapper { 25 | width: 300px; 26 | background-color: antiquewhite; 27 | display: flex; 28 | flex-direction: column; 29 | } 30 | 31 | .itemWrapper { 32 | display: flex; 33 | flex-direction: column; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | 38 | .actionButton { 39 | display: flex; 40 | width: 100px; 41 | height: 50px; 42 | align-items: center; 43 | justify-content: center; 44 | cursor: pointer; 45 | } 46 | 47 | .dialActionButton { 48 | display: flex; 49 | width: 80px; 50 | height: 40px; 51 | align-items: center; 52 | justify-content: center; 53 | font-size: larger; 54 | cursor: pointer; 55 | } 56 | 57 | #errorMessage { 58 | color: red; 59 | } 60 | -------------------------------------------------------------------------------- /call/consumers.py: -------------------------------------------------------------------------------- 1 | # call/consumers.py 2 | import json 3 | from asgiref.sync import async_to_sync 4 | from channels.generic.websocket import WebsocketConsumer 5 | 6 | class CallConsumer(WebsocketConsumer): 7 | def connect(self): 8 | self.accept() 9 | 10 | # response to client, that we are connected. 11 | self.send(text_data=json.dumps({ 12 | 'type': 'connection', 13 | 'data': { 14 | 'message': "Connected" 15 | } 16 | })) 17 | 18 | def disconnect(self, close_code): 19 | # Leave room group 20 | async_to_sync(self.channel_layer.group_discard)( 21 | self.my_name, 22 | self.channel_name 23 | ) 24 | 25 | # Receive message from client WebSocket 26 | def receive(self, text_data): 27 | text_data_json = json.loads(text_data) 28 | # print(text_data_json) 29 | 30 | eventType = text_data_json['type'] 31 | 32 | if eventType == 'login': 33 | name = text_data_json['data']['name'] 34 | 35 | # we will use this as room name as well 36 | self.my_name = name 37 | 38 | # Join room 39 | async_to_sync(self.channel_layer.group_add)( 40 | self.my_name, 41 | self.channel_name 42 | ) 43 | 44 | if eventType == 'call': 45 | name = text_data_json['data']['name'] 46 | print(self.my_name, "is calling", name); 47 | # print(text_data_json) 48 | 49 | 50 | # to notify the callee we sent an event to the group name 51 | # and their's groun name is the name 52 | async_to_sync(self.channel_layer.group_send)( 53 | name, 54 | { 55 | 'type': 'call_received', 56 | 'data': { 57 | 'caller': self.my_name, 58 | 'rtcMessage': text_data_json['data']['rtcMessage'] 59 | } 60 | } 61 | ) 62 | 63 | if eventType == 'answer_call': 64 | # has received call from someone now notify the calling user 65 | # we can notify to the group with the caller name 66 | 67 | caller = text_data_json['data']['caller'] 68 | # print(self.my_name, "is answering", caller, "calls.") 69 | 70 | async_to_sync(self.channel_layer.group_send)( 71 | caller, 72 | { 73 | 'type': 'call_answered', 74 | 'data': { 75 | 'rtcMessage': text_data_json['data']['rtcMessage'] 76 | } 77 | } 78 | ) 79 | 80 | if eventType == 'ICEcandidate': 81 | 82 | user = text_data_json['data']['user'] 83 | 84 | async_to_sync(self.channel_layer.group_send)( 85 | user, 86 | { 87 | 'type': 'ICEcandidate', 88 | 'data': { 89 | 'rtcMessage': text_data_json['data']['rtcMessage'] 90 | } 91 | } 92 | ) 93 | 94 | def call_received(self, event): 95 | 96 | # print(event) 97 | print('Call received by ', self.my_name ) 98 | self.send(text_data=json.dumps({ 99 | 'type': 'call_received', 100 | 'data': event['data'] 101 | })) 102 | 103 | 104 | def call_answered(self, event): 105 | 106 | # print(event) 107 | print(self.my_name, "'s call answered") 108 | self.send(text_data=json.dumps({ 109 | 'type': 'call_answered', 110 | 'data': event['data'] 111 | })) 112 | 113 | 114 | def ICEcandidate(self, event): 115 | self.send(text_data=json.dumps({ 116 | 'type': 'ICEcandidate', 117 | 'data': event['data'] 118 | })) -------------------------------------------------------------------------------- /videocall/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for videocall project. 3 | 4 | Generated by 'django-admin startproject' using Django 3.2.5. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.2/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/3.2/ref/settings/ 11 | """ 12 | 13 | from pathlib import Path 14 | 15 | import os 16 | 17 | # Build paths inside the project like this: BASE_DIR / 'subdir'. 18 | BASE_DIR = Path(__file__).resolve().parent.parent 19 | 20 | 21 | # Quick-start development settings - unsuitable for production 22 | # See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/ 23 | 24 | # SECURITY WARNING: keep the secret key used in production secret! 25 | SECRET_KEY = 'django-insecure-9ndce&l@l+tiq0&hpd^9p!xki()!dka-l+ad+$cn)48v-%(ybr' 26 | 27 | # SECURITY WARNING: don't run with debug turned on in production! 28 | DEBUG = True 29 | 30 | ALLOWED_HOSTS = ["rtcvideocall.pythonanywhere.com", "django-videocall.herokuapp.com", "localhost"] 31 | 32 | 33 | # Application definition 34 | 35 | INSTALLED_APPS = [ 36 | 'django.contrib.admin', 37 | 'django.contrib.auth', 38 | 'django.contrib.contenttypes', 39 | 'django.contrib.sessions', 40 | 'django.contrib.messages', 41 | 'django.contrib.staticfiles', 42 | 43 | 'call', 44 | 'channels', 45 | ] 46 | 47 | MIDDLEWARE = [ 48 | 'django.middleware.security.SecurityMiddleware', 49 | 'django.contrib.sessions.middleware.SessionMiddleware', 50 | 'django.middleware.common.CommonMiddleware', 51 | 'django.middleware.csrf.CsrfViewMiddleware', 52 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 53 | 'django.contrib.messages.middleware.MessageMiddleware', 54 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 55 | ] 56 | 57 | ROOT_URLCONF = 'videocall.urls' 58 | 59 | TEMPLATES = [ 60 | { 61 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 62 | 'DIRS': [], 63 | 'APP_DIRS': True, 64 | 'OPTIONS': { 65 | 'context_processors': [ 66 | 'django.template.context_processors.debug', 67 | 'django.template.context_processors.request', 68 | 'django.contrib.auth.context_processors.auth', 69 | 'django.contrib.messages.context_processors.messages', 70 | ], 71 | }, 72 | }, 73 | ] 74 | 75 | WSGI_APPLICATION = 'videocall.wsgi.application' 76 | 77 | 78 | # Database 79 | # https://docs.djangoproject.com/en/3.2/ref/settings/#databases 80 | 81 | DATABASES = { 82 | 'default': { 83 | 'ENGINE': 'django.db.backends.sqlite3', 84 | 'NAME': BASE_DIR / 'db.sqlite3', 85 | } 86 | } 87 | 88 | 89 | # Password validation 90 | # https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators 91 | 92 | AUTH_PASSWORD_VALIDATORS = [ 93 | { 94 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 95 | }, 96 | { 97 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 98 | }, 99 | { 100 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 101 | }, 102 | { 103 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 104 | }, 105 | ] 106 | 107 | 108 | # Internationalization 109 | # https://docs.djangoproject.com/en/3.2/topics/i18n/ 110 | 111 | LANGUAGE_CODE = 'en-us' 112 | 113 | TIME_ZONE = 'UTC' 114 | 115 | USE_I18N = True 116 | 117 | USE_L10N = True 118 | 119 | USE_TZ = True 120 | 121 | 122 | # Static files (CSS, JavaScript, Images) 123 | # https://docs.djangoproject.com/en/3.2/howto/static-files/ 124 | 125 | STATIC_URL = '/static/' 126 | 127 | # For Local Development 128 | # STATICFILES_DIRS = [ 129 | # BASE_DIR / "static", 130 | # ] 131 | 132 | # For Deployments 133 | STATIC_ROOT = os.path.join(BASE_DIR, 'static') 134 | 135 | # Default primary key field type 136 | # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field 137 | 138 | DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' 139 | 140 | ASGI_APPLICATION = 'videocall.asgi.application' 141 | 142 | CHANNEL_LAYERS={ 143 | "default": { 144 | "BACKEND": "channels.layers.InMemoryChannelLayer" 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /call/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Video Call 9 | 10 | 11 | 21 | 22 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 |
33 | 36 |
37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 |

Hello,

45 |
46 | 47 |
48 | 49 | 50 |
51 |
52 | 54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 | 67 | 68 |
69 |
70 |
71 |

Incomming Call

72 |
73 |
74 | 76 |
77 |
78 |

79 |
80 |
81 | 82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 |
90 |

Calling

91 |
92 |
93 | 95 |
96 |
97 |

98 |
99 |
100 |
101 | 102 | 103 |
104 |
105 |
106 |

On Call With

107 |

108 |
109 |
110 |
111 | 112 |
113 | 114 | 115 |
116 |
117 | 118 |
119 |
120 | 121 |
122 |
123 |
124 |
125 |
126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 |
134 |
135 |
136 | 137 | Video Call in Django with WebRTC and Django Channels (Video Guide) 138 | 139 | 140 | Video Call in Django with WebRTC and Channels (Article) 141 | 142 | 143 | Setup STUN and TURN server on Ubuntu 144 | 145 | 146 | Github Repository 147 | 148 |
149 |
150 | 151 | 152 | 153 | 162 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /static/call.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const baseURL = "/" 4 | 5 | let localVideo = document.querySelector('#localVideo'); 6 | let remoteVideo = document.querySelector('#remoteVideo'); 7 | 8 | let otherUser; 9 | let remoteRTCMessage; 10 | 11 | let iceCandidatesFromCaller = []; 12 | let peerConnection; 13 | let remoteStream; 14 | let localStream; 15 | 16 | let callInProgress = false; 17 | 18 | //event from html 19 | function call() { 20 | let userToCall = document.getElementById("callName").value; 21 | otherUser = userToCall; 22 | 23 | beReady() 24 | .then(bool => { 25 | processCall(userToCall) 26 | }) 27 | } 28 | 29 | //event from html 30 | function answer() { 31 | //do the event firing 32 | 33 | beReady() 34 | .then(bool => { 35 | processAccept(); 36 | }) 37 | 38 | document.getElementById("answer").style.display = "none"; 39 | } 40 | 41 | let pcConfig = { 42 | "iceServers": 43 | [ 44 | { "url": "stun:stun.jap.bloggernepal.com:5349" }, 45 | { 46 | "url": "turn:turn.jap.bloggernepal.com:5349", 47 | "username": "guest", 48 | "credential": "somepassword" 49 | }, 50 | {"url": "stun:stun.l.google.com:19302"} 51 | ] 52 | }; 53 | 54 | // Set up audio and video regardless of what devices are present. 55 | let sdpConstraints = { 56 | offerToReceiveAudio: true, 57 | offerToReceiveVideo: true 58 | }; 59 | 60 | ///////////////////////////////////////////// 61 | 62 | let socket; 63 | let callSocket; 64 | function connectSocket() { 65 | let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://"; 66 | console.log(ws_scheme); 67 | 68 | callSocket = new WebSocket( 69 | ws_scheme 70 | + window.location.host 71 | + '/ws/call/' 72 | ); 73 | 74 | callSocket.onopen = event =>{ 75 | //let's send myName to the socket 76 | callSocket.send(JSON.stringify({ 77 | type: 'login', 78 | data: { 79 | name: myName 80 | } 81 | })); 82 | } 83 | 84 | callSocket.onmessage = (e) =>{ 85 | let response = JSON.parse(e.data); 86 | 87 | // console.log(response); 88 | 89 | let type = response.type; 90 | 91 | if(type == 'connection') { 92 | console.log(response.data.message) 93 | } 94 | 95 | if(type == 'call_received') { 96 | // console.log(response); 97 | onNewCall(response.data) 98 | } 99 | 100 | if(type == 'call_answered') { 101 | onCallAnswered(response.data); 102 | } 103 | 104 | if(type == 'ICEcandidate') { 105 | onICECandidate(response.data); 106 | } 107 | } 108 | 109 | const onNewCall = (data) =>{ 110 | //when other called you 111 | //show answer button 112 | 113 | otherUser = data.caller; 114 | remoteRTCMessage = data.rtcMessage 115 | 116 | // document.getElementById("profileImageA").src = baseURL + callerProfile.image; 117 | document.getElementById("callerName").innerHTML = otherUser; 118 | document.getElementById("call").style.display = "none"; 119 | document.getElementById("answer").style.display = "block"; 120 | } 121 | 122 | const onCallAnswered = (data) =>{ 123 | //when other accept our call 124 | remoteRTCMessage = data.rtcMessage 125 | peerConnection.setRemoteDescription(new RTCSessionDescription(remoteRTCMessage)); 126 | 127 | document.getElementById("calling").style.display = "none"; 128 | 129 | console.log("Call Started. They Answered"); 130 | // console.log(pc); 131 | 132 | callProgress() 133 | } 134 | 135 | const onICECandidate = (data) =>{ 136 | // console.log(data); 137 | console.log("GOT ICE candidate"); 138 | 139 | let message = data.rtcMessage 140 | 141 | let candidate = new RTCIceCandidate({ 142 | sdpMLineIndex: message.label, 143 | candidate: message.candidate 144 | }); 145 | 146 | if (peerConnection) { 147 | console.log("ICE candidate Added"); 148 | peerConnection.addIceCandidate(candidate); 149 | } else { 150 | console.log("ICE candidate Pushed"); 151 | iceCandidatesFromCaller.push(candidate); 152 | } 153 | 154 | } 155 | 156 | } 157 | 158 | /** 159 | * 160 | * @param {Object} data 161 | * @param {number} data.name - the name of the user to call 162 | * @param {Object} data.rtcMessage - the rtc create offer object 163 | */ 164 | function sendCall(data) { 165 | //to send a call 166 | console.log("Send Call"); 167 | 168 | // socket.emit("call", data); 169 | callSocket.send(JSON.stringify({ 170 | type: 'call', 171 | data 172 | })); 173 | 174 | document.getElementById("call").style.display = "none"; 175 | // document.getElementById("profileImageCA").src = baseURL + otherUserProfile.image; 176 | document.getElementById("otherUserNameCA").innerHTML = otherUser; 177 | document.getElementById("calling").style.display = "block"; 178 | } 179 | 180 | 181 | 182 | /** 183 | * 184 | * @param {Object} data 185 | * @param {number} data.caller - the caller name 186 | * @param {Object} data.rtcMessage - answer rtc sessionDescription object 187 | */ 188 | function answerCall(data) { 189 | //to answer a call 190 | // socket.emit("answerCall", data); 191 | callSocket.send(JSON.stringify({ 192 | type: 'answer_call', 193 | data 194 | })); 195 | callProgress(); 196 | } 197 | 198 | /** 199 | * 200 | * @param {Object} data 201 | * @param {number} data.user - the other user //either callee or caller 202 | * @param {Object} data.rtcMessage - iceCandidate data 203 | */ 204 | function sendICEcandidate(data) { 205 | //send only if we have caller, else no need to 206 | console.log("Send ICE candidate"); 207 | // socket.emit("ICEcandidate", data) 208 | callSocket.send(JSON.stringify({ 209 | type: 'ICEcandidate', 210 | data 211 | })); 212 | 213 | } 214 | 215 | function beReady() { 216 | return navigator.mediaDevices.getUserMedia({ 217 | audio: true, 218 | video: true 219 | }) 220 | .then(stream => { 221 | localStream = stream; 222 | localVideo.srcObject = stream; 223 | 224 | return createConnectionAndAddStream() 225 | }) 226 | .catch(function (e) { 227 | alert('getUserMedia() error: ' + e.name); 228 | }); 229 | } 230 | 231 | function createConnectionAndAddStream() { 232 | createPeerConnection(); 233 | peerConnection.addStream(localStream); 234 | return true; 235 | } 236 | 237 | function processCall(userName) { 238 | peerConnection.createOffer((sessionDescription) => { 239 | peerConnection.setLocalDescription(sessionDescription); 240 | sendCall({ 241 | name: userName, 242 | rtcMessage: sessionDescription 243 | }) 244 | }, (error) => { 245 | console.log("Error"); 246 | }); 247 | } 248 | 249 | function processAccept() { 250 | 251 | peerConnection.setRemoteDescription(new RTCSessionDescription(remoteRTCMessage)); 252 | peerConnection.createAnswer((sessionDescription) => { 253 | peerConnection.setLocalDescription(sessionDescription); 254 | 255 | if (iceCandidatesFromCaller.length > 0) { 256 | //I am having issues with call not being processed in real world (internet, not local) 257 | //so I will push iceCandidates I received after the call arrived, push it and, once we accept 258 | //add it as ice candidate 259 | //if the offer rtc message contains all thes ICE candidates we can ingore this. 260 | for (let i = 0; i < iceCandidatesFromCaller.length; i++) { 261 | // 262 | let candidate = iceCandidatesFromCaller[i]; 263 | console.log("ICE candidate Added From queue"); 264 | try { 265 | peerConnection.addIceCandidate(candidate).then(done => { 266 | console.log(done); 267 | }).catch(error => { 268 | console.log(error); 269 | }) 270 | } catch (error) { 271 | console.log(error); 272 | } 273 | } 274 | iceCandidatesFromCaller = []; 275 | console.log("ICE candidate queue cleared"); 276 | } else { 277 | console.log("NO Ice candidate in queue"); 278 | } 279 | 280 | answerCall({ 281 | caller: otherUser, 282 | rtcMessage: sessionDescription 283 | }) 284 | 285 | }, (error) => { 286 | console.log("Error"); 287 | }) 288 | } 289 | 290 | ///////////////////////////////////////////////////////// 291 | 292 | function createPeerConnection() { 293 | try { 294 | peerConnection = new RTCPeerConnection(pcConfig); 295 | // peerConnection = new RTCPeerConnection(); 296 | peerConnection.onicecandidate = handleIceCandidate; 297 | peerConnection.onaddstream = handleRemoteStreamAdded; 298 | peerConnection.onremovestream = handleRemoteStreamRemoved; 299 | console.log('Created RTCPeerConnnection'); 300 | return; 301 | } catch (e) { 302 | console.log('Failed to create PeerConnection, exception: ' + e.message); 303 | alert('Cannot create RTCPeerConnection object.'); 304 | return; 305 | } 306 | } 307 | 308 | function handleIceCandidate(event) { 309 | // console.log('icecandidate event: ', event); 310 | if (event.candidate) { 311 | console.log("Local ICE candidate"); 312 | // console.log(event.candidate.candidate); 313 | 314 | sendICEcandidate({ 315 | user: otherUser, 316 | rtcMessage: { 317 | label: event.candidate.sdpMLineIndex, 318 | id: event.candidate.sdpMid, 319 | candidate: event.candidate.candidate 320 | } 321 | }) 322 | 323 | } else { 324 | console.log('End of candidates.'); 325 | } 326 | } 327 | 328 | function handleRemoteStreamAdded(event) { 329 | console.log('Remote stream added.'); 330 | remoteStream = event.stream; 331 | remoteVideo.srcObject = remoteStream; 332 | } 333 | 334 | function handleRemoteStreamRemoved(event) { 335 | console.log('Remote stream removed. Event: ', event); 336 | remoteVideo.srcObject = null; 337 | localVideo.srcObject = null; 338 | } 339 | 340 | window.onbeforeunload = function () { 341 | if (callInProgress) { 342 | stop(); 343 | } 344 | }; 345 | 346 | 347 | function stop() { 348 | localStream.getTracks().forEach(track => track.stop()); 349 | callInProgress = false; 350 | peerConnection.close(); 351 | peerConnection = null; 352 | document.getElementById("call").style.display = "block"; 353 | document.getElementById("answer").style.display = "none"; 354 | document.getElementById("inCall").style.display = "none"; 355 | document.getElementById("calling").style.display = "none"; 356 | document.getElementById("endVideoButton").style.display = "none" 357 | otherUser = null; 358 | } 359 | 360 | function callProgress() { 361 | 362 | document.getElementById("videos").style.display = "block"; 363 | document.getElementById("otherUserNameC").innerHTML = otherUser; 364 | document.getElementById("inCall").style.display = "block"; 365 | 366 | callInProgress = true; 367 | } 368 | --------------------------------------------------------------------------------