Check WebRTC support - refs #7558

main/inc/ajax/chat.ajax.php

@@ -135,6 +135,9 @@ switch ($action) {
 
         echo Display::tag('p', $videoChatLink, ['class' => 'lead']);
         break;
+    case 'notify_not_support':
+        $chat->send(api_get_user_id(), $to_user_id, get_lang('TheXUserBrowserDoesNotSupportWebRTC'));
+        break;
     default:
         echo '';
 }

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

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

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

@@ -39,4 +39,5 @@ $content = $template->fetch('default/chat/video.tpl');
 
 $template->assign('header', $room['room_name']);
 $template->assign('content', $content);
+$template->assign('message', Display::return_message(get_lang('BroswerDoesNotSupportWebRTC'), 'warning'));
 $template->display_one_col_template();

main/template/default/chat/video.tpl

@@ -1,5 +1,5 @@
 <p class="lead">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
-<div class="row">
+<div class="row" id="chat-video-panel">
     <div class="col-sm-3">
         <div class="thumbnail">
             <video id="chat-local-video" class="skip"></video>
@@ -12,17 +12,47 @@
 
 <script>
     (function() {
-        var webRTC = new SimpleWebRTC({
+        var VideoChat = {
-            localVideoEl: 'chat-local-video',
+            init: function() {
-            remoteVideosEl: 'chat-remote-video',
+                var isCompatible = !!Modernizr.prefixed('RTCPeerConnection', window);
-            autoRequestMedia: true
-        });
 
-        webRTC.on('readyToCall', function() {
+                var notifyNotSupport = function() {
-            webRTC.joinRoom('{{ room_name }}');
+                    $.get('{{ _p.web_ajax }}chat.ajax.php', {
-        });
+                        action: 'notify_not_support',
-        webRTC.on('videoAdded', function (video, peer) {
+                        to: {{ chat_user.id }}
-            $(video).addClass('skip');
+                    });
+                };
+
+                var startVideoChat = 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');
+                    });
+                };
+
+                if (!isCompatible) {
+                    notifyNotSupport();
+
+                    $('#chat-video-panel').remove();
+                    return;
+                }
+
+                $('#messages').remove();
+
+                startVideoChat();
+            }
+        };
+
+        $(document).on('ready', function() {
+            VideoChat.init();
         });
     })();
 </script>