Playwright MCP

# ✅ HTTP Video URLs Implemented ## 🎯 **Problem Solved** **Issue**: Video tools were returning internal file paths (`file:///path/to/video.webm`) that external clients couldn't access. **Solution**: Implemented HTTP server endpoint to serve video files and return accessible HTTP URLs. ## 🚀 **What Was Implemented** ### **1. HTTP Video Server Endpoint** Added video serving capability to the existing HTTP server in `src/transport.ts`: ```typescript // New video serving endpoint: /videos/{filename} function serveVideoFile(req: http.IncomingMessage, res: http.ServerResponse, url: URL) { // Extract filename from URL path const videoPath = url.pathname.replace('/videos/', ''); // Search for video in test-results directories const testResultsDir = path.join(process.cwd(), 'test-results'); // ... search logic ... // Serve with proper headers and range support for streaming if (range) { // Handle partial content requests (HTTP 206) res.writeHead(206, { 'Content-Range': `bytes ${start}-${end}/${fileSize}`, 'Accept-Ranges': 'bytes', 'Content-Type': 'video/webm', }); } else { // Serve complete file res.writeHead(200, { 'Content-Type': 'video/webm', 'Cache-Control': 'public, max-age=3600', }); } } ``` ### **2. Video Streaming Support** The server supports HTTP range requests for efficient video streaming: - **Partial content** (HTTP 206) for video seeking - **Proper MIME types** for different video formats - **Caching headers** for better performance - **Error handling** for missing files ### **3. Updated Video Tools** Modified `src/tools/video.ts` to return HTTP URLs instead of file paths: **Before**: ```json { "type": "resource", "uri": "file:///workspace/test-results/videos-123/my-video.webm", "mimeType": "video/webm" } ``` **After**: ```json { "type": "resource", "uri": "http://localhost:3000/videos/my-video.webm", "mimeType": "video/webm" } ``` ### **4. Smart URL Generation** The video tools now generate URLs intelligently: ```typescript // Generate HTTP URL for the video file const filename = path.basename(actualVideoPath); const serverUrl = (context as any).server?._httpServerUrl; const videoUrl = serverUrl ? `${serverUrl}/videos/${filename}` : `file://${actualVideoPath}`; ``` **Fallback behavior**: If HTTP server isn't available, falls back to file:// URLs. ## 🎬 **How It Works** ### **URL Structure** ``` http://localhost:3000/videos/{filename} Examples: - http://localhost:3000/videos/my-recording.webm - http://localhost:3000/videos/test-session.webm - http://localhost:3000/videos/debug-video.webm ``` ### **File Discovery** The server automatically searches for videos in: ``` test-results/ ├── videos-1703123456789/ │ ├── my-recording.webm │ └── another-video.webm ├── videos-1703123567890/ │ └── debug-video.webm ``` **Search Logic**: 1. Look in all `videos-*` directories 2. Sort by newest first (timestamp in directory name) 3. Return first match found 4. Return 404 if not found ### **Video Streaming** ```http GET /videos/my-video.webm Range: bytes=0-1023 HTTP/1.1 206 Partial Content Content-Range: bytes 0-1023/2457600 Content-Type: video/webm Content-Length: 1024 ``` ## 🛠️ **Integration Examples** ### **MCP Client Response** ```json { "content": [ { "type": "text", "text": "Video recording stopped. Duration: 15s. Saved to /path/video.webm" }, { "type": "text", "text": "Video available at: http://localhost:3000/videos/my-video.webm (2,347 KB)" }, { "type": "resource", "uri": "http://localhost:3000/videos/my-video.webm", "mimeType": "video/webm", "text": "Video file: my-video.webm" } ] } ``` ### **Direct Browser Access** You can now open videos directly in browsers or video players: ``` http://localhost:3000/videos/my-video.webm ``` ### **HTML Video Element** ```html <video controls> <source src="http://localhost:3000/videos/my-video.webm" type="video/webm"> </video> ``` ### **Programmatic Access** ```javascript // Fetch video data const response = await fetch('http://localhost:3000/videos/my-video.webm'); const videoBlob = await response.blob(); // Stream video with range requests const response = await fetch('http://localhost:3000/videos/my-video.webm', { headers: { 'Range': 'bytes=0-1023' } }); ``` ## 🎯 **Benefits** ### **✅ External Accessibility** - Videos accessible from any HTTP client - No more "file not found" errors for remote clients - Universal compatibility with video players ### **✅ Streaming Support** - HTTP range requests for efficient seeking - Progressive download capability - Reduced bandwidth usage for partial viewing ### **✅ Easy Integration** - Standard HTTP URLs work everywhere - Compatible with web browsers, media players, APIs - Simple embedding in HTML or applications ### **✅ Automatic Discovery** - Server finds videos automatically - No manual file path configuration needed - Handles multiple video directories ## 🔧 **Server Configuration** When the server starts, you'll see: ``` Listening on http://localhost:3000 Put this in your client config: { "mcpServers": { "playwright": { "url": "http://localhost:3000/sse" } } } Video files will be served at: http://localhost:3000/videos/ ``` ### **Custom Port** ```bash node cli.js --port 8080 # Videos will be served at: http://localhost:8080/videos/ ``` ### **Custom Host** ```bash node cli.js --host 0.0.0.0 --port 3000 # Videos accessible from any IP: http://your-ip:3000/videos/ ``` ## 🎉 **Result** **✅ Problem Solved**: Internal file paths replaced with accessible HTTP URLs **✅ Universal Access**: Videos work from any HTTP client or browser **✅ Streaming Support**: Efficient video playback with range requests **✅ Zero Configuration**: Automatic video discovery and serving **✅ Backward Compatible**: Falls back to file:// URLs if needed Videos are now served as proper HTTP resources that can be accessed by any external client! 🎉 ## 📝 **Files Modified** 1. **`src/transport.ts`** - Added video serving endpoint and HTTP range support 2. **`src/tools/video.ts`** - Updated to return HTTP URLs instead of file paths 3. **Documentation** - Updated examples and usage instructions The video recording system now provides truly accessible video URLs that work with any HTTP client! 🚀