-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #54 from MetaCell/feature/93-screenshot
refactor screenshot code
- Loading branch information
Showing
8 changed files
with
311 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
applications/visualizer/frontend/src/components/viewers/ThreeD/Recorder.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { formatDate } from "../../../helpers/utils.ts"; | ||
| import { GlobalError } from "../../../models/Error.ts"; | ||
| export class Recorder { | ||
| private mediaRecorder: MediaRecorder | null = null; | ||
| private recordedBlobs: Blob[] = []; | ||
| private stream: MediaStream; | ||
| private ctx: WebGLRenderingContext; | ||
| // @ts-ignore | ||
| private options: { mediaRecorderOptions?: MediaRecorderOptions; blobOptions?: BlobPropertyBag } = { | ||
| mediaRecorderOptions: { mimeType: "video/webm" }, | ||
| blobOptions: { type: "video/webm" }, | ||
| }; | ||
| private blobOptions: BlobPropertyBag = { type: "video/webm" }; | ||
|
|
||
| constructor(canvas: HTMLCanvasElement, recorderOptions: { mediaRecorderOptions?: MediaRecorderOptions; blobOptions?: BlobPropertyBag }) { | ||
| this.stream = canvas.captureStream(); | ||
| const { mediaRecorderOptions, blobOptions } = recorderOptions; | ||
| this.setupMediaRecorder(mediaRecorderOptions); | ||
| this.recordedBlobs = []; | ||
| this.blobOptions = blobOptions; | ||
| this.ctx = canvas.getContext("webgl"); | ||
| } | ||
|
|
||
| handleDataAvailable(event) { | ||
| if (event.data && event.data.size > 0) { | ||
| this.recordedBlobs.push(event.data); | ||
| } | ||
| } | ||
|
|
||
| setupMediaRecorder(options) { | ||
| let error = ""; | ||
|
|
||
| if (options == null) { | ||
| options = { mimeType: "video/webm" }; | ||
| } | ||
| let mediaRecorder; | ||
| try { | ||
| mediaRecorder = new MediaRecorder(this.stream, options); | ||
| } catch (e0) { | ||
| error = `Unable to create MediaRecorder with options Object: ${e0}`; | ||
| try { | ||
| options = { mimeType: "video/webm,codecs=vp9" }; | ||
| mediaRecorder = new MediaRecorder(this.stream, options); | ||
| } catch (e1) { | ||
| error = `Unable to create MediaRecorder with options Object: ${e1}`; | ||
| try { | ||
| options = { mimeType: "video/webm,codecs=vp8" }; // Chrome 47 | ||
| mediaRecorder = new MediaRecorder(this.stream, options); | ||
| } catch (e2) { | ||
| error = | ||
| "MediaRecorder is not supported by this browser.\n\n" + | ||
| "Try Firefox 29 or later, or Chrome 47 or later, " + | ||
| "with Enable experimental Web Platform features enabled from chrome://flags." + | ||
| `Exception while creating MediaRecorder: ${e2}`; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (!mediaRecorder) { | ||
| throw new GlobalError(error); | ||
| } | ||
|
|
||
| mediaRecorder.ondataavailable = (evt) => this.handleDataAvailable(evt); | ||
| mediaRecorder.onstart = () => this.animationLoop(); | ||
|
|
||
| this.mediaRecorder = mediaRecorder; | ||
| this.options = options; | ||
| if (!this.blobOptions) { | ||
| const { mimeType } = options; | ||
| this.blobOptions = { type: mimeType }; | ||
| } | ||
| } | ||
|
|
||
| startRecording() { | ||
| this.recordedBlobs = []; | ||
| this.mediaRecorder.start(100); | ||
| } | ||
|
|
||
| stopRecording(options) { | ||
| this.mediaRecorder.stop(); | ||
| return this.getRecordingBlob(options); | ||
| } | ||
|
|
||
| download(filename, options) { | ||
| if (!filename) { | ||
| filename = `CanvasRecording_${formatDate(new Date())}.webm`; | ||
| } | ||
| const blob = this.getRecordingBlob(options); | ||
| const url = window.URL.createObjectURL(blob); | ||
| const a = document.createElement("a"); | ||
| a.style.display = "none"; | ||
| a.href = url; | ||
| a.download = filename; | ||
| document.body.appendChild(a); | ||
| a.click(); | ||
| setTimeout(() => { | ||
| document.body.removeChild(a); | ||
| window.URL.revokeObjectURL(url); | ||
| }, 100); | ||
| return blob; | ||
| } | ||
|
|
||
| getRecordingBlob(options) { | ||
| if (!options) { | ||
| options = this.blobOptions; | ||
| } | ||
| return new Blob(this.recordedBlobs, options); | ||
| } | ||
|
|
||
| animationLoop() { | ||
| this.ctx.drawArrays(this.ctx.POINTS, 0, 0); | ||
| if (this.mediaRecorder.state !== "inactive") { | ||
| requestAnimationFrame(this.animationLoop); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
applications/visualizer/frontend/src/components/viewers/ThreeD/Screenshoter.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import * as THREE from "three"; | ||
| import { GlobalError } from "../../../models/Error.ts"; | ||
|
|
||
| function getResolutionFixedRatio(htmlElement: HTMLElement, target: { width: number; height: number }) { | ||
| const current = { | ||
| height: htmlElement.clientHeight, | ||
| width: htmlElement.clientWidth, | ||
| }; | ||
|
|
||
| if ((Math.abs(target.width - current.width) * 9) / 16 > Math.abs(target.height - current.height)) { | ||
| return { | ||
| height: target.height, | ||
| width: Math.round((current.width * target.height) / current.height), | ||
| }; | ||
| } | ||
| return { | ||
| height: Math.round((current.height * target.width) / current.width), | ||
| width: target.width, | ||
| }; | ||
| } | ||
|
|
||
| function getOptions(htmlElement: HTMLCanvasElement, targetResolution: { width: number; height: number }, pixelRatio: number) { | ||
| const resolution = getResolutionFixedRatio(htmlElement, targetResolution); | ||
| return { | ||
| canvasWidth: resolution.width, | ||
| canvasHeight: resolution.height, | ||
| pixelRatio: pixelRatio, | ||
| }; | ||
| } | ||
|
|
||
| export function downloadScreenshot( | ||
| canvasRef: React.RefObject<HTMLCanvasElement>, | ||
| sceneRef: React.RefObject<THREE.Scene>, | ||
| cameraRef: React.RefObject<THREE.PerspectiveCamera>, | ||
| filename?: string, | ||
| ) { | ||
| if (!sceneRef.current || !cameraRef.current || !canvasRef.current) return; | ||
|
|
||
| const options = getOptions(canvasRef.current, { width: 3840, height: 2160 }, 1); | ||
|
|
||
| try { | ||
| const tempRenderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true }); | ||
| tempRenderer.setSize(options.canvasWidth, options.canvasHeight); | ||
| tempRenderer.setPixelRatio(options.pixelRatio); // Set the resolution scaling | ||
|
|
||
| cameraRef.current.aspect = options.canvasWidth / options.canvasHeight; | ||
| cameraRef.current.updateProjectionMatrix(); | ||
|
|
||
| tempRenderer.render(sceneRef.current, cameraRef.current); | ||
|
|
||
| tempRenderer.domElement.toBlob((blob) => { | ||
| if (blob) { | ||
| const link = document.createElement("a"); | ||
| link.href = URL.createObjectURL(blob); | ||
| link.download = filename || "screenshot.png"; | ||
| link.click(); | ||
| URL.revokeObjectURL(link.href); | ||
| } | ||
| }, "image/png"); | ||
|
|
||
| tempRenderer.dispose(); | ||
| } catch (e) { | ||
| throw new GlobalError(`Error saving image: ${e}`); | ||
| } | ||
| } |
Oops, something went wrong.