> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Voice & Video Calling

> Add real-time voice and video calling to your apps in minutes with WebRTC-powered SDKs.

<div className="relative w-full flex items-center justify-center" style={{ height: '20rem', overflow: 'hidden' }}>
  <div className="absolute inset-0 bg-primary dark:bg-primary-light" style={{ opacity: 0.05 }} />

  <div style={{maxWidth: '70rem', marginLeft: 'auto', marginRight: 'auto', paddingLeft: '1.25rem', paddingRight: '1.25rem' }}>
    <Columns cols={2} className="items-center gap-x-12">
      <div className="flex flex-col justify-center h-full text-center md:text-left">
        <h1 className="text-gray-700 dark:text-white" style={{ fontSize: '2.2rem', fontWeight: '600' }}>Voice & Video Calling</h1>

        <p className="text-lg text-gray-600">
          Add high-quality, real-time voice and video calls to any app. Built on WebRTC with drop-in UI components.
        </p>
      </div>

      <div className="flex flex-col items-center justify-center h-full">
        <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/8YxyU34Gla1Pl9FC/images/voice-video-banner.png?fit=max&auto=format&n=8YxyU34Gla1Pl9FC&q=85&s=0d7b95214dd20554073218b52ee38111" alt="Voice & Video Calling UI Preview" className="w-full max-w-[380px]" width="864" height="713" data-path="images/voice-video-banner.png" />
      </div>
    </Columns>
  </div>
</div>

<div style={{marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto', marginRight: 'auto', paddingLeft: '1.25rem', paddingRight: '1.25rem' }}>
  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">What is CometChat Calls?</h2>
    <p className="text-gray-600 dark:text-gray-300 mb-4">The CometChat Calls SDK provides a complete voice and video calling solution built on WebRTC.</p>

    <div className="flex gap-3 mb-6">
      <a href="https://calls.cometchat.io/" target="_blank" className="inline-flex items-center px-4 py-2 rounded-lg bg-primary text-white font-medium hover:opacity-90 transition-opacity">
        Try Live Demo →
      </a>

      <a href="calls/platform/features" className="inline-flex items-center px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        View Features →
      </a>
    </div>
  </div>

  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">Choose Your Platform</h2>
    <p className="text-gray-600 dark:text-gray-300 mb-4">Get started with the Calls SDK on your preferred platform. Each SDK provides the same core calling features with platform-specific optimizations.</p>

    <AccordionGroup>
      <Accordion title="How It Works">
        <Steps>
          <Step title="Install the SDK">
            Add the Calls SDK to your project via npm, CocoaPods, Gradle, or pub.
          </Step>

          <Step title="Initialize & Authenticate">
            Configure with your App ID and Region, then log in users with their CometChat credentials.
          </Step>

          <Step title="Join a Call Session">
            Generate a session token and join—the SDK renders a complete call UI automatically.
          </Step>

          <Step title="Customize as Needed">
            Adjust layouts, controls, and styling to match your app's design.
          </Step>
        </Steps>
      </Accordion>

      <Accordion title="Why It's Great">
        <Steps>
          <Step title="Built-in UI">Pre-built call screens, controls, and participant views—no UI work required.</Step>
          <Step title="WebRTC Powered">Enterprise-grade media infrastructure handles all the complexity.</Step>
          <Step title="Cross-Platform Consistency">Same features and API patterns across all platforms.</Step>
          <Step title="Easy Integration">Get up and running in minutes with simple setup and clear documentation.</Step>
        </Steps>
      </Accordion>
    </AccordionGroup>

    <CardGroup cols={3}>
      <Card title="JavaScript" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/js.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=08c894e36fd80781724d8f03f25492c0" alt="JavaScript" />} href="/calls/javascript/overview">
        Vanilla JS or any web framework
      </Card>

      <Card title="React" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/react.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=6bea60b47fcd4ad888a2f5a84efffb3d" alt="React" />} href="/calls/javascript/react-integration">
        React web applications
      </Card>

      <Card title="Angular" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/angular.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=b3c6475460ffa2ddebacab53a50e6f09" alt="Angular" />} href="/calls/javascript/angular-integration">
        Angular web applications
      </Card>

      <Card title="Vue" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/i4Q5Nw9DEcclqV3C/images/icons/vuejs.svg?fit=max&auto=format&n=i4Q5Nw9DEcclqV3C&q=85&s=6889d6ac241c188364bceacf853e0b6b" alt="Vue" />} href="/calls/javascript/vue-integration">
        Vue.js web applications
      </Card>

      <Card title="Next.js" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/nextjs.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=4bff925c1d1868ff26bda709fd70bd25" alt="Next.js" />} href="/calls/javascript/nextjs-integration">
        Next.js with SSR support
      </Card>

      <Card title="Ionic" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/ionic.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=a0b93212e585a0261921937872afa76b" alt="Ionic" />} href="/calls/javascript/ionic-integration">
        Ionic hybrid mobile apps
      </Card>

      <Card title="React Native" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/react.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=6bea60b47fcd4ad888a2f5a84efffb3d" alt="React Native" />} href="/calls/react-native/overview">
        Cross-platform mobile apps
      </Card>

      <Card title="iOS" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/i4Q5Nw9DEcclqV3C/images/icons/swift.svg?fit=max&auto=format&n=i4Q5Nw9DEcclqV3C&q=85&s=f3780f0cb5f25c0882fc8cc8398b63b5" alt="iOS" />} href="/calls/ios/overview">
        Native Swift/Objective-C apps
      </Card>

      <Card title="Android" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/android.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=d79809515a64e69d59940732f1e896ca" alt="Android" />} href="/calls/android/overview">
        Native Kotlin/Java apps
      </Card>

      <Card title="Flutter" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/tnt3e6K0Qzy3Jll4/images/icons/flutter.svg?fit=max&auto=format&n=tnt3e6K0Qzy3Jll4&q=85&s=061017fcb496777862d4400ce2eaa755" alt="Flutter" />} href="/calls/flutter/overview">
        Cross-platform with Dart
      </Card>
    </CardGroup>
  </div>

  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">Sample Apps</h2>
    <p className="text-gray-600 dark:text-gray-300 mb-4">Explore our open-source sample apps to see the Calls SDK in action. Clone, run, and customize for your needs.</p>

    <CardGroup cols={3}>
      <Card title="JavaScript" icon="github" href="https://github.com/cometchat/calls-sdk-javascript">
        Web calling with React, Vue, and vanilla JS
      </Card>

      <Card title="Android" icon="github" href="https://github.com/cometchat/calls-sdk-android">
        Native Android with Kotlin/Java
      </Card>

      <Card title="iOS" icon="github" href="https://github.com/cometchat/calls-sdk-ios">
        Native iOS with Swift
      </Card>

      <Card title="React Native" icon="github" href="https://github.com/cometchat/calls-sdk-react-native">
        Cross-platform mobile app
      </Card>

      <Card title="Flutter" icon="github" href="https://github.com/cometchat/calls-sdk-flutter">
        Cross-platform with Dart
      </Card>
    </CardGroup>
  </div>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.