const annotations1 = [
    {
        text: "Video frame rate",
        textX: 260,
        textY: 20,
        arrowStart: { x: 264, y: 48 },
        arrowEnd: { x: 220, y: 108 }
    },
    {
        text: "Camera name",
        textX: 20,
        textY: 80,
        arrowStart: { x: 138, y: 104 },
        arrowEnd: { x: 160, y: 112 }
    },
    {
        text: "Audio - click to listen",
        textX: 660,
        textY: 140,
        arrowStart: { x: 666, y: 148 },
        arrowEnd: { x: 640, y: 116 }
    },
    {
        text: "Camera Control - click to open",
        textX: 660,
        textY: 40,
        arrowStart: { x: 666, y: 86 },
        arrowEnd: { x: 634, y: 89 }
    },
    {
        text: "Right-click (ctrl-click) for more options including image capture",
        textX: 660,
        textY: 260,
        arrowStart: { x: 666, y: 267 },
        arrowEnd: { x: 620, y: 267 }
    },
    {
        text: "Hold Command, scroll up / down to zoom in / out",
        textX: 20,
        textY: 170,
        arrowStart: { x: 138, y: 178 },
        arrowEnd: { x: 180, y: 178 }
    },
    {
        text: "Hold Command, scroll left to start instant replay",
        textX: 20,
        textY: 310,
        arrowStart: { x: 138, y: 318 },
        arrowEnd: { x: 180, y: 318 }
    }
];

const annotations2 = [
    {
        text: "Yellow indicator shows current replay position",
        textX: 20,
        textY: 65,
        arrowStart: { x: 138, y: 73 },
        arrowEnd: { x: 180, y: 73 }
    },
    {
        text: "End replay session",
        textX: 660,
        textY: 65,
        arrowStart: { x: 666, y: 73 },
        arrowEnd: { x: 640, y: 73 }
    }
];