video.tpl 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <div id="chat-video-panel">
  2. <div class="alert alert-warning alert-dismissible fade in">
  3. <button type="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|get_lang }}">
  4. <span aria-hidden="true">&times;</span>
  5. </button>
  6. <h4>{{ 'Warning'|get_lang }}</h4>
  7. <p>
  8. <i class="fa fa-warning"></i> {{ 'AvoidChangingPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}
  9. </p>
  10. </div>
  11. <div class="row">
  12. <div class="col-md-4">
  13. <div class="thumbnail">
  14. <div id="chat-local-video"></div>
  15. <div class="caption">
  16. <p class="text-muted text-center">{{ user_local.complete_name }}</p>
  17. </div>
  18. </div>
  19. <div id="connection-status"></div>
  20. <div class="chat-friends">
  21. <div class="panel-group" id="blocklistFriends" role="tablist" aria-multiselectable="true">
  22. <div class="panel panel-default">
  23. <div class="panel-heading" role="tab" id="headingOne">
  24. <h4 class="panel-title">
  25. <a role="button" data-toggle="collapse" data-parent="#blocklistFriends" href="#listFriends" aria-expanded="true" aria-controls="listFriends">
  26. {{ "SocialFriend" | get_lang }}
  27. </a>
  28. </h4>
  29. </div>
  30. <div id="listFriends" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  31. <div class="panel-body">
  32. {{ block_friends }}
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="col-md-8">
  40. <div class="thumbnail video-chat-user">
  41. <div id="chat-remote-video"></div>
  42. <div class="caption">
  43. <p class="text-muted text-center">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <script>
  50. (function () {
  51. var VideoChat = {
  52. init: function () {
  53. var isCompatible = !!Modernizr.prefixed('RTCPeerConnection', window);
  54. var notifyNotSupport = function () {
  55. $.get('{{ _p.web_ajax }}chat.ajax.php', {
  56. action: 'notify_not_support',
  57. to:{{ chat_user.id }}
  58. });
  59. };
  60. var startVideoChat = function () {
  61. var webRTC = new SimpleWebRTC({
  62. localVideoEl: 'chat-local-video',
  63. remoteVideosEl: '',
  64. autoRequestMedia: true
  65. });
  66. webRTC.on('readyToCall', function () {
  67. webRTC.joinRoom('{{ room_name }}');
  68. });
  69. webRTC.on('videoAdded', function (video, peer) {
  70. $(video).addClass('skip');
  71. $('#chat-remote-video').html(video);
  72. if (peer && peer.pc) {
  73. peer.pc.on('iceConnectionStateChange', function () {
  74. var alertDiv = $('<div>')
  75. .addClass('alert');
  76. switch (peer.pc.iceConnectionState) {
  77. case 'checking':
  78. alertDiv
  79. .addClass('alert-info')
  80. .html('<i class="fa fa-spinner fa-spin"></i> ' + "{{ 'ConnectingToPeer'|get_lang }}");
  81. break;
  82. case 'connected':
  83. //no break
  84. case 'completed':
  85. alertDiv
  86. .addClass('alert-success')
  87. .html('<i class="fa fa-commenting"></i> ' + "{{ 'ConnectionEstablished'|get_lang }}");
  88. break;
  89. case 'disconnected':
  90. alertDiv
  91. .addClass('alert-info')
  92. .html('<i class="fa fa-frown-o"></i> ' + "{{ 'Disconnected'|get_lang }}");
  93. break;
  94. case 'failed':
  95. alertDiv
  96. .addClass('alert-danger')
  97. .html('<i class="fa fa-times"></i> ' + "{{ 'ConnectionFailed'|get_lang }}");
  98. break;
  99. case 'closed':
  100. alertDiv
  101. .addClass('alert-danger')
  102. .html('<i class="fa fa-close"></i> ' + "{{ 'ConnectionClosed'|get_lang }}");
  103. break;
  104. }
  105. $('#connection-status').html(alertDiv);
  106. });
  107. }
  108. });
  109. webRTC.on('videoRemoved', function (video, peer) {
  110. video.src = '';
  111. });
  112. webRTC.on('iceFailed', function (peer) {
  113. var alertDiv = $('<div>')
  114. .addClass('alert-danger')
  115. .html('<i class="fa fa-close"></i> ' + "{{ 'LocalConnectionFailed'|get_lang }}");
  116. $('#connection-status').html(alertDiv);
  117. });
  118. webRTC.on('connectivityError', function (peer) {
  119. var alertDiv = $('<div>')
  120. .addClass('alert-danger')
  121. .html('<i class="fa fa-close"></i> ' + "{{ 'RemoteConnectionFailed'|get_lang }}");
  122. $('#connection-status').html(alertDiv);
  123. });
  124. };
  125. if (!isCompatible) {
  126. notifyNotSupport();
  127. $('#chat-video-panel').remove();
  128. return;
  129. }
  130. $('#messages').remove();
  131. startVideoChat();
  132. window.onbeforeunload = function () {
  133. return "{{ 'AvoidChangingPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}";
  134. };
  135. }
  136. };
  137. $(document).on('ready', function () {
  138. VideoChat.init();
  139. });
  140. })();
  141. </script>