{"id":19450149,"url":"https://github.com/webexsamples/webex-meetings-quick-start","last_synced_at":"2026-03-12T02:01:57.502Z","repository":{"id":44083892,"uuid":"202372078","full_name":"WebexSamples/webex-meetings-quick-start","owner":"WebexSamples","description":"Webex Javascript SDK Meetings Quick Start","archived":false,"fork":false,"pushed_at":"2025-07-18T20:24:25.000Z","size":1037,"stargazers_count":8,"open_issues_count":9,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-19T01:21:03.492Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebexSamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-14T14:55:47.000Z","updated_at":"2025-07-18T20:24:29.000Z","dependencies_parsed_at":"2024-11-10T16:49:52.246Z","dependency_job_id":null,"html_url":"https://github.com/WebexSamples/webex-meetings-quick-start","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WebexSamples/webex-meetings-quick-start","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fwebex-meetings-quick-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fwebex-meetings-quick-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fwebex-meetings-quick-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fwebex-meetings-quick-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebexSamples","download_url":"https://codeload.github.com/WebexSamples/webex-meetings-quick-start/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebexSamples%2Fwebex-meetings-quick-start/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30412238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"online","status_checked_at":"2026-03-12T02:00:07.260Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T16:35:31.066Z","updated_at":"2026-03-12T02:01:57.496Z","avatar_url":"https://github.com/WebexSamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Webex Javascript SDK Meetings Quick Start\n\nThis sample application demonstrates the basic usage of the Webex Javascript SDK. It allows you to create a Webex meeting using the meetings plugin, providing a simple and straightforward introduction to building video calling applications with the Webex platform.\n\n## ✨ Features\n\n- **🎯 Quick SDK Integration** - Minimal setup to get Webex meetings running\n- **🎥 Video Calling** - Full video and audio communication capabilities\n- **📧 Multiple Destinations** - Support for Person ID, email, SIP URI, and Room ID\n- **🖥️ Self \u0026 Remote Views** - Local and remote video stream display\n- **🎙️ Media Controls** - Camera and microphone stream management\n- **⚡ Parcel Build System** - Fast development server with hot reloading\n- **📱 Browser-based** - No plugins required, works directly in modern browsers\n\n## 🚀 Setup\n\n### Prerequisites\n\n\u003e [!IMPORTANT]\n\u003e You need to be on **Node V18** or later. If not, `yarn install` will throw an error stating the same.\n\n- Node.js 18.0.0 or later\n- Yarn package manager\n- Valid Webex access token from [developer.webex.com](https://developer.webex.com)\n\n### Clone the repo to your local machine\n\n```bash\ngit clone git@github.com:WebexSamples/webex-meetings-quick-start.git\ncd webex-meetings-quick-start\n```\n\n### Install Dependencies\n\n```bash\nyarn install\n```\n\n### Add Personal Access Token\n\nFor this example, we'll use your personal access token which can be found in [Getting Started](https://developer.webex.com/docs/api/getting-started#accounts-and-authentication) if you're logged in. This token provides access to your account for testing purposes, and shouldn't be used for anything other than testing. If you don't already have a Webex Teams account, click Sign Up at the top of this page to create a new account.\n\nOpen the [`index.js`](index.js) file and add this code to authenticate with Webex Teams, replacing `YOUR_ACCESS_TOKEN` with your development token:\n\n```javascript\n// Change to your access token from developer.webex.com\nconst myAccessToken = 'YOUR_ACTUAL_ACCESS_TOKEN';\n```\n\n### Start Server\n\nIn this example we'll use [Parcel](https://parceljs.org/) to build and serve our web app, including the SDK.\n\nLet's serve the web app with Parcel and start a meeting in the browser!\n\n```bash\nyarn start\n```\n\nOpen the app ([http://localhost:1234](http://localhost:1234/)) in your browser to use your new web app! \nEnter the Person ID or email address of who you want to start a meeting with and click the `join` button. \nCongratulations, you've made your first call in the browser using the Webex Browser SDK!\n\n## 📖 Usage Guide\n\n### Getting Started\n\n1. **Launch the Application:**\n   - Start the development server with `yarn start`\n   - Open [http://localhost:1234](http://localhost:1234) in your browser\n\n2. **Join a Meeting:**\n   - Enter a destination in the input field\n   - Click the \"join\" button to start the meeting\n   - Grant camera and microphone permissions when prompted\n\n3. **During the Meeting:**\n   - Your video appears in the left panel (self-view)\n   - Remote participant video appears in the right panel\n   - Use the \"cancel/hangup\" button to end the meeting\n\n### Supported Destinations\n\n| Destination Type | Format | Example |\n|------------------|--------|---------|\n| **Email Address** | user@domain.com | john.doe@company.com |\n| **Person ID** | Webex Person ID | Y2lzY29zcGFyazovL3VzL1BFT1BMRS... |\n| **SIP URI** | SIP address | meeting@example.webex.com |\n| **Room ID** | Webex Room ID | Y2lzY29zcGFyazovL3VzL1JPT00v... |\n\n### Basic Operations\n\n```javascript\n// Create a meeting\nconst meeting = await webex.meetings.create(destination);\n\n// Join with media streams\nawait meeting.joinWithMedia(meetingOptions);\n\n// Leave the meeting\nmeeting.leave();\n```\n\n## 🏗️ Project Structure\n\n```\nwebex-meetings-quick-start/\n├── index.html              # Main HTML template with video elements\n├── index.js                # Core application logic and SDK integration\n├── package.json            # Dependencies and build scripts\n├── yarn.lock               # Yarn dependency lock file\n├── .npmrc                  # npm configuration (engine-strict)\n├── .gitignore              # Git ignore patterns\n├── LICENSE                 # Cisco Sample Code License\n└── README.md               # This documentation\n```\n\n### Core Files\n\n| File | Description | Purpose |\n|------|-------------|---------|\n| **index.html** | HTML template with video elements | UI structure and media containers |\n| **index.js** | Main application logic | SDK initialization, meeting creation, and media handling |\n| **package.json** | Project configuration | Dependencies, scripts, and Node.js requirements |\n\n## 🔧 Code Walkthrough\n\n### SDK Initialization\n\n```javascript\nconst Webex = require('webex');\n\nconst webex = Webex.init({\n  credentials: {\n    access_token: myAccessToken\n  }\n});\n\n// Register for meetings functionality\nwebex.meetings.register();\n```\n\n### Meeting Creation and Join\n\n```javascript\n// Create meeting with destination\nconst meeting = await webex.meetings.create(destination);\n\n// Create media streams\nconst microphoneStream = await webex.meetings.mediaHelpers.createMicrophoneStream({\n  echoCancellation: true,\n  noiseSuppression: true,\n});\n\nconst cameraStream = await webex.meetings.mediaHelpers.createCameraStream({ \n  width: 640, \n  height: 480 \n});\n\n// Join with media options\nconst meetingOptions = {\n  mediaOptions: {\n    allowMediaInLobby: true,\n    shareAudioEnabled: false,\n    shareVideoEnabled: false,\n    localStreams: {\n      camera: cameraStream,\n      microphone: microphoneStream\n    },      \n  },\n};\n\nawait meeting.joinWithMedia(meetingOptions);\n```\n\n### Media Event Handling\n\n```javascript\nfunction bindMeetingEvents(meeting) {\n  // Handle remote media streams\n  meeting.on('media:ready', (media) =\u003e {\n    if (media.type === 'remoteVideo') {\n      document.getElementById('remote-view-video').srcObject = media.stream;\n    }\n    if (media.type === 'remoteAudio') {\n      document.getElementById('remote-view-audio').srcObject = media.stream;\n    }\n  });\n\n  // Handle media stream stopping\n  meeting.on('media:stopped', (media) =\u003e {\n    if (media.type === 'remoteVideo') {\n      document.getElementById('remote-view-video').srcObject = null;\n    }\n    if (media.type === 'remoteAudio') {\n      document.getElementById('remote-view-audio').srcObject = null;\n    }\n  });\n\n  // Handle meeting errors\n  meeting.on('error', (err) =\u003e {\n    console.error(err);\n  });\n}\n```\n\n### HTML Structure\n\n```html\n\u003c!-- Input form for meeting destination --\u003e\n\u003cform id=\"destination\"\u003e\n  \u003cinput\n    id=\"invitee\"\n    placeholder=\"Person ID or Email Address or SIP URI or Room ID\"\n    type=\"text\"\u003e\n  \u003cinput title=\"join\" type=\"submit\" value=\"join\"\u003e\n\u003c/form\u003e\n\n\u003c!-- Video containers --\u003e\n\u003cdiv style=\"display: flex\"\u003e\n  \u003cvideo id=\"self-view\" muted autoplay playsinline\u003e\u003c/video\u003e\n  \u003cdiv\u003e\n    \u003caudio id=\"remote-view-audio\" autoplay\u003e\u003c/audio\u003e\n    \u003cvideo id=\"remote-view-video\" autoplay playsinline\u003e\u003c/video\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Meeting controls --\u003e\n\u003cbutton id=\"hangup\" type=\"button\"\u003ecancel/hangup\u003c/button\u003e\n```\n\n## ⚙️ Configuration\n\n### Package Dependencies\n\n```json\n{\n  \"dependencies\": {\n    \"webex\": \"3.1.0\"\n  },\n  \"engines\": {\n    \"node\": \"\u003e=18.0.0\"\n  },\n  \"devDependencies\": {\n    \"parcel\": \"^2.12.0\",\n    \"crypto-browserify\": \"^3.12.0\",\n    // ... additional browserify polyfills\n  }\n}\n```\n\n### Media Stream Options\n\n```javascript\n// Microphone configuration\nconst microphoneStream = await webex.meetings.mediaHelpers.createMicrophoneStream({\n  echoCancellation: true,    // Enable echo cancellation\n  noiseSuppression: true,    // Enable noise suppression\n});\n\n// Camera configuration  \nconst cameraStream = await webex.meetings.mediaHelpers.createCameraStream({ \n  width: 640,               // Video width\n  height: 480               // Video height\n});\n```\n\n### Meeting Options\n\n```javascript\nconst meetingOptions = {\n  mediaOptions: {\n    allowMediaInLobby: true,      // Allow media before meeting starts\n    shareAudioEnabled: false,     // Disable audio sharing\n    shareVideoEnabled: false,     // Disable video sharing\n    localStreams: {\n      camera: cameraStream,       // Local camera stream\n      microphone: microphoneStream // Local microphone stream\n    },      \n  },\n};\n```\n\n## 🧪 Testing\n\n### Manual Testing Steps\n\n1. **Basic Functionality:**\n   - Start the application and verify UI loads correctly\n   - Test with different destination formats\n   - Verify camera and microphone permissions\n\n2. **Meeting Flow:**\n   - Create a meeting with a valid destination\n   - Check that self-view displays local video\n   - Verify remote media streams when another participant joins\n   - Test hang up functionality\n\n3. **Error Handling:**\n   - Test with invalid destinations\n   - Verify error messages display correctly\n   - Check behavior when media permissions are denied\n\n### Browser Compatibility\n\n| Browser | Version | Support Status |\n|---------|---------|----------------|\n| Chrome | 90+ | ✅ Full Support |\n| Firefox | 88+ | ✅ Full Support |\n| Safari | 14+ | ✅ Full Support |\n| Edge | 90+ | ✅ Full Support |\n\n## 🚨 Troubleshooting\n\n### Common Issues\n\n| Issue | Solution |\n|-------|----------|\n| **Node version error** | Ensure you're using Node.js 18.0.0 or later |\n| **Access token error** | Replace `YOUR_ACCESS_TOKEN` with your actual token |\n| **Media permissions denied** | Grant camera/microphone permissions in browser |\n| **Meeting creation fails** | Verify destination format and network connectivity |\n| **Video not displaying** | Check browser WebRTC support and media constraints |\n\n### Debug Mode\n\nThe application includes debug logging enabled by default:\n\n```javascript\nwebex.config.logger.level = 'debug';\n```\n\nCheck the browser console for detailed SDK logs and error messages.\n\n### Common Fixes\n\n```javascript\n// Check if access token is properly set\nif (myAccessToken === 'YOUR_ACCESS_TOKEN') {\n  alert('Make sure to update your access token in the index.js file!');\n  throw new Error('Make sure to update your access token in the index.js file!');\n}\n\n// Verify meeting registration\nwebex.meetings.register()\n  .catch((err) =\u003e {\n    console.error(err);\n    alert(err);\n    throw err;\n  });\n```\n\n## 📚 Additional Resources\n\nTo see the full example code we have used here to start a meeting, check out the [sample app in GitHub](https://github.com/webex/webex-js-sdk/tree/master/packages/node_modules/samples/browser-single-party-call).\n\n### Documentation Links\n\n- [Webex JavaScript SDK Documentation](https://webex.github.io/webex-js-sdk/)\n- [Webex Meetings API Guide](https://developer.webex.com/docs/meetings)\n- [Getting Started with Webex APIs](https://developer.webex.com/docs/api/getting-started)\n- [Webex Developer Portal](https://developer.webex.com)\n\n### Related Samples\n\n- [Browser Single Party Call](https://github.com/webex/webex-js-sdk/tree/master/packages/node_modules/samples/browser-single-party-call)\n- [Webex Meeting Widget Starter](../webex-meeting-widget-starter)\n- [Webex JS SDK Calling Demo](../webex-js-sdk-calling-demo)\n\n## 🤝 Contributing\n\nWe truly appreciate your contribution to the Webex Samples!\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/meeting-enhancement`\n3. Commit changes: `git commit -am 'Add meeting feature'`\n4. Push to branch: `git push origin feature/meeting-enhancement`\n5. Submit a Pull Request\n\n### Development Guidelines\n\n- Follow the existing code style and patterns\n- Test with multiple browsers and destinations\n- Update documentation for new features\n- Ensure Node.js 18+ compatibility\n\n## 📄 License\n\nThis project is licensed under the Cisco Sample Code License - see the [LICENSE](LICENSE) file for details.\n\n## 🆘 Support\n\nFor technical support and questions:\n\n- **Issues**: Submit via GitHub Issues\n- **SDK Documentation**: [Webex JavaScript SDK](https://webex.github.io/webex-js-sdk/)\n- **API Documentation**: [Webex Developer Portal](https://developer.webex.com)\n- **Community**: [Webex Developer Community](https://developer.webex.com/community)\n\n## Thanks!\n\nMade with ❤️ by the Webex Developer Relations Team at Cisco\n\n---\n\n**Note**: This quick start is designed for development and testing purposes. For production applications, implement additional security measures, error handling, and user experience optimizations.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebexsamples%2Fwebex-meetings-quick-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebexsamples%2Fwebex-meetings-quick-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebexsamples%2Fwebex-meetings-quick-start/lists"}