QR Code Sharing for Collaboration Spaces

The Vaultys Playground now supports QR code sharing for collaboration spaces, making it easier to invite others to join your collaborative sessions.

How It Works

For Space Owners

1. Create a Space: Navigate to the collaboration tool and create your space
2. Generate QR Code: Once connected, click the "📱 QR Code" button in the header or space information panel
3. Share the QR Code: Others can scan this code to instantly join your space

For Participants

1. Scan the QR Code: Use your phone's camera or QR code scanner
2. Select Identity: You'll be redirected to the playground where you can:
   • Select an existing identity
   • Create a new identity if needed
3. Auto-Join: After selecting an identity, you'll automatically join the collaboration space

QR Code URL Format

The QR code contains a URL in the following format:

https://your-domain/playground/#tool=collaboration&spaceid=<spaceId>

Where spaceId is the full space address (e.g., spaceName@ownerDID)

Features

Automatic Connection Flow

• When scanning a QR code, users are guided through the entire connection process
• The space ID is automatically populated
• Connection happens automatically after identity selection

Visual Indicators

• Blue notification banner shows when joining via QR code
• Space ID is displayed for confirmation
• Clear instructions guide users through the process

Security

• Each user must have or create their own Vaultys identity
• The space owner automatically accepts joining peers
• All communication is peer-to-peer and encrypted

User Experience Flow

Implementation Details

QR Code Generation

• Uses the qrcode npm package
• Generates a 256x256 pixel QR code
• Includes the full share URL with space ID

URL Parameter Handling

• The playground index page detects tool and spaceid parameters
• Shows a notification banner for QR code joins
• Stores pending redirect information until identity is selected

Auto-Connection

• The collaboration page detects the spaceid parameter
• Automatically populates the room name field
• Triggers connection after a short delay

Best Practices

1. Share Responsibly: Only share QR codes with trusted participants
2. Space Naming: Use descriptive space names for easy identification
3. Identity Management: Encourage users to create meaningful identity names

Troubleshooting

QR Code Not Working

• Ensure the URL is complete and properly encoded
• Check that the space is still active
• Verify the owner is online (for participant connections)

Connection Issues

• Ensure both peers have stable internet connections
• Check that WebRTC is not blocked by firewalls
• Try refreshing the page and reconnecting

Identity Issues

• Make sure at least one identity exists
• Clear browser storage if identities are corrupted
• Create a new identity if problems persist

Technical Requirements

• Modern web browser with WebRTC support
• Camera access for QR code scanning (mobile)
• Local storage enabled for identity persistence