Getting Started with PSM SDK

Build media-rich web applications in minutes

Welcome to the Purple Squirrel Media SDK! This guide will walk you through the basics of using PSM to add video players, audio waveforms, canvas editors, and more to your web applications.

1 Installation

The fastest way to get started is using our CDN. Add this single line to your HTML:

<script src="https://purplesquirrel.media/sdk/psm.js"></script>

That's it! The entire SDK is now available through the global PSM object.

Alternative: npm Installation

For Node.js projects or when using a bundler:

# npm
npm install @purplesquirrel/psm-sdk

# yarn
yarn add @purplesquirrel/psm-sdk

2 Your First Video Player

Let's create a video player with just a few lines of code:

<video id="my-video" src="video.mp4"></video>

<script>
  (async () => {
    // Create the player
    const player = await PSM.createPlayer('#my-video');

    // Listen for events
    player.on('play', () => console.log('Playing!'));
    player.on('timeupdate', (time) => console.log(time));

    // Control playback
    player.play();
    player.setVolume(0.8);
  })();
</script>

3 Available Modules

PSM SDK includes 12 powerful modules:

4 Canvas Editor Example

Create an interactive canvas editor with shapes, drawing, and undo/redo:

<canvas id="myCanvas" width="800" height="400"></canvas>

<script>
  (async () => {
    const canvas = await PSM.createCanvas('myCanvas');

    // Add shapes
    canvas.addRect({ fill: '#9b30ff', left: 50, top: 50 });
    canvas.addCircle({ radius: 40, fill: '#7ee787' });
    canvas.addText('Hello PSM!', { fontSize: 24 });

    // Enable drawing mode
    canvas.enableDrawing({ color: '#9b30ff', width: 3 });

    // Undo/redo
    canvas.undo();
    canvas.redo();

    // Export
    const png = canvas.toDataURL('png');
  })();
</script>

5 HLS Streaming

Add adaptive streaming with quality selection:

<video id="live-video"></video>

<script>
  (async () => {
    const stream = await PSM.createStream({ lowLatency: true });
    const video = document.getElementById('live-video');

    // Attach to video element
    await stream.attach(video, 'https://example.com/live.m3u8');

    // Quality control
    console.log(stream.levels);      // Available quality levels
    stream.setQuality(2);            // Set specific quality
    stream.setAutoQuality(true);    // Enable auto quality

    // Events
    stream.on('levelSwitched', ({ level }) => {
      console.log('Quality changed to:', level);
    });
  })();
</script>

6 Next Steps

• Full API Documentation - Complete reference for all modules
• Live Demos - Interactive examples for each module
• Playground - Experiment with the SDK in real-time
• GitHub - Source code and issues