# 🎥 Vimeo Ripper (vget) A sleek, web-based Vimeo video downloader that extracts direct download links for Vimeo videos in multiple quality formats. Built with vanilla JavaScript and powered by Netlify Lambda functions.     ## ✨ Features - **🎯 Simple Interface**: Clean, intuitive web interface for easy video URL input - **📱 Responsive Design**: Works seamlessly across desktop and mobile devices - **🎬 Multiple Quality Options**: Download videos in 360p, 540p, 720p, or 1080p - **🖼️ Poster Extraction**: Get video thumbnail/poster images alongside video files - **⚡ Real-time Validation**: Instant URL validation with visual feedback - **🚀 Serverless Backend**: Fast, scalable processing using Netlify Lambda functions - **🔗 Direct Download Links**: No intermediary downloads - direct access to video files ## 🛠️ Tech Stack - **Frontend**: HTML5, CSS3, Vanilla JavaScript - **Backend**: Node.js, Netlify Lambda Functions - **HTTP Client**: Axios - **Deployment**: Netlify - **APIs**: Vimeo Player Config API ## 📋 Prerequisites Before running this project, make sure you have: - **Node.js** (version 12 or higher) - **npm** (comes with Node.js) - A modern web browser - Internet connection (for Vimeo API access) ## 🚀 Installation ### 1. Clone the Repository ```bash git clone https://github.com/6a/vimeo-ripper.git cd vimeo-ripper ``` ### 2. Install Dependencies ```bash npm install ``` This will install the required packages: - `axios` - HTTP client for API requests - `netlify-lambda` - Local development and build tools for Lambda functions - `node-fetch` - Node.js implementation of the Fetch API ## 💻 Development Setup ### Local Development #### Option 1: Full Local Setup (Recommended) 1. **Start the Lambda Function Server**: ```bash npm run start:lambda ``` This starts the Netlify Lambda development server at `http://localhost:9000` 2. **Serve the Frontend**: In a new terminal window: ```bash # Using Python (if available) python3 -m http.server 8080 # OR using Node.js http-server npx http-server -p 8080 # OR using any other static file server ``` 3. **Update API Endpoint**: Modify `code.js` line 23 to use your local lambda function: ```javascript const url = `http://localhost:9000/.netlify/functions/get?id=${currentID}&q=${qualitySelect.value}`; ``` 4. **Access the Application**: Open your browser and navigate to `http://localhost:8080` #### Option 2: Quick Preview (Frontend Only) Simply open `index.html` in your web browser. Note that this will use the deployed Lambda function and may not work if the deployment is unavailable. ### Production Build To prepare the Lambda functions for deployment: ```bash npm run build:lambda ``` This creates optimized Lambda function bundles in the `lambda/` directory. ## 🎯 Usage ### Basic Usage 1. **Open the Application**: Navigate to the web interface in your browser 2. **Enter Vimeo URL**: Paste a Vimeo video URL in the input field **Supported URL Formats**: ``` https://vimeo.com/123456789 https://vimeo.com/channels/staffpicks/123456789 https://vimeo.com/ondemand/moviename/123456789 vimeo.com/123456789 ``` 3. **Select Quality**: Choose your preferred video quality from the dropdown: - **1080P** (1920px width) - **720P** (1280px width) - **540P** (960px width) - **360P** (640px width) 4. **Process Video**: Click the play button or press Enter 5. **Download**: Two links will appear: - **(video link)** - Click to view or right-click → "Save as" to download - **(poster link)** - Direct link to the video thumbnail ### Example Workflow ``` Input: https://vimeo.com/channels/staffpicks/212731897 Quality: 720P Output: ✅ (video link) - Direct MP4 download ✅ (poster link) - Thumbnail image ``` ## 📁 Project Structure ``` vimeo-ripper/ ├── 📄 index.html # Main web interface ├── 🎨 style.css # Application styling ├── ⚙️ code.js # Frontend logic and API calls ├── 📦 package.json # Dependencies and scripts ├── 🚀 netlify.toml # Netlify deployment configuration ├── 🖼️ img/ # UI assets │ └── play-button.svg ├── 🔧 src/ │ └── lambda/ │ └── get.js # Serverless function for video processing └── 🏗️ lambda/ # Built Lambda functions (generated) ``` ### Key Files Explained - **`index.html`**: The main user interface with input validation and result display - **`code.js`**: Handles URL validation, API calls, and user interactions - **`style.css`**: Responsive design with gradient background and modern styling - **`src/lambda/get.js`**: Serverless function that fetches video data from Vimeo's API - **`netlify.toml`**: Configuration for Netlify deployment ## 🔧 API Documentation ### Lambda Function Endpoint **URL**: `/.netlify/functions/get` **Method**: `GET` **Parameters**: - `id` (required): Vimeo video ID extracted from the URL - `q` (optional): Requested video quality width (640, 960, 1280, 1920) **Response Format**: ```json { "video": "https://direct-video-url.mp4", "poster": "https://thumbnail-image-url.jpg" } ``` **Error Response**: ```json { "error": "The server encountered a problem when trying to get the video.", "details": "Error details here" } ``` ### Frontend API Usage The frontend uses the Fetch API to communicate with the Lambda function: ```javascript const url = `https://vget.netlify.com/.netlify/functions/get?id=${videoID}&q=${quality}`; fetch(url) .then(response => response.json()) .then(data => { // Handle video and poster URLs }); ``` ## ⚙️ Configuration ### Environment Variables For production deployment, you may want to configure: - **API_BASE_URL**: Base URL for your deployed Lambda functions - **CORS_ORIGIN**: Allowed origins for CORS (currently set to "*") ### URL Validation Regex The application uses a comprehensive regex pattern to validate Vimeo URLs: ```javascript const regex = new RegExp(`^((https?):\/)?\/?(vimeo.com)((\/\\w+)*\/)([0-9]+[^#?\s]+)(.*)?(#[\\w\\-]+)?$`); ``` This pattern supports various Vimeo URL formats including channels, on-demand content, and direct video links. ## 🚀 Deployment ### Netlify Deployment (Recommended) 1. **Connect Repository**: Link your GitHub repository to Netlify 2. **Configure Build Settings**: - Build command: `npm run build:lambda` - Publish directory: `./` (root directory) - Functions directory: `lambda` 3. **Deploy**: Netlify will automatically build and deploy your application ### Manual Deployment 1. **Build Lambda Functions**: ```bash npm run build:lambda ``` 2. **Upload Files**: Upload all files including the generated `lambda/` directory to your hosting provider 3. **Configure Serverless Functions**: Ensure your hosting provider supports serverless functions compatible with Netlify Lambda ## 🐛 Troubleshooting ### Common Issues **1. "Failed" Links Appear** - **Cause**: Video may be private, embedded disabled, or region-restricted - **Solution**: Try a different Vimeo video or check video privacy settings **2. Lambda Function Not Working Locally** - **Cause**: Netlify Lambda dev server not running - **Solution**: Ensure `npm run start:lambda` is running and update API endpoint in `code.js` **3. CORS Errors** - **Cause**: Browser blocking cross-origin requests - **Solution**: Serve the frontend through a proper HTTP server, not file:// protocol **4. Invalid URL Error** - **Cause**: URL doesn't match expected Vimeo format - **Solution**: Ensure URL contains a valid Vimeo video ID (numbers only) ### Debug Mode To enable debugging, open browser developer tools and monitor: - Network tab for API requests - Console tab for JavaScript errors - Application tab for any storage issues ## 🤝 Contributing Contributions are welcome! Here's how to get started: 1. **Fork the Repository** 2. **Create a Feature Branch**: `git checkout -b feature/amazing-feature` 3. **Make Changes**: Implement your feature or fix 4. **Test Thoroughly**: Ensure all functionality works 5. **Commit Changes**: `git commit -m 'Add amazing feature'` 6. **Push to Branch**: `git push origin feature/amazing-feature` 7. **Open Pull Request**: Submit your changes for review ### Development Guidelines - Follow existing code style and conventions - Test with multiple Vimeo video types - Ensure responsive design compatibility - Update documentation for new features ## 📄 License This project is licensed under the ISC License. See the `package.json` file for details. ## 🙏 Acknowledgments - **Vimeo**: For providing the player configuration API - **Netlify**: For serverless function hosting and deployment platform - **Open Source Community**: For the various libraries and tools used ## 📞 Support If you encounter issues or have questions: 1. Check the [Issues](https://github.com/6a/vimeo-ripper/issues) page 2. Create a new issue with detailed information 3. Include browser version, error messages, and steps to reproduce --- **⚠️ Disclaimer**: This tool is for educational purposes. Please respect content creators' rights and Vimeo's Terms of Service. Only download videos you have permission to access.