Code Monkey home page Code Monkey logo

flutter1on1videocall's Introduction

Flutter Video Call: 1 on 1 Video Call in Flutter

Presentation

Link:

Steps

Create a new Flutter Project:

Clear out code

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(const MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  const MyApp({Key? key}) : super(key: key);  
  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter Demo',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: const HomePage(),  
    );  
  }  
}

Define a HomePage Widget It is a stateful widget and renders a view on screen which for now returns empty containers.

  
class HomePage extends StatefulWidget {  
  const HomePage({Key? key}) : super(key: key);  
  
  @override  
  _HomePageState createState() => _HomePageState();  
}  
  
class _HomePageState extends State<HomePage> {  
  late int _remoteUid;  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Video Call in Flutter'),  
      ),  
      body: Stack(  
        children: [  
          Center(  
            child: _renderRemoteVideo(),  
          ),  
          Align(  
            alignment: Alignment.topLeft,  
            child: Container(  
              width: 100,  
              height: 100,  
              child: Center(  
                child: _renderLocalPreview(),  
              ),  
            ),  
          )  
        ],  
      ),  
    );  
  }  
  
  Widget _renderLocalPreview(){  
    return Container();  
  }  
  
  Widget _renderRemoteVideo(){  
    if(_remoteUid != null){  
      return Container();  
    }  
    else {  
      return Text(  
        'User will appear here!',  
        textAlign: TextAlign.center,  
      );  
    }  
  }   
}

Agora

Create a Agora.io Account

Head over to: https://console.agora.io/

Create a New project

Get an App id and Temporary Token

const appId = "";  
const token = "";

Add and import packages for integration in Flutter to pubspec.yaml

agora_rtc_engine: ^4.0.1
permission_handler: ^8.0.0

Import the packages to main.dart

import 'package:permission_handler/permission_handler.dart';  
import 'package:agora_rtc_engine/rtc_engine.dart';

Define the engine RtcEngine _engine;

Initialise Agora by creating a new function and calling it in initState()

@override  
void initState() {  
  initForAgora();  
  super.initState();  
}  
  
Future<void> initForAgora() async {  
  await [Permission.camera, Permission.microphone].request();  
    
  _engine = await RtcEngine.createWithConfig(RtcEngineConfig(appId));  
    
  await _engine.enableVideo();  
    
  _engine.setEventHandler(  
    RtcEngineEventHandler(  
      joinChannelSuccess: (String channel, int uid, int elapsed){  
        print("Local User $uid joined");  
      },  
      userJoined: (int uid, int elapsed){  
        print("Remote User $uid joined");  
        setState(() {  
          _remoteUid = uid;  
        });  
      },  
      userOffline: (int uid, UserOfflineReason reason){  
        print("Remote User $uid left channel");  
        setState(() {  
          _remoteUid = null;  
        });  
      }  
    )  
  );  
    
  await _engine.joinChannel(token, "channelname", null, 0);  
}

Modify the views

Add imports

import 'package:agora_rtc_engine/rtc_local_view.dart' as RtcLocalView;  
import 'package:agora_rtc_engine/rtc_remote_view.dart' as RtcRemoteView;

Modify Functions

Widget _renderLocalPreview(){  
  return RtcLocalView.SurfaceView();  
}  
  
Widget _renderRemoteVideo(){  
  if(_remoteUid != null){  
    return RtcRemoteView.SurfaceView(uid: _remoteUid,);  
  }  
  else {  
    return Text(  
      'User will appear here!',  
      textAlign: TextAlign.center,  
    );  
  }  
}

Phone Screenshot

flutter1on1videocall's People

Contributors

adityathakurxd avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

flutter1on1videocall's Issues

FAILURE: Build failed with an exception.

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':app:mergeDebugAssets'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
Could not find com.github.agorabuilder:native-full-sdk:3.4.2.
Searched in the following locations:
- https://dl.google.com/dl/android/maven2/com/github/agorabuilder/native-full-sdk/3.4.2/native-full-sdk-3.4.2.pom
- https://repo.maven.apache.org/maven2/com/github/agorabuilder/native-full-sdk/3.4.2/native-full-sdk-3.4.2.pom
- https://storage.googleapis.com/download.flutter.io/com/github/agorabuilder/native-full-sdk/3.4.2/native-full-sdk-3.4.2.pom
- https://jcenter.bintray.com/com/github/agorabuilder/native-full-sdk/3.4.2/native-full-sdk-3.4.2.pom
Required by:
project :app > project :agora_rtc_engine

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

BUILD FAILED in 5s
Exception: Gradle task assembleDebug failed with exit code 1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.