Are you having trouble capturing accurate screenshots of your website due to security settings or network restrictions? This guide will help you enable native browser screenshot rendering with Marker.io, ensuring your screenshots are always accurate and reliable.
What is Native Browser Screenshot Rendering?
Native browser screenshot rendering allows your browser to use its built-in media-record API to capture screenshots directly. This method works well with different types of web content and overcomes issues related to network settings that may otherwise block or distort screenshots.
Known Limitations
Before enabling native browser screenshot rendering, keep these limitations in mind:
Not Supported on Mobile Devices: Mobile browsers will default to server-side rendering.
Screen Selection Required: Users need to manually choose the screen or window they want to capture.
Retina Display Issues in Chrome & Edge: On Retina displays, screenshots in Chrome and Edge may not appear pixel-perfect. However, Safari and Firefox provide optimal results.
How to Enable Native Browser Screenshot Rendering
You can enable native screenshot rendering in Marker.io using one of two methods: inserting a code snippet into your website or configuring it through Marker.io’s Browser SDK. Follow the steps below based on your setup.
Method 1: Using Snippet Code
Insert the following snippet into your website’s HTML:
<script>
window.markerConfig = {
project: 'PROJECT_ID',
source: 'snippet',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
};
</script>
Replace 'PROJECT_ID' with your actual project ID.
Method 2: Using Browser SDK
If you're using Marker.io’s Browser SDK, use the following code:
const widget = await markerSDK.loadWidget({
project: 'PROJECT_ID',
// Enables native browser screenshot rendering
useNativeScreenshot: true,
});Replace 'PROJECT_ID' with your actual project ID.
Test Native Browser Screenshot Rendering
Once you’ve configured native screenshot rendering, you can test how it works by capturing screenshots in different scenarios. Here is an example:
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.