Giter Club home page Giter Club logo

webrtcapp's Introduction

WebRTCapp

Technologies WebRTCapp is a small elaboration that is part of my final degree project. This app aims to be a small video conference app created using mainly WebRTC technology. With it, you can make calls though a web socket connection. I already implemented something similar but easier connecting to a webSocket mocked server. You can find the code here and a brief post explaining the concept here

OpenVidu

The app was built based on connecting to OpenVidu , an open source project that provides several libraries implementations to create video conference apps. For more info on whats the project about I highly recommend you to go and check the following links

WebRTCApp

Libraries in the project

WebRTC Library

You can find the code for the WebRTC library right on WebRTC's organization web. I wrote a briefly post on how WebRTC works internally that you can find here. On WebRTC's web you will find how to compile the binaries and generate the library but that for me wasn't that easy. So I have you solutions for you, this blog post that aims to explain how to compile that library.

ButterKnife Library

This library is really useful to bind views and it really helps us working with views in Android. The view can be injected directly on execution so you can directly use it right when you create the view. Link: ButterKnife

WebSocket Library

This library is a WebSocket client designed for Java. It implemented the protocol definition allowing us to use a WebSocket without having to implement the whole RFC. Link: WebSocket Library

How to download the project and run it

If you want to run the project locally on your computer you will need Android Studio with an emulator. You can clone the project using

git clone https://github.com/sergiopaniego/WebRTCapp

opening it on Android Studio importing it and running it with the emulator that comes with it. As I mentioned above, the app is part of a final degree project and for that reason the address that comes built in the app points to https://demos.openvidu.io/basic-videoconference/. This URL hosts an OpenVidu's demo app that you can use to test that everything works as expected.

Development Environment

How did I developed the app? Tools I used

Android Studio 3.0.1

As my main IDE I’ve been using Android Studio 3.0.1, the latest version of the environment developed by Google and JetBrains to build Android apps. This IDE is built on JetBrain’s Intellij IDEA software and comes with all the tools needed to develop Android apps, from the native libraries including Kotlin to an emulator Android Studio's link.

Android Emulator

To develop the app, I needed an emulator to check that everything was running as expected. I chose a Pixel XL emulator with API 25 to run it. The emulator that comes integrated on the IDE is pretty good and there is no need to choose another one for the development I wanted.

Android device

An emulator is really helpful but a real device is what you really need to check that everything is going well. To help me with this part of the development, I used a Samsung Galaxy S6 device so it really helped me finding bugs.

Sonar

Sonar is a tool that inspects your code to perform an static analysis that gives you a report on how your code health is. I have used it to try to keep my code clean Sonar Qube's web

App Permissions

The first time you open the app, it will ask you to give some permissions to the app. The permissions and the reason why we need the is the following:

  • Camera: This permission is compulsory because it wouldn’t make any sense to make a video conference app without using the camera, would it?
  • Record Audio: We need this permission to allow you to share your beautiful voice with the crowd on the other side of the conversation.

Understanding the code

Scheme The code is divided in some packages to make the code easier to mantain.

  • CustomWebSocketListener: This class implements WebSocketListener. As its name suggest, this class responsibility is to listen what comes to the socket we have. It handles the messages sent by the server
  • PeersManager: Its purpose is to manage the different peers that make a conversation
  • WebSocketTask: The negotiation with the server takes place in this class
  • RemoteParticipant: The participants info goes here
  • VideoConferenceActivity: This is the only Android Activity that the app has. It shows you the menu and the different participants camera (yours too)

The WebSocket Address comes from

   String sessionName = session_name.getText().toString();
   String participantName = participant_name.getText().toString();
   String socketAddress = socket_address.getText().toString();

socket_address represents the editText field you can fill on the main screen. participant_name the name you give to the participant and session_name the session name. This 3 fields are used to complete the address used to connect to the WebScoket.

   peersManager.setWebSocket(new WebSocketFactory().createSocket(socketAddress));
   peersManager.getWebSocket().connect();

In this part of the code is where the connecting happens, using the address that is built using the fields above.

Once the connection is established, you need to join a room, what it's make as follows

    Map<String, String> joinRoomParams = new HashMap<>();
    joinRoomParams.put("dataChannels", "false");
    joinRoomParams.put(JSONConstants.METADATA, "{\"clientData\": \"" + participantName + "\"}");
    joinRoomParams.put("secret", MY_SECRET);
    joinRoomParams.put("session", baseAddress + sessionName);
    joinRoomParams.put("token", token);
    sendJson(websocket, "joinRoom", joinRoomParams);

Using a JSON using RPC 2.0 with joinRoom method and the params that are shown here you can connect to the room Same process to leave the room, you just have to send

    webSocketAdapter.sendJson(webSocket, "leaveRoom", new HashMap<String, String>());

a JSON RPC 2.0 with the method leaveRoom and empty params.

webrtcapp's People

Contributors

sergiopaniego avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

webrtcapp's Issues

Coturn Server

I have Coturn Server and Openvidu server in Public network,but my client in private network,what's should I do?How do I configure coturn server on the client side?

openvoidu Initialization problem

No implementation found for void org.webrtc.PeerConnectionFactory.initializeAndroidGlobals(android.content.Context, boolean) (tried Java_org_webrtc_PeerConnectionFactory_initializeAndroidGlobals and Java_org_webrtc_PeerConnectionFactory_initializeAndroidGlobals__Landroid_content_Context_2Z)

As soon as I run it, I will report the above error. What should I do to solve it?

Android And Web

I want Android and web real-time video, but no matter which side has not received the other party's video.server.key in assets,Does the server.key need to be configured in the project?where configured?

Facing issue on connection with Android App.

Hi,
I am facing connection with Android app
I am getting the view of my video one side only other side I am unable getting.
below I attached the snapshot of my error, please give solution
Screenshot_2019-08-13-18-37-50-10_7334465336dbfebbce261408abc52d3a

Thank you

How do i support Screen Sharing?

OpenVidu supports screensharing by sending screen as videostream is it possible to add this ?
can you point me in the right direction?

stun

hello,I don't want to use your “stun:stun.l.google.com:19302”,I have a myself coturn,What should I do?

Facing issue on connection in Android App.

I have set up the openvidu server locally in windows. I followed the all steps and I found the wss link at my command prompt. I put that link into the Android app but facing the issue. I am posting the screenshots below:

https://firebasestorage.googleapis.com/v0/b/gotravels-b42e2.appspot.com/o/device3.png?alt=media&token=87f786b6-4586-4a38-a88c-8b00487820ca

https://firebasestorage.googleapis.com/v0/b/gotravels-b42e2.appspot.com/o/device_ss1.png?alt=media&token=55d3effd-18cf-45ea-a369-49fbf9aeda56

I'm very new to this please guide me where I'm doing wrong. Thank you.

Not found assets folder

I not found assets folder and server.key in you project.I create a assets folder in main folder

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.