This 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.
- 🎯 Quick SDK Integration - Minimal setup to get Webex meetings running
- 🎥 Video Calling - Full video and audio communication capabilities
- 📧 Multiple Destinations - Support for Person ID, email, SIP URI, and Room ID
- 🖥️ Self & Remote Views - Local and remote video stream display
- 🎙️ Media Controls - Camera and microphone stream management
- ⚡ Parcel Build System - Fast development server with hot reloading
- 📱 Browser-based - No plugins required, works directly in modern browsers
Important
You need to be on Node V18 or later. If not, yarn install will throw an error stating the same.
- Node.js 18.0.0 or later
- Yarn package manager
- Valid Webex access token from developer.webex.com
git clone [email protected]:WebexSamples/webex-meetings-quick-start.git
cd webex-meetings-quick-startyarn installFor this example, we'll use your personal access token which can be found in Getting Started 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.
Open the index.js file and add this code to authenticate with Webex Teams, replacing YOUR_ACCESS_TOKEN with your development token:
// Change to your access token from developer.webex.com
const myAccessToken = 'YOUR_ACTUAL_ACCESS_TOKEN';In this example we'll use Parcel to build and serve our web app, including the SDK.
Let's serve the web app with Parcel and start a meeting in the browser!
yarn startOpen the app (http://localhost:1234) in your browser to use your new web app!
Enter the Person ID or email address of who you want to start a meeting with and click the join button.
Congratulations, you've made your first call in the browser using the Webex Browser SDK!
-
Launch the Application:
- Start the development server with
yarn start - Open http://localhost:1234 in your browser
- Start the development server with
-
Join a Meeting:
- Enter a destination in the input field
- Click the "join" button to start the meeting
- Grant camera and microphone permissions when prompted
-
During the Meeting:
- Your video appears in the left panel (self-view)
- Remote participant video appears in the right panel
- Use the "cancel/hangup" button to end the meeting
| Destination Type | Format | Example |
|---|---|---|
| Email Address | [email protected] | [email protected] |
| Person ID | Webex Person ID | Y2lzY29zcGFyazovL3VzL1BFT1BMRS... |
| SIP URI | SIP address | [email protected] |
| Room ID | Webex Room ID | Y2lzY29zcGFyazovL3VzL1JPT00v... |
// Create a meeting
const meeting = await webex.meetings.create(destination);
// Join with media streams
await meeting.joinWithMedia(meetingOptions);
// Leave the meeting
meeting.leave();webex-meetings-quick-start/
├── index.html # Main HTML template with video elements
├── index.js # Core application logic and SDK integration
├── package.json # Dependencies and build scripts
├── yarn.lock # Yarn dependency lock file
├── .npmrc # npm configuration (engine-strict)
├── .gitignore # Git ignore patterns
├── LICENSE # Cisco Sample Code License
└── README.md # This documentation
| File | Description | Purpose |
|---|---|---|
| index.html | HTML template with video elements | UI structure and media containers |
| index.js | Main application logic | SDK initialization, meeting creation, and media handling |
| package.json | Project configuration | Dependencies, scripts, and Node.js requirements |
const Webex = require('webex');
const webex = Webex.init({
credentials: {
access_token: myAccessToken
}
});
// Register for meetings functionality
webex.meetings.register();// Create meeting with destination
const meeting = await webex.meetings.create(destination);
// Create media streams
const microphoneStream = await webex.meetings.mediaHelpers.createMicrophoneStream({
echoCancellation: true,
noiseSuppression: true,
});
const cameraStream = await webex.meetings.mediaHelpers.createCameraStream({
width: 640,
height: 480
});
// Join with media options
const meetingOptions = {
mediaOptions: {
allowMediaInLobby: true,
shareAudioEnabled: false,
shareVideoEnabled: false,
localStreams: {
camera: cameraStream,
microphone: microphoneStream
},
},
};
await meeting.joinWithMedia(meetingOptions);function bindMeetingEvents(meeting) {
// Handle remote media streams
meeting.on('media:ready', (media) => {
if (media.type === 'remoteVideo') {
document.getElementById('remote-view-video').srcObject = media.stream;
}
if (media.type === 'remoteAudio') {
document.getElementById('remote-view-audio').srcObject = media.stream;
}
});
// Handle media stream stopping
meeting.on('media:stopped', (media) => {
if (media.type === 'remoteVideo') {
document.getElementById('remote-view-video').srcObject = null;
}
if (media.type === 'remoteAudio') {
document.getElementById('remote-view-audio').srcObject = null;
}
});
// Handle meeting errors
meeting.on('error', (err) => {
console.error(err);
});
}<!-- Input form for meeting destination -->
<form id="destination">
<input
id="invitee"
placeholder="Person ID or Email Address or SIP URI or Room ID"
type="text">
<input title="join" type="submit" value="join">
</form>
<!-- Video containers -->
<div style="display: flex">
<video id="self-view" muted autoplay playsinline></video>
<div>
<audio id="remote-view-audio" autoplay></audio>
<video id="remote-view-video" autoplay playsinline></video>
</div>
</div>
<!-- Meeting controls -->
<button id="hangup" type="button">cancel/hangup</button>{
"dependencies": {
"webex": "3.1.0"
},
"engines": {
"node": ">=18.0.0"
},
"devDependencies": {
"parcel": "^2.12.0",
"crypto-browserify": "^3.12.0",
// ... additional browserify polyfills
}
}// Microphone configuration
const microphoneStream = await webex.meetings.mediaHelpers.createMicrophoneStream({
echoCancellation: true, // Enable echo cancellation
noiseSuppression: true, // Enable noise suppression
});
// Camera configuration
const cameraStream = await webex.meetings.mediaHelpers.createCameraStream({
width: 640, // Video width
height: 480 // Video height
});const meetingOptions = {
mediaOptions: {
allowMediaInLobby: true, // Allow media before meeting starts
shareAudioEnabled: false, // Disable audio sharing
shareVideoEnabled: false, // Disable video sharing
localStreams: {
camera: cameraStream, // Local camera stream
microphone: microphoneStream // Local microphone stream
},
},
};-
Basic Functionality:
- Start the application and verify UI loads correctly
- Test with different destination formats
- Verify camera and microphone permissions
-
Meeting Flow:
- Create a meeting with a valid destination
- Check that self-view displays local video
- Verify remote media streams when another participant joins
- Test hang up functionality
-
Error Handling:
- Test with invalid destinations
- Verify error messages display correctly
- Check behavior when media permissions are denied
| Browser | Version | Support Status |
|---|---|---|
| Chrome | 90+ | ✅ Full Support |
| Firefox | 88+ | ✅ Full Support |
| Safari | 14+ | ✅ Full Support |
| Edge | 90+ | ✅ Full Support |
| Issue | Solution |
|---|---|
| Node version error | Ensure you're using Node.js 18.0.0 or later |
| Access token error | Replace YOUR_ACCESS_TOKEN with your actual token |
| Media permissions denied | Grant camera/microphone permissions in browser |
| Meeting creation fails | Verify destination format and network connectivity |
| Video not displaying | Check browser WebRTC support and media constraints |
The application includes debug logging enabled by default:
webex.config.logger.level = 'debug';Check the browser console for detailed SDK logs and error messages.
// Check if access token is properly set
if (myAccessToken === 'YOUR_ACCESS_TOKEN') {
alert('Make sure to update your access token in the index.js file!');
throw new Error('Make sure to update your access token in the index.js file!');
}
// Verify meeting registration
webex.meetings.register()
.catch((err) => {
console.error(err);
alert(err);
throw err;
});To see the full example code we have used here to start a meeting, check out the sample app in GitHub.
- Webex JavaScript SDK Documentation
- Webex Meetings API Guide
- Getting Started with Webex APIs
- Webex Developer Portal
We truly appreciate your contribution to the Webex Samples!
- Fork the repository
- Create a feature branch:
git checkout -b feature/meeting-enhancement - Commit changes:
git commit -am 'Add meeting feature' - Push to branch:
git push origin feature/meeting-enhancement - Submit a Pull Request
- Follow the existing code style and patterns
- Test with multiple browsers and destinations
- Update documentation for new features
- Ensure Node.js 18+ compatibility
This project is licensed under the Cisco Sample Code License - see the LICENSE file for details.
For technical support and questions:
- Issues: Submit via GitHub Issues
- SDK Documentation: Webex JavaScript SDK
- API Documentation: Webex Developer Portal
- Community: Webex Developer Community
Made with ❤️ by the Webex Developer Relations Team at Cisco
Note: This quick start is designed for development and testing purposes. For production applications, implement additional security measures, error handling, and user experience optimizations.