@onirix/screen-capture
Advanced tools
Onirix Screen Capture makes it easy to take screenshots and video recordings in AR experiences.
You should keep in mind that using this library ONLY with WebXR may generate a loss of performance and a white strip will also appear at the top of the navigation bar with your phone. Both issues are generated by Google and cannot be hidden or improved in any way.
If you need help take a look at our documentation.
npm install @onirix/screen-capture
Include the dependency within the HTML head tag:
<head>
<script src="https://cdn.jsdelivr.net/npm/@onirix/screen-capture@2.0.0/+esm"/>
</head>
As ESM modules:
import OxScreenCapturedLib from "https://cdn.jsdelivr.net/npm/@onirix/screen-capture@2.0.0/+esm";
To use this library, first, the Onirix Embed SDK must be initialized and passed to the constructor.
import OnirixEmbedSDK from "https://cdn.jsdelivr.net/npm/@onirix/embed-sdk@1.18.0/+esm";
import OxScreenCaptureLib from "https://cdn.jsdelivr.net/npm/@onirix/screen-capture@2.0.0/+esm";
const embedSDK = new OnirixEmbedSDK();
embedSDK.connect();
const oxScreenCapture = new OxScreenCaptureLib(embedSDK);
embedSDK.subscribe(OnirixEmbedSDK.Events.SCENE_LOAD_END, (params) => {
oxScreenCapture.init();
});
Onirix Screen Capture can be configured by adding a second parameter to the constructor, the texts of the html elements.
Onirix Screen Capture provides a default user interface that displays a button for the user to capture. It also provides a component to preview the capture and methods to add images to the capture (watermarks, borders, emojis...).
If you need a more specific behaviour, you can hide the UI and use directly the methods described in OxScreenCaptureLib Class.
The Onirix Screen Capture module provides you with a default UI to make you have to write as little code as possible.
Just call the init method and it will automatically add a control to take screenshots (one simple touch/click) and to record video (holding down the button) when a scene is loaded. The resulting image or video will be displayed in a preview component where the user will be able to share it (if the browser is supported) or download it.
oxScreenCapture.init();
This method supports three parameters: photoMode, videoMode, preview, uiTexts:
Let's see some examples:
// Default config: take screenshot, video and show preview component.
oxScreenCapture.init();
// Take screenshot, no video and no preview.
oxScreenCapture.init(true, false, false);
// Record video and customize texts, no screenshot.
oxScreenCapture.init(false, true, false, {
share: 'Send or download video',
preparing: 'Loading...',
});
When you use the default UI these are the texts that will be shown to the user:
| Text | Description |
|---|---|
| share | Text of the button that opens the share menu of the navigator |
| preparing | Text to indicate that the video is being processed. It is shown on the preview component before enabling share and download options. |
| video_prefix | Prefix for the video file name |
| photo_prefix | Prefix for the photo file name |
If you want to change any of these texts, you must pass a JSON object with the texts you want to change.
const CUSTOM_UI_TEXTS = {
share: 'Send',
preparing: 'Processing...',
video_prefix: 'recording_',
photo_prefix: 'picture_',
};
oxScreenCapture.init(true, true, true, CUSTOM_UI_TEXTS);
This are the default texts:
const DEFAULT_UI_TEXTS = {
video_prefix: 'ox-video_',
photo_prefix: 'ox-photo_',
share: 'Share',
preparing: 'Preparing...'
}
The body has a css class called ox-screen-capture. And during screen capture or video recording the class ox-screen-capture--in--progress is added.
Default UI has ox-screen-capture__ui and the preview has a class called ox-screen-capture__preview. By employing these selectors, you will be able to customize the style of individual elements under them in the DOM.
To modify the look and feel of the UI controls and preview component you can add all the CSS you need to your experience through Onirix Studio's online code editor.
Let's change de preview's component background color:
.ox-screen-capture__preview > div {
background-color: #FABADA;
}
You can make infinite changes to the interface by adding the appropriate CSS selectors. Through your browser's development tools you can explore the names of the css classes used by the library and add your own custom selectors and rules.
Adding an image over the capture is very easy. You can use any image asset from your asset's library.
const OVERLAY_ASSET_OID = '<your_asset_oid>';
const embedSDK = new OnirixEmbedSDK();
embedSDK.connect();
const oxScreenCapture = new OxScreenCaptureLib(embedSDK);
embedSDK.subscribe(OnirixEmbedSDK.Events.SCENE_LOAD_END, async (params) => {
await oxScreenCapture.setOverlay(OVERLAY_ASSET_OID, { bottom: 0, right: 0, top: 0, left: 0 });
});
oxScreenCapture.init();
The setOverlay method needs two parameters:
These are the methods offered by Onirix Screen Capture. With them you can create your own UI and take screenshots and record video in response to any action or need in your experience.
constructor(embedSdk);
capturePhoto();
This method takes a screenshot of the experience and download a file with the image.
capturePhotoPreview();
This method takes a screenshot of the experience and displays it in a preview popup with save and share options.
captureVideoStart();
This method starts the screen recording.
captureVideoEnd(preview = true)
This method finish the screen recording and download the video. If preview is true the video will be loaded into preview component.
Initialize the module so, when a scene is loaded, it will show the default UI ready to take screenshots and record video.
init(photoMode = true, videoMode = true, preview = true, uiTexts = DEFAULT_UI_TEXTS)
Supports three parameters:
Remove the default UI from document.
removeUI()
Remove the preview component if exists.
removePreview()
setOverlay(overlay, params?)
overlay can be any type of object supported by createImageBitmap, including img, canvas elements or Blob instances. It can also be the OID of a Studio asset that is of type image.
params is optional. If provided it must be an object with zero or more of the following attributes: top, bottom, left, right, height and width. All of them accept numeric values that will be considered pixels and will work similar to their CSS analogues. If top, bottom and height are present at the same time it will give an error. If left, right and width are present at the same time it will give an error.
clearOverlay()
Clears the current overlay. Captures made after calling this method will not show any overlay until an overlay is redefined.
If you need help take a look at our documentation.
👤 Onirix
FAQs
Onirix helper for take screen captures in experiences.
The npm package @onirix/screen-capture receives a total of 29 weekly downloads. As such, @onirix/screen-capture popularity was classified as not popular.
We found that @onirix/screen-capture demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.