Integrate WebRTC in chat - refs #7558

main/css/base.css

@@ -5954,3 +5954,11 @@ ul.exercise-draggable-answer li {
 ._jsPlumb_endpoint {
     z-index: 50;
 }
+
+/*** Video chat ***/
+video#chat-local-video,
+div#chat-remote-video video {
+    display: block;
+    height: auto;
+    width: 100%;
+}

main/inc/ajax/chat.ajax.php

@@ -69,6 +69,57 @@ switch ($action) {
         $status = isset($_REQUEST['status']) ? intval($_REQUEST['status']) : 0;
         $chat->setUserStatus($status);
         break;
+    case 'start_video':
+        $room = VideoChat::getChatRoomByUsers(api_get_user_id(), $to_user_id);
+
+        if ($room !== false) {
+            echo Display::url(
+                get_lang('StartVideoChat'),
+                api_get_path(WEB_LIBRARY_JS_PATH) . "chat/video.php?room={$room['room_name']}"
+            );
+
+            break;
+        }
+
+        $form = new FormValidator('start_video_chat');
+        $form->addText('chat_room_name', get_lang('ChatRoomName'), false);
+        $form->addHidden('to', $to_user_id);
+        $form->addButtonSend(get_lang('Create'));
+
+        $template = new Template();
+        $template->assign('form', $form->returnForm());
+
+        echo $template->fetch('default/javascript/chat/start_video.tpl');
+        break;
+    case 'create_room':
+        $room = VideoChat::getChatRoomByUsers(api_get_user_id(), $to_user_id);
+        $createdRoom = false;
+
+        if ($room === false) {
+            $roomName = isset($_REQUEST['room_name']) ? Security::remove_XSS($_REQUEST['room_name']) : null;
+
+            if (VideoChat::nameExists($roomName)) {
+                echo Display::return_message(get_lang('TheVideoChatRoomNameAlreadyExists'), 'error');
+
+                break;
+            }
+
+            $createdRoom = VideoChat::createRoom($roomName, api_get_user_id(), $to_user_id);
+        } else {
+            $roomName = $room['room_name'];
+            $createdRoom = true;
+        }
+
+        if ($createdRoom === false) {
+            echo Display::return_message(get_lang('ChatRoomNotCreated'), 'error');
+            break;
+        }
+
+        echo Display::url(
+            get_lang('StartVideoChat'),
+            api_get_path(WEB_LIBRARY_JS_PATH) . "chat/video.php?room=$roomName"
+        );
+        break;
     default:
         echo '';
 }

main/inc/lib/VideoChat.php

@@ -0,0 +1,101 @@
+<?php
+/* For licensing terms, see /license.txt */
+/**
+ * VideoChat class
+ * 
+ * This class provides methods for video chat management.
+ *
+ * @author Angel Fernando Quiroz Campos <angel.quiroz@beeznest.com>
+ */
+class VideoChat
+{
+
+    /**
+     * Get the video chat info by its users
+     * @param int $user1 User id
+     * @param int $user2 Other user id
+     * @return array The video chat info. Otherwise return false
+     */
+    public static function getChatRoomByUsers($user1, $user2)
+    {
+        $user1 = intval($user1);
+        $user2 = intval($user2);
+
+        if (empty($user1) || empty($user2)) {
+            return false;
+        }
+
+        return Database::select(
+            '*',
+            Database::get_main_table(TABLE_MAIN_VIDEO_CHAT),
+            [
+                'where' => [
+                    '(from_user = ? AND to_user = ?)' => [$user1, $user2],
+                    'OR (from_user = ? AND to_user = ?)' => [$user2, $user1]
+                ]
+            ],
+            'first'
+        );
+    }
+
+    /**
+     * Create a video chat
+     * @param string $name The video chat name
+     * @param int $fromUser The sender user
+     * @param int $toUser The receiver user
+     * @return int The created video chat id. Otherwise return false
+     */
+    public static function createRoom($name, $fromUser, $toUser)
+    {
+        return Database::insert(
+            Database::get_main_table(TABLE_MAIN_VIDEO_CHAT),
+            [
+                'from_user' => intval($fromUser),
+                'to_user' => intval($toUser),
+                'room_name' => $name,
+                'datetime' => api_get_utc_datetime()
+            ]
+        );
+    }
+
+    /**
+     * Check if the video chat exists by its room name
+     * @param string $name The video chat name
+     * @return boolean
+     */
+    public static function nameExists($name)
+    {
+        $resultData = Database::select(
+            'COUNT(1) AS count',
+            Database::get_main_table(TABLE_MAIN_VIDEO_CHAT),
+            [
+                'where' => ['room_name = ?' => $name]
+            ],
+            'first'
+        );
+
+        if ($resultData !== false) {
+            return $resultData['count'] > 0;
+        }
+
+        return false;
+    }
+
+    /**
+     * Get the video chat info by its room name
+     * @param string $name The video chat name
+     * @return array The video chat info. Otherwise return false
+     */
+    public static function getChatRoomByName($name)
+    {
+        return Database::select(
+            '*',
+            Database::get_main_table(TABLE_MAIN_VIDEO_CHAT),
+            [
+                'where' => ['room_name = ?' => $name]
+            ],
+            'first'
+        );
+    }
+
+}

