Video Recording for BlaBlaNote Documentation

This script automatically records feature walkthrough videos for the BlaBlaNote application using Playwright.

Prerequisites

1. BlaBlaNote application running locally at https://127.0.0.1
2. Test account credentials (configured in the script)
3. Node.js and npm installed
4. Playwright installed (npm install)

Quick Start

npm run videos

This will:

• Launch a Chrome browser (visible, not headless)
• Log in to the application
• Record separate videos for each feature
• Save videos to public/videos/ directory

Configuration

Edit scripts/capture-videos.mjs to customize:

// Configuration
const BASE_URL = 'https://127.0.0.1';
const USERNAME = 'alex@blablanote.com';
const PASSWORD = 'secret';
const VIDEOS_DIR = join(__dirname, '..', 'public', 'videos');

Features Recorded

The script automatically records walkthroughs for:

1. Dashboard Overview - Homepage and statistics
2. Interactions Walkthrough - Viewing and browsing interactions
3. Create Interaction - Opening the create interaction modal
4. Contacts Walkthrough - Contact list and detail views
5. Tasks Walkthrough - Task management interface
6. Calendar Walkthrough - Calendar view and navigation
7. Tags Walkthrough - Tag organization
8. Profile Settings - User profile and settings

Each feature gets its own video file.

Video Output

• Format: WebM (default Playwright format)
• Resolution: 1920x1080
• Location: public/videos/
• Naming: Playwright generates UUID-based names (you'll need to rename them)

Renaming Videos

After recording, Playwright creates files like:

• abc123-456-789.webm

You should rename them to:

cd public/videos
mv abc123-456-789.webm dashboard-overview.webm
mv def456-789-012.webm interactions-walkthrough.webm
# ... etc

Or use this helper script pattern:

# Get list of videos in order they were created
ls -lt *.webm

The script prints video paths in the order they were recorded.

Customization

Adding New Feature Videos

Add a new feature video by calling captureFeatureVideo:

await captureFeatureVideo(browser, 'Feature Name', async (page) => {
  // Navigate to feature
  await page.goto(`${BASE_URL}/your-feature`);
  await page.waitForLoadState('networkidle');
  await humanDelay(2000, 3000);

  // Simulate interactions
  await page.click('selector');
  await humanDelay(1000, 2000);

  // Scroll if needed
  await page.evaluate(() => window.scrollBy(0, 300));
  await humanDelay(1500, 2000);
});

Adjusting Recording Speed

Modify the humanDelay calls to control pacing:

await humanDelay(500, 1000);  // Fast (0.5-1s)
await humanDelay(2000, 3000); // Slow (2-3s)

Recording in Headless Mode

For automated/CI environments:

const browser = await chromium.launch({
  headless: true,  // Change to true
  ignoreHTTPSErrors: true
});

Troubleshooting

Videos are empty or corrupted

• Ensure the application is running before starting the script
• Check that the login credentials are correct
• Wait for the script to complete (don't kill it early)

Login fails

• Verify BASE_URL, USERNAME, and PASSWORD are correct
• Check the application is accessible at the configured URL
• Ensure SSL certificate issues are handled (ignoreHTTPSErrors: true)

Videos are too fast/slow

• Adjust humanDelay() values throughout the script
• Increase delays for slower walkthroughs
• Decrease for faster recordings

Element not found errors

• The script uses generic selectors that may not match your UI
• Update selectors in the script to match your application's HTML structure
• Add await page.waitForSelector('your-selector') before clicking

Converting Videos

To convert WebM to MP4 (better compatibility):

# Using ffmpeg
ffmpeg -i input.webm -c:v libx264 -crf 23 -c:a aac -b:a 128k output.mp4

Or batch convert all videos:

for file in *.webm; do
  ffmpeg -i "$file" -c:v libx264 -crf 23 -c:a aac -b:a 128k "${file%.webm}.mp4"
done

Tips for Best Results

1. Clean test data: Use a clean test account with good sample data
2. Stable internet: Ensure stable connection for consistent recording
3. Close other apps: Reduce system load for smooth recording
4. Adjust viewport: Change viewport size if needed (currently 1920x1080)
5. Add interactions: Make walkthroughs more engaging with more clicks/hovers
6. Test selectors first: Run in non-headless mode to verify selectors work

Advanced Usage

Record only specific features

Comment out features you don't want to record:

// await captureFeatureVideo(browser, 'Dashboard Overview', async (page) => {
//   ...
// });

await captureFeatureVideo(browser, 'Interactions Walkthrough', async (page) => {
  // This will still record
});

Add custom actions

Inject custom JavaScript:

await page.evaluate(() => {
  // Highlight an element
  document.querySelector('.important').style.border = '3px solid red';

  // Scroll to element smoothly
  document.querySelector('.section').scrollIntoView({ behavior: 'smooth' });
});

Slow motion mode

Add slow motion for detailed demonstrations:

const context = await browser.newContext({
  viewport: { width: 1920, height: 1080 },
  ignoreHTTPSErrors: true,
  recordVideo: {
    dir: VIDEOS_DIR,
    size: { width: 1920, height: 1080 }
  },
  slowMo: 500  // Add 500ms delay between actions
});

Integration with Documentation

Add videos to your markdown docs:

## Feature Walkthrough

<video width="100%" controls>
  <source src="/videos/interactions-walkthrough.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Or for VitePress:

<video src="/videos/interactions-walkthrough.mp4" controls></video>