Add real-time video chat to your app with only a few lines of code

<script src="agora-uikit.js"></script>
<agora-react-web-uikit
     style="width: 100%; height: 100vh; display: flex;"
     appId="<YOUR APP ID>"
     channel="main"
  />

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val agView = AgoraVideoViewer(
      this, AgoraConnectionData("my-app-id")
    )
    val layout = FrameLayout.LayoutParams(
      FrameLayout.LayoutParams.MATCH_PARENT,
      FrameLayout.LayoutParams.MATCH_PARENT
    )
    this.addContentView(agView, layout)
    agView!!.join("test", role=Constants.CLIENT_ROLE_BROADCASTER)
  }
}

import UIKit
import AgoraUIKit_iOS

class ViewController: UIViewController {

  var agoraView: AgoraVideoViewer!
  override func viewDidLoad(){
    super. viewDidLoad()

    self.agoraView = AgoraVideoViewer(
      connectionData: AgoraConnectionData(
        appId: «#Agora App ID#>
        appToken: <#Agora Token or nil#>

       )
     )

    // frame the view
    self.view.addSubview(agora view)
    agoraView.frame = self.view.bounds
    agoraView. autoresizingMask = [. flexibleWidth, .flexibleHeight]

    // Set the layout style (default .grid)
    agoraView/style = .grid // or .floating

    // join the channel "test"
    agoraView.join(channel: "test", as: .broadcaster)
  }
}

import 'package:agora_uikit/agora_uikit.dart';
import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  final AgoraClient client = AgoraClient(
    agoraConnectionData: AgoraConnectionData(
      appId: "<--Add your App Id here-->",
      channelName: "test",
    ),
    enabledPermission: [
      Permission.camera,
      Permission.microphone,
    ],
  );
 
  @override
  void initState() {
    super.initState();
    initAgora();
  }
 
  void initAgora() async {
    await client.initialize();
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Agora UIKit'),
          centerTitle: true,
        ),
        body: SafeArea(
          child: Stack(
            children: [
              AgoraVideoViewer(
                client: client,
              ),
              AgoraVideoButtons(
                client: client,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import React, {useState} from 'react';
import AgoraUIKit from 'agora-rn-uikit';

const App = () => {
  const [videoCall, setVideoCall] = useState(true);
 const connectionData = {
    appId: '<Agora App ID>',
    channel: 'test',
  };
  const rtcCallbacks = {
    EndCall: () => setVideoCall(false),
  };
  return videoCall ? (
    <AgoraUIKit connectionData={connectionData} rtcCallbacks={rtcCallbacks} />
  ) : (
    <Text onPress={()=>setVideoCall(true)}>Start Call</Text>
  );
};