chamilo-lms2/main/template/default/chat/video.tpl

<div id="chat-video-panel">
    <div class="alert alert-warning alert-dismissible fade in">
        <button type="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|get_lang }}">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4>{{ 'Warning'|get_lang }}</h4>
        <div id="dlg-webrtc-help">
            <p>{{ 'WebRTCDialogHelp'|get_lang }}</p>
            <img src="{{ _p.web_lib ~ 'javascript/chat/img/webrtc_' ~ (navigator_is_firefox ? 'firefox' : 'chrome') }}.png"
                 alt="{{ 'Permissions'|get_lang }}" class="img-thumbnail img-responsive">
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-sm-7">
            <div class="thumbnail video-chat-user">
                <div id="chat-remote-video"></div>
                <div class="caption">
                    <p class="text-muted text-center">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-5">
            <div class="thumbnail">
                <div id="chat-local-video"></div>
                <div class="caption">
                    <p class="text-muted text-center">{{ user_local.complete_name }}</p>
                </div>
            </div>
            <div id="connection-status"></div>
            <div class="chat-friends">
                <div class="panel-group" id="blocklistFriends" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#blocklistFriends" href="#listFriends" aria-expanded="true" aria-controls="listFriends">
                                    {{ "SocialFriend" | get_lang }}
                                </a>
                            </h4>
                        </div>
                        <div id="listFriends" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                            {{ block_friends }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    (function () {
        var VideoChat = {
            init: function () {
                var isCompatible = !!Modernizr.prefixed('RTCPeerConnection', window);

                var notifyNotSupport = function () {
                    $.get('{{ _p.web_ajax }}chat.ajax.php', {
                        action: 'notify_not_support',
                        to:{{ chat_user.id }}
                    });
                };

                var startVideoChat = function () {
                    var webRTC = new SimpleWebRTC({
                        localVideoEl: 'chat-local-video',
                        remoteVideosEl: '',
                        autoRequestMedia: true
                    });

                    webRTC.on('readyToCall', function () {
                        $('#dlg-webrtc-help').replaceWith("<p>" +
                            "<em class=\"fa fa-warning\"></em> {{ 'AvoidChangingPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}" +
                            "</p>");

                        webRTC.joinRoom('{{ room_name }}');
                    });
                    webRTC.on('videoAdded', function (video, peer) {
                        $(video).addClass('skip');
                        $('#chat-remote-video').html(video);

                        if (peer && peer.pc) {
                            peer.pc.on('iceConnectionStateChange', function () {
                                var alertDiv = $('<div>')
                                        .addClass('alert');

                                switch (peer.pc.iceConnectionState) {
                                    case 'checking':
                                        alertDiv
                                            .addClass('alert-info')
                                            .html('<em class="fa fa-spinner fa-spin"></em> ' + "{{ 'ConnectingToPeer'|get_lang }}");
                                        break;
                                    case 'connected':
                                        //no break
                                    case 'completed':
                                        alertDiv
                                            .addClass('alert-success')
                                            .html('<em class="fa fa-commenting"></em> ' + "{{ 'ConnectionEstablished'|get_lang }}");
                                        break;
                                    case 'disconnected':
                                        alertDiv
                                            .addClass('alert-info')
                                            .html('<em class="fa fa-frown-o"></em> ' + "{{ 'Disconnected'|get_lang }}");
                                        break;
                                    case 'failed':
                                        alertDiv
                                            .addClass('alert-danger')
                                            .html('<em class="fa fa-times"></em> ' + "{{ 'ConnectionFailed'|get_lang }}");
                                        break;
                                    case 'closed':
                                        alertDiv
                                            .addClass('alert-danger')
                                            .html('<em class="fa fa-close"></em> ' + "{{ 'ConnectionClosed'|get_lang }}");
                                        break;
                                }

                                $('#connection-status').html(alertDiv);
                            });
                        }
                    });
                    webRTC.on('videoRemoved', function (video, peer) {
                        video.src = '';
                    });
                    webRTC.on('iceFailed', function (peer) {
                        var alertDiv = $('<div>')
                            .addClass('alert-danger')
                            .html('<em class="fa fa-close"></em> ' + "{{ 'LocalConnectionFailed'|get_lang }}");

                        $('#connection-status').html(alertDiv);
                    });
                    webRTC.on('connectivityError', function (peer) {
                        var alertDiv = $('<div>')
                            .addClass('alert-danger')
                            .html('<em class="fa fa-close"></em> ' + "{{ 'RemoteConnectionFailed'|get_lang }}");

                        $('#connection-status').html(alertDiv);
                    });
                };

                if (!isCompatible) {
                    notifyNotSupport();

                    $('#chat-video-panel').remove();
                    return;
                }

                $('#messages').remove();

                startVideoChat();

                window.onbeforeunload = function () {
                    return "{{ 'AvoidChangingPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}";
                };
            }
        };

        $(document).on('ready', function () {
            VideoChat.init();
        });
    })();
</script>