From 1c9bfc4eb9581021f438dd7f2ff78f33f2883f5c Mon Sep 17 00:00:00 2001 From: Angel Fernando Quiroz Campos Date: Tue, 5 May 2015 14:11:02 -0500 Subject: [PATCH] Integrate WebRTC in chat - refs #7558 --- main/css/base.css | 10 +- main/inc/ajax/chat.ajax.php | 51 +++++++++ main/inc/lib/VideoChat.php | 101 ++++++++++++++++++ main/inc/lib/database.constants.inc.php | 1 + main/inc/lib/javascript/chat/css/chat.css | 2 +- main/inc/lib/javascript/chat/js/chat.js | 33 ++++++ main/inc/lib/javascript/chat/video.php | 42 ++++++++ main/template/default/chat/video.tpl | 28 +++++ .../default/javascript/chat/start_video.tpl | 20 ++++ 9 files changed, 286 insertions(+), 2 deletions(-) create mode 100644 main/inc/lib/VideoChat.php create mode 100644 main/inc/lib/javascript/chat/video.php create mode 100644 main/template/default/chat/video.tpl create mode 100644 main/template/default/javascript/chat/start_video.tpl diff --git a/main/css/base.css b/main/css/base.css index 3d56ed0bc7..757dabcf24 100755 --- a/main/css/base.css +++ b/main/css/base.css @@ -5953,4 +5953,12 @@ ul.exercise-draggable-answer li { ._jsPlumb_endpoint { z-index: 50; -} \ No newline at end of file +} + +/*** Video chat ***/ +video#chat-local-video, +div#chat-remote-video video { + display: block; + height: auto; + width: 100%; +} diff --git a/main/inc/ajax/chat.ajax.php b/main/inc/ajax/chat.ajax.php index 8f8481f946..00106dd61b 100755 --- a/main/inc/ajax/chat.ajax.php +++ b/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 ''; } diff --git a/main/inc/lib/VideoChat.php b/main/inc/lib/VideoChat.php new file mode 100644 index 0000000000..7d216040e3 --- /dev/null +++ b/main/inc/lib/VideoChat.php @@ -0,0 +1,101 @@ + + */ +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' + ); + } + +} diff --git a/main/inc/lib/database.constants.inc.php b/main/inc/lib/database.constants.inc.php index 60acd4213d..86c297980b 100755 --- a/main/inc/lib/database.constants.inc.php +++ b/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 diff --git a/main/inc/lib/javascript/chat/css/chat.css b/main/inc/lib/javascript/chat/css/chat.css index 8082a35a89..bc6eb10930 100755 --- a/main/inc/lib/javascript/chat/css/chat.css +++ b/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; diff --git a/main/inc/lib/javascript/chat/js/chat.js b/main/inc/lib/javascript/chat/js/chat.js index 22bccb8aad..ea1c26c962 100755 --- a/main/inc/lib/javascript/chat/js/chat.js +++ b/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); + $('') + .addClass('btn btn-xs') + .attr({ + href: '#' + }) + .html('') + .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); + $('') .addClass('btn btn-xs togglelink') .attr({ diff --git a/main/inc/lib/javascript/chat/video.php b/main/inc/lib/javascript/chat/video.php new file mode 100644 index 0000000000..2457aec4e3 --- /dev/null +++ b/main/inc/lib/javascript/chat/video.php @@ -0,0 +1,42 @@ +' . "\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(); diff --git a/main/template/default/chat/video.tpl b/main/template/default/chat/video.tpl new file mode 100644 index 0000000000..eb4b35cf1f --- /dev/null +++ b/main/template/default/chat/video.tpl @@ -0,0 +1,28 @@ +

{{ "Chat with %s"|get_lang|format(chat_user.complete_name) }}

+
+
+
+ +
+
+
+
+
+
+ + diff --git a/main/template/default/javascript/chat/start_video.tpl b/main/template/default/javascript/chat/start_video.tpl new file mode 100644 index 0000000000..d8d5b203e3 --- /dev/null +++ b/main/template/default/javascript/chat/start_video.tpl @@ -0,0 +1,20 @@ +{{ form }} + +