huidou886
commented
2 months ago During the private deployment process, the code for echo is as follows. Discovering that it cannot be perfectly replayed, how to modify it？
<template>
<div class="sdk-wrap" ref="sdkWrap">
<iframe class="sdk-wrap-iframe" ref="sdkWrapIframe"></iframe>
</div>
</template>
<script setup>
import { onMounted, ref} from 'vue'
import { clarityData2 } from '../../utils/data';
import { Visualizer } from '../../utils/clarity.visualize'
const sdkWrap = ref(null);
const sdkWrapIframe = ref(null);
onMounted(() => {
if (sdkWrapIframe.value) {
init();
}
})
async function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const init = async() => {
const playbackData = [];
const clarityDataTemp2 = clarityData2()
const clarityDataTemp = clarityDataTemp2.split('\n')
for (const iterator of clarityDataTemp) {
try {
if (iterator && iterator.length > 1) {
const item = JSON.parse(decodeURIComponent(iterator))
playbackData.push(item)
}
} catch (e) {
console.error('e------>', e)
}
}
const visualizer = new Visualizer();
// 获取 iframe 元素
const iframe = sdkWrapIframe.value;
// 获取 iframe 的内容窗口
const targetWindow = iframe.contentWindow;
const options = {
version: '0.7.46',
canvas: true,
keyframes: false
};
try {
await visualizer.setup(targetWindow, options);
// 渲染回放数据
const playbackDataTemp = []
let timestamp = 0
for (const iterator of playbackData) {
let timestampDelay = timestamp == 0 ? 500 : (iterator.timestamp - timestamp)
await delay(timestampDelay);
playbackDataTemp.push(iterator)
timestamp = iterator.timestamp
await visualizer.html(playbackDataTemp, targetWindow, null, 0);
}
} catch (e) {
console.error('e11------>', e)
}
}
AbdelrhmanMagdy
1、How to Play Data: When using visualizer.html(), playback is choppy. 2、How to Display Hotspots. 3、How to Display Click Areas. 4、Is the code available on the open-source website "https://clarity.microsoft.com/"? Thank you