You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AudioLevels.js 7.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. /* global APP, interfaceConfig, $ */
  2. /* jshint -W101 */
  3. import CanvasUtil from './CanvasUtils';
  4. import FilmStrip from '../videolayout/FilmStrip';
  5. const LOCAL_LEVEL = 'local';
  6. let ASDrawContext = null;
  7. let audioLevelCanvasCache = {};
  8. let dominantSpeakerAudioElement = null;
  9. function initDominantSpeakerAudioLevels(dominantSpeakerAvatarSize) {
  10. let ASRadius = dominantSpeakerAvatarSize / 2;
  11. let ASCenter = (dominantSpeakerAvatarSize + ASRadius) / 2;
  12. // Draw a circle.
  13. ASDrawContext.beginPath();
  14. ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
  15. ASDrawContext.closePath();
  16. // Add a shadow around the circle
  17. ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
  18. ASDrawContext.shadowOffsetX = 0;
  19. ASDrawContext.shadowOffsetY = 0;
  20. }
  21. /**
  22. * Resizes the given audio level canvas to match the given thumbnail size.
  23. */
  24. function resizeAudioLevelCanvas(audioLevelCanvas, thumbnailWidth, thumbnailHeight) {
  25. audioLevelCanvas.width = thumbnailWidth + interfaceConfig.CANVAS_EXTRA;
  26. audioLevelCanvas.height = thumbnailHeight + interfaceConfig.CANVAS_EXTRA;
  27. }
  28. /**
  29. * Draws the audio level canvas into the cached canvas object.
  30. *
  31. * @param id of the user for whom we draw the audio level
  32. * @param audioLevel the newAudio level to render
  33. */
  34. function drawAudioLevelCanvas(id, audioLevel) {
  35. if (!audioLevelCanvasCache[id]) {
  36. let videoSpanId = getVideoSpanId(id);
  37. let audioLevelCanvasOrig = $(`#${videoSpanId}>canvas`).get(0);
  38. /*
  39. * FIXME Testing has shown that audioLevelCanvasOrig may not exist.
  40. * In such a case, the method CanvasUtil.cloneCanvas may throw an
  41. * error. Since audio levels are frequently updated, the errors have
  42. * been observed to pile into the console, strain the CPU.
  43. */
  44. if (audioLevelCanvasOrig) {
  45. audioLevelCanvasCache[id]
  46. = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
  47. }
  48. }
  49. let canvas = audioLevelCanvasCache[id];
  50. if (!canvas) {
  51. return;
  52. }
  53. let drawContext = canvas.getContext('2d');
  54. drawContext.clearRect(0, 0, canvas.width, canvas.height);
  55. let shadowLevel = getShadowLevel(audioLevel);
  56. if (shadowLevel > 0) {
  57. // drawContext, x, y, w, h, r, shadowColor, shadowLevel
  58. CanvasUtil.drawRoundRectGlow(
  59. drawContext,
  60. interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
  61. canvas.width - interfaceConfig.CANVAS_EXTRA,
  62. canvas.height - interfaceConfig.CANVAS_EXTRA,
  63. interfaceConfig.CANVAS_RADIUS,
  64. interfaceConfig.SHADOW_COLOR,
  65. shadowLevel);
  66. }
  67. }
  68. /**
  69. * Returns the shadow/glow level for the given audio level.
  70. *
  71. * @param audioLevel the audio level from which we determine the shadow
  72. * level
  73. */
  74. function getShadowLevel (audioLevel) {
  75. let shadowLevel = 0;
  76. if (audioLevel <= 0.3) {
  77. shadowLevel = Math.round(
  78. interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
  79. } else if (audioLevel <= 0.6) {
  80. shadowLevel = Math.round(
  81. interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
  82. } else {
  83. shadowLevel = Math.round(
  84. interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
  85. }
  86. return shadowLevel;
  87. }
  88. /**
  89. * Returns the video span id corresponding to the given user id
  90. */
  91. function getVideoSpanId(id) {
  92. let videoSpanId = null;
  93. if (id === LOCAL_LEVEL || APP.conference.isLocalId(id)) {
  94. videoSpanId = 'localVideoContainer';
  95. } else {
  96. videoSpanId = `participant_${id}`;
  97. }
  98. return videoSpanId;
  99. }
  100. /**
  101. * The audio Levels plugin.
  102. */
  103. const AudioLevels = {
  104. init () {
  105. dominantSpeakerAudioElement = $('#dominantSpeakerAudioLevel')[0];
  106. ASDrawContext = dominantSpeakerAudioElement.getContext('2d');
  107. let parentContainer = $("#dominantSpeaker");
  108. let dominantSpeakerWidth = parentContainer.width();
  109. let dominantSpeakerHeight = parentContainer.height();
  110. dominantSpeakerAudioElement.width = dominantSpeakerWidth;
  111. dominantSpeakerAudioElement.height = dominantSpeakerHeight;
  112. let dominantSpeakerAvatar = $("#dominantSpeakerAvatar");
  113. initDominantSpeakerAudioLevels(dominantSpeakerAvatar.width());
  114. },
  115. /**
  116. * Updates the audio level canvas for the given id. If the canvas
  117. * didn't exist we create it.
  118. */
  119. updateAudioLevelCanvas (id, thumbWidth, thumbHeight) {
  120. let videoSpanId = 'localVideoContainer';
  121. if (id) {
  122. videoSpanId = `participant_${id}`;
  123. }
  124. let videoSpan = document.getElementById(videoSpanId);
  125. if (!videoSpan) {
  126. if (id) {
  127. console.error("No video element for id", id);
  128. } else {
  129. console.error("No video element for local video.");
  130. }
  131. return;
  132. }
  133. let audioLevelCanvas = $(`#${videoSpanId}>canvas`);
  134. if (!audioLevelCanvas || audioLevelCanvas.length === 0) {
  135. audioLevelCanvas = document.createElement('canvas');
  136. audioLevelCanvas.className = "audiolevel";
  137. audioLevelCanvas.style.bottom
  138. = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
  139. audioLevelCanvas.style.left
  140. = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
  141. resizeAudioLevelCanvas(audioLevelCanvas, thumbWidth, thumbHeight);
  142. videoSpan.appendChild(audioLevelCanvas);
  143. } else {
  144. audioLevelCanvas = audioLevelCanvas.get(0);
  145. resizeAudioLevelCanvas(audioLevelCanvas, thumbWidth, thumbHeight);
  146. }
  147. },
  148. /**
  149. * Updates the audio level UI for the given id.
  150. *
  151. * @param id id of the user for whom we draw the audio level
  152. * @param audioLevel the newAudio level to render
  153. */
  154. updateAudioLevel (id, audioLevel, largeVideoId) {
  155. drawAudioLevelCanvas(id, audioLevel);
  156. let videoSpanId = getVideoSpanId(id);
  157. let audioLevelCanvas = $(`#${videoSpanId}>canvas`).get(0);
  158. if (!audioLevelCanvas) {
  159. return;
  160. }
  161. let drawContext = audioLevelCanvas.getContext('2d');
  162. let canvasCache = audioLevelCanvasCache[id];
  163. drawContext.clearRect(
  164. 0, 0, audioLevelCanvas.width, audioLevelCanvas.height
  165. );
  166. drawContext.drawImage(canvasCache, 0, 0);
  167. if (id === LOCAL_LEVEL) {
  168. id = APP.conference.localId;
  169. if (!id) {
  170. return;
  171. }
  172. }
  173. if(id === largeVideoId) {
  174. window.requestAnimationFrame(function () {
  175. AudioLevels.updateDominantSpeakerAudioLevel(audioLevel);
  176. });
  177. }
  178. },
  179. updateDominantSpeakerAudioLevel (audioLevel) {
  180. if($("#dominantSpeaker").css("visibility") == "hidden"
  181. || ASDrawContext === null) {
  182. return;
  183. }
  184. ASDrawContext.clearRect(0, 0,
  185. dominantSpeakerAudioElement.width,
  186. dominantSpeakerAudioElement.height);
  187. if (!audioLevel) {
  188. return;
  189. }
  190. ASDrawContext.shadowBlur = getShadowLevel(audioLevel);
  191. // Fill the shape.
  192. ASDrawContext.fill();
  193. },
  194. updateCanvasSize (thumbWidth, thumbHeight) {
  195. let canvasWidth = thumbWidth + interfaceConfig.CANVAS_EXTRA;
  196. let canvasHeight = thumbHeight + interfaceConfig.CANVAS_EXTRA;
  197. FilmStrip.getThumbs().children('canvas').each(function () {
  198. $(this).attr('width', canvasWidth);
  199. $(this).attr('height', canvasHeight);
  200. });
  201. Object.keys(audioLevelCanvasCache).forEach(function (id) {
  202. audioLevelCanvasCache[id].width = canvasWidth;
  203. audioLevelCanvasCache[id].height = canvasHeight;
  204. });
  205. }
  206. };
  207. export default AudioLevels;