Integrate WebRTC in chat - refs #7558

1.10.x
Angel Fernando Quiroz Campos 11 years ago
parent 7fb57d4245
commit 1c9bfc4eb9
  1. 10
      main/css/base.css
  2. 51
      main/inc/ajax/chat.ajax.php
  3. 101
      main/inc/lib/VideoChat.php
  4. 1
      main/inc/lib/database.constants.inc.php
  5. 2
      main/inc/lib/javascript/chat/css/chat.css
  6. 33
      main/inc/lib/javascript/chat/js/chat.js
  7. 42
      main/inc/lib/javascript/chat/video.php
  8. 28
      main/template/default/chat/video.tpl
  9. 20
      main/template/default/javascript/chat/start_video.tpl

@ -5953,4 +5953,12 @@ 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%;
}

@ -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 '';
}

@ -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'
);
}
}

@ -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

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

@ -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({

@ -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();

@ -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>

@ -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>
Loading…
Cancel
Save