videoRecorder.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import { Tools } from "./tools.js";
  2. /**
  3. * This can help with recording videos from BabylonJS.
  4. * This is based on the available WebRTC functionalities of the browser.
  5. *
  6. * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToVideo
  7. */
  8. export class VideoRecorder {
  9. /**
  10. * Returns whether or not the VideoRecorder is available in your browser.
  11. * @param engine Defines the Babylon Engine.
  12. * @param canvas Defines the canvas to record. If not provided, the engine canvas will be used.
  13. * @returns true if supported otherwise false.
  14. */
  15. static IsSupported(engine, canvas) {
  16. const targetCanvas = canvas ?? engine.getRenderingCanvas();
  17. return !!targetCanvas && typeof targetCanvas.captureStream === "function";
  18. }
  19. /**
  20. * True when a recording is already in progress.
  21. */
  22. get isRecording() {
  23. return !!this._canvas && this._canvas.isRecording;
  24. }
  25. /**
  26. * Create a new VideoCapture object which can help converting what you see in Babylon to a video file.
  27. * @param engine Defines the BabylonJS Engine you wish to record.
  28. * @param options Defines options that can be used to customize the capture.
  29. */
  30. constructor(engine, options = {}) {
  31. if (!VideoRecorder.IsSupported(engine, options.canvas)) {
  32. // eslint-disable-next-line no-throw-literal
  33. throw "Your browser does not support recording so far.";
  34. }
  35. const canvas = options.canvas ?? engine.getRenderingCanvas();
  36. if (!canvas) {
  37. // eslint-disable-next-line no-throw-literal
  38. throw "The babylon engine must have a canvas to be recorded";
  39. }
  40. this._canvas = canvas;
  41. this._canvas.isRecording = false;
  42. this._options = {
  43. ...VideoRecorder._DefaultOptions,
  44. ...options,
  45. };
  46. const stream = this._canvas.captureStream(this._options.fps);
  47. if (this._options.audioTracks) {
  48. for (const track of this._options.audioTracks) {
  49. stream.addTrack(track);
  50. }
  51. }
  52. this._mediaRecorder = new MediaRecorder(stream, { mimeType: this._options.mimeType });
  53. this._mediaRecorder.ondataavailable = (evt) => this._handleDataAvailable(evt);
  54. this._mediaRecorder.onerror = (evt) => this._handleError(evt);
  55. this._mediaRecorder.onstop = () => this._handleStop();
  56. }
  57. /**
  58. * Stops the current recording before the default capture timeout passed in the startRecording function.
  59. */
  60. stopRecording() {
  61. if (!this._canvas || !this._mediaRecorder) {
  62. return;
  63. }
  64. if (!this.isRecording) {
  65. return;
  66. }
  67. this._canvas.isRecording = false;
  68. this._mediaRecorder.stop();
  69. }
  70. /**
  71. * Starts recording the canvas for a max duration specified in parameters.
  72. * @param fileName Defines the name of the file to be downloaded when the recording stop.
  73. * If null no automatic download will start and you can rely on the promise to get the data back.
  74. * @param maxDuration Defines the maximum recording time in seconds.
  75. * It defaults to 7 seconds. A value of zero will not stop automatically, you would need to call stopRecording manually.
  76. * @returns A promise callback at the end of the recording with the video data in Blob.
  77. */
  78. startRecording(fileName = "babylonjs.webm", maxDuration = 7) {
  79. if (!this._canvas || !this._mediaRecorder) {
  80. // eslint-disable-next-line no-throw-literal
  81. throw "Recorder has already been disposed";
  82. }
  83. if (this.isRecording) {
  84. // eslint-disable-next-line no-throw-literal
  85. throw "Recording already in progress";
  86. }
  87. if (maxDuration > 0) {
  88. setTimeout(() => {
  89. this.stopRecording();
  90. }, maxDuration * 1000);
  91. }
  92. this._fileName = fileName;
  93. this._recordedChunks = [];
  94. this._resolve = null;
  95. this._reject = null;
  96. this._canvas.isRecording = true;
  97. this._mediaRecorder.start(this._options.recordChunckSize);
  98. return new Promise((resolve, reject) => {
  99. this._resolve = resolve;
  100. this._reject = reject;
  101. });
  102. }
  103. /**
  104. * Releases internal resources used during the recording.
  105. */
  106. dispose() {
  107. this._canvas = null;
  108. this._mediaRecorder = null;
  109. this._recordedChunks = [];
  110. this._fileName = null;
  111. this._resolve = null;
  112. this._reject = null;
  113. }
  114. _handleDataAvailable(event) {
  115. if (event.data.size > 0) {
  116. this._recordedChunks.push(event.data);
  117. }
  118. }
  119. _handleError(event) {
  120. this.stopRecording();
  121. if (this._reject) {
  122. this._reject(event.error);
  123. }
  124. else {
  125. throw new event.error();
  126. }
  127. }
  128. _handleStop() {
  129. this.stopRecording();
  130. const superBuffer = new Blob(this._recordedChunks);
  131. if (this._resolve) {
  132. this._resolve(superBuffer);
  133. }
  134. window.URL.createObjectURL(superBuffer);
  135. if (this._fileName) {
  136. Tools.Download(superBuffer, this._fileName);
  137. }
  138. }
  139. }
  140. VideoRecorder._DefaultOptions = {
  141. mimeType: "video/webm",
  142. fps: 25,
  143. recordChunckSize: 3000,
  144. };
  145. //# sourceMappingURL=videoRecorder.js.map