main/inc/lib/database.constants.inc.php

@@ -327,6 +327,7 @@ define('TABLE_MAIN_SKILL_PROFILE',          'skill_profile');
 define('TABLE_MAIN_SKILL_REL_PROFILE',      'skill_rel_profile');
 
 define('TABLE_MAIN_CHAT',					'chat');
+define('TABLE_MAIN_VIDEO_CHAT', 'video_chat');
 define('TABLE_TIMELINE',                    'timeline');
 
 // Gradebook model

main/inc/lib/javascript/chat/css/chat.css

@@ -51,7 +51,7 @@
 	font-weight: bold;
 	float: left;
 	font-size: 13px;
-	width: 153px;
+	width: 130px;
 	cursor:pointer;
         overflow: hidden;
         padding-left: 2px;

main/inc/lib/javascript/chat/js/chat.js

@@ -97,6 +97,8 @@ $(document).ready(function() {
 		var chat_id =  $(this).attr('rel');
 		closeChatBox(chat_id);
 	});
+
+        Modernizr.addTest('peerconnection', !!Modernizr.prefixed('RTCPeerConnection', window));
 });
 
 
@@ -372,6 +374,37 @@ function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
             .addClass('chatboxoptions')
             .appendTo(chatboxHead);
 
+        $('<a>')
+            .addClass('btn btn-xs')
+            .attr({
+                href: '#'
+            })
+            .html('<i class="fa fa-video-camera"></i>')
+            .on('click', function(e) {
+                e.preventDefault();
+
+                if (!Modernizr.peerconnection) {
+                    return;
+                }
+
+                var createForm = $.get(
+                    ajax_url,
+                    {
+                        action: 'start_video',
+                        to: user_id
+                    }
+                );
+
+                $.when(createForm).done(function(response) {
+                    $('#global-modal')
+                        .find('.modal-body')
+                        .html(response);
+
+                    $('#global-modal').modal('show');
+                });
+            })
+            .appendTo(chatboxoptions);
+
         $('<a>')
             .addClass('btn btn-xs togglelink')
             .attr({

main/inc/lib/javascript/chat/video.php

@@ -0,0 +1,42 @@
+<?php
+/* For licensing terms, see /license.txt */
+require_once '../../../global.inc.php';
+
+if (api_is_anonymous()) {
+    api_not_allowed(true);
+}
+
+$roomName = isset($_GET['room']) ? $_GET['room'] : null;
+
+$room = VideoChat::getChatRoomByName($roomName);
+
+if ($room === false) {
+    Header::location(api_get_path(WEB_PATH));
+}
+
+$isSender = $room['from_user'] == api_get_user_id();
+$isReceiver = $room['to_user'] == api_get_user_id();
+
+if (!$isSender && !$isReceiver) {
+    Header::location(api_get_path(WEB_PATH));
+}
+
+if ($isSender) {
+    $chatUser = api_get_user_info($room['to_user']);
+} elseif ($isReceiver) {
+    $chatUser = api_get_user_info($room['from_user']);
+}
+
+$htmlHeadXtra[] = '<script type="text/javascript" src="'
+    . api_get_path(WEB_PATH) . 'web/assets/simplewebrtc/latest.js'
+    . '"></script>' . "\n";
+
+$template = new Template();
+$template->assign('room_name', $room['room_name']);
+$template->assign('chat_user', $chatUser);
+
+$content = $template->fetch('default/chat/video.tpl');
+
+$template->assign('header', $room['room_name']);
+$template->assign('content', $content);
+$template->display_one_col_template();

main/template/default/chat/video.tpl

@@ -0,0 +1,28 @@
+<p class="lead">{{ "Chat with %s"|get_lang|format(chat_user.complete_name) }}</p>
+<div class="row">
+    <div class="col-sm-3">
+        <div class="thumbnail">
+            <video id="chat-local-video" class="skip"></video>
+        </div>
+    </div>
+    <div class="col-sm-9">
+        <div class="thumbnail" id="chat-remote-video"></div>
+    </div>
+</div>
+
+<script>
+    (function() {
+        var webRTC = new SimpleWebRTC({
+            localVideoEl: 'chat-local-video',
+            remoteVideosEl: 'chat-remote-video',
+            autoRequestMedia: true
+        });
+
+        webRTC.on('readyToCall', function() {
+            webRTC.joinRoom('{{ room_name }}');
+        });
+        webRTC.on('videoAdded', function (video, peer) {
+            $(video).addClass('skip');
+        });
+    })();
+</script>

main/template/default/javascript/chat/start_video.tpl

@@ -0,0 +1,20 @@
+{{ form }}
+
+<script>
+    $('form[name="start_video_chat"]').on('submit', function(e) {
+        e.preventDefault();
+
+        var createChatRoom = $.post(
+            '{{ _p.web_ajax }}chat.ajax.php',
+            {
+                room_name: $(this).find('input[name="chat_room_name"]').val(),
+                to: $(this).find('input[name="to"]').val(),
+                action: 'create_room'
+            }
+        );
+
+        $.when(createChatRoom).done(function(response) {
+            $('#global-modal').find('.modal-body').html(response);
+        });
+    });
+</script>