GithubHelp home page GithubHelp logo

agoraio-community / videouikit-reactnative Goto Github PK

View Code? Open in Web Editor NEW
93.0 11.0 43.0 4.67 MB

A React Native package to simply integrate Agora Video Calling or Live Video Streaming to your app with just a few lines of code.

License: MIT License

JavaScript 0.37% TypeScript 99.63%
react-native ios android video-streaming video-conferencing rtmp webrtc

videouikit-reactnative's People

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  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  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  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

videouikit-reactnative's Issues

Getting Black screen with icons

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [Honor 9n and emulator]
  • OS:
    • Android
  • OS Version: [Android 10]

App Info

  • Type:
    • React Native CLI
  • CLI Version: [0.66.4]

Describe the issue
LOG Running "AgoraSample" with {"rootTag":51}
LOG Attempted join: TestCalling
LOG You can use the cameras & mic
LOG {"_listeners": Map {}}
LOG Running "AgoraSample" with {"rootTag":61}
LOG Attempted join: TestCalling
LOG You can use the cameras & mic
LOG {"_listeners": Map {}}

Screenshot_1643697464

ERROR 1017 on EXPO

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone6]
  • OS:
    • [] IOS
    • Android
  • OS Version: [11]

App Info

  • Type:
    • [] React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: [SDK 45]

Describe the issue
Hi! I'm using VideoUIKit-React Native.
Following the instructions with only Agora Video Code was working fine after doing expo run:android, but when I move the code to another screen.. there was an error. Seems to connect fine, but an Error: 1017 appears. Micro and Camera permissions are asked before open video.

To Reproduce
Steps to reproduce the behavior:

  1. Inlcude Video not in main screen.
  2. Run expo run:android

Screenshots
image

Security Issues from Dependencies

Target device: (Note: simulators are not supported for running the UIKit)
All

App Info (Note: Expo CLI managed workflow is not supported by the UIKit)
N/A

Describe the issue
There are security flags on this package. Specifically:

high      Lodash4.17.19->4.17.21
high      ajv6.11.0->v8.5.0
high      y18n4.0.0->y18n-v4.0.2
medium     hosted-git-infov2.8.5->v4.0.2
medium    mikaelbr/node-notifierv5.4.3->v9.0.1
medium    yargs-parserv13.1.1->20.2.7

To Reproduce
Some of the security issues are shown here
Others flagged by Black Duck Projects as seen below.

Screenshots
8549EC33787A4CB7B06D6BAC65FAA8E7

Explore removing typeguards

TypeScript 4.6 adds control flow analysis for Destructured Discriminated Unions. link

We can potentially explore this instead of the type guard system currently used in the reducer

rtcProps token

Add token param on rtcProps no Readme

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone6]
  • OS:
    • IOS
    • Android
  • OS Version: [e.g. 22, 14.1]

App Info (Note: Expo CLI managed workflow is not supported by the UIKit)

  • Type:
    • React Native CLI
    • Expo CLI - bare workflow
  • CLI Version: [e.g. 22]

Describe the issue
A clear and concise description of what the issue is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. See error

Screenshots
If applicable, add screenshots to help explain your problem.

activeSpeaker not working

Hye dev, we are implementing activeSpeaker functionality in our app. when we set activeSpeaker true then its not working.

We want switch host automatically large view when It start talking.

RtcConnectionData uid doesn't accept string

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: iPhone 11 Pro
  • OS:
    • IOS
    • Android
  • OS Version: 16.0

App Info

  • Type:
    • React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: SDK 45

Describe the issue
The TypeScript typings doesn't allow to pass uid as string, but I'm using string user ids in my application and the server signs the token with a string uid.

To Reproduce

<AgoraUIKit
  connectionData={{
    appId: '...',
    channel: '...',
    rtcToken: '...',
    // HERE IS THE ERROR
    rtcUid: 'my string user id'
  }}
/>

Screenshots
n/a

No podspec file was found.

Hey, thanks for the great work!

Whenever I pod install inside ios/ I get this warning:

[!] use_native_modules! skipped the react-native dependency 'agora-rn-uikit'. No podspec file was found.
    - Check to see if there is an updated version that contains the necessary podspec file
    - Contact the library maintainers or send them a PR to add a podspec. The react-native-webview podspec is a good example of a package.json driven podspec. See
    https://github.com/react-native-community/react-native-webview/blob/master/react-native-webview.podspec
    - If necessary, you can disable autolinking for the dependency and link it manually. See
    https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#how-can-i-disable-autolinking-for-unsupported-library
react-native info

System:
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.21.1 - ~/n/bin/yarn
npm: 6.4.1 - ~/n/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.7.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.0
System Images: android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Android TV Intel x86 Atom, android-28 | China version of Wear OS Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
Android NDK: 19.2.5345600
IDEs:
Android Studio: 3.4 AI-183.5429.30.34.5452501
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_60 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Thanks.

Task :app:processDEbugMainManifest FAILED

Target device: RedMi Note 10 Pro

  • Device: RedMi Note 10 Pro

  • OS: Android 11

  • Type: React Native

Describe the issue
I set up new react native project using npx react-native init MyProject and after installing react native agora and ui kit i get this error when building.

Screenshots

Screenshot 2022-07-05 at 11 01 01

Agora Would Let App Build

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone6]
  • OS:
    • [] IOS
    • [X ] Android
  • OS Version: [e.g. 22, 14.1]

App Info

  • Type:
    • React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: [e.g. 22]

Describe the issue

[stderr] * What went wrong:
[stderr] Could not determine the dependencies of task ':app:lintVitalRelease'.
[stderr] > Could not resolve all artifacts for configuration ':app:debugCompileClasspath'.
[stderr]    > Could not find native-full-sdk-3.5.2.jar (com.github.agorabuilder:native-full-sdk:3.5.2).
[stderr]      Searched in the following locations:
[stderr]          https://www.jitpack.io/com/github/agorabuilder/native-full-sdk/3.5.2/native-full-sdk-3.5.2.jar

To Reproduce
Steps to reproduce the behavior:

  1. Trying to run build the app with npx react-native run-android and bundle the app with ./gradlew release
  2. Click on '....'

Screenshots
If applicable, add screenshots to help explain your problem.
LONG

How to end call to reciever when sender Ends up the call

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone6]
  • OS:
    • IOS
    • Android
  • OS Version: [e.g. 22, 14.1]

App Info

  • Type:
    • React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: [e.g. 22]

Describe the issue
A clear and concise description of what the issue is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. See error

Screenshots
If applicable, add screenshots to help explain your problem.

Inproper setState while executing Endcall Call Back

I am getting the below error while creating a minimal example shown in your example.

Cannot update a component <Call /> while rendering a different component <RtcConfigure />. To locate the bad setState() call insideRtcConfigure, follow the stack trace ...

const Call = ({ CK }) => {
  const [videoCall, setVideoCall] = useState(true);

  const callbacks = {
    EndCall: () => {
      //   CK.endCall();
      setVideoCall(false);
    },
  };

  const rtcProps = {
    appId: "###########################",
    channel: "test",
  };

  const styleProps = {
    UIKitContainer: { height: "100%" },
    // localBtnContainer: { display: "none" },
    videoMode: {
      max: VideoRenderMode.Hidden,
      min: VideoRenderMode.Hidden,
    },
  };

  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}
    >
      <AgoraUIKit
        rtcProps={rtcProps}
        styleProps={styleProps}
        mode={1}
        callbacks={callbacks}
      />
    </SafeAreaView>
  );
};
`

RtcEvents

Hello everyone,

can anyone help me to implement the RtcEvents listner.
For eg :- When particular users join or end call, some warning and error issues, etc.

How can I implement that? There is no documation for this .

Video is not showing on an ios device

I'm running the basic example with the component. The 5 control buttons are displayed at the bottom, but the video is not displayed & the camera is not turned on.
Screenshot 2020-09-12 at 12 59 45 PM

Here's what I see on the log:

2020-09-12 13:12:53.592 xcodebuild[12337:2070883] [MT] PluginLoading: Required plug-in compatibility UUID C80A9C11-3902-4885-944E-A035869BA910 for plug-in at path '~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/Unity4XC.xcplugin' not present in DVTPlugInCompatibilityUUIDs

2020-09-12 13:12:53.592 xcodebuild[12337:2070883] Failed to load plugin at: /Users/trisianto/Library/Application Support/Developer/Shared/Xcode/Plug-ins/Unity4XC.xcplugin, skipping.  Reason for failure: *** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]

how to hide controls of remote user audio and video

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: Redmi note 9 pro

  • OS:

    • [X ] Android
  • OS Version: 22

App Info

  • Type:
    • React Native CLI

Describe the issue
how to Remove the remote user audio and video controls in agora ui Kit ,

To Reproduce
Steps to reproduce the behavior:
install ui kit
create a rtc token and join in a channel

ERROR Invariant Violation: Module AppRegistry is not a registered callable module

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone6]
  • OS:
    • IOS
    • Android
  • OS Version: [e.g. 22, 14.1]

App Info (Note: Expo CLI managed workflow is not supported by the UIKit)

  • Type:
    • React Native CLI
    • Expo CLI - bare workflow
  • CLI Version: [e.g. 22]

Describe the issue
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

To Reproduce
Steps to reproduce the behavior:

  1. Download the sample codes
  2. execute [yarn]
  3. I connected android devices on the PC
  4. I updated my appId on ~/src/PropsContext.tsx
  5. execute [npm start] on terminal#1
  6. execute [npm run android] on terminal#2
  7. I got BUILD SUCCESSFULL on terminal#2
  8. But when the app played on the android device, I always got the below error.

Screenshots
스크린샷 2021-06-21 오전 11 52 09

Component not working at all.

import AgoraUIKit from 'agora-rn-uikit';
//Channel name is passed via props
interface IVideoConferenceProps {
  channel:string
}
const App = (props:IVideoConferenceProps) => {
  const [videoCall, setVideoCall] = useState(true);
  const rtcProps = {
    appId: 'a0ebf066528c4d37816579ba101e8fda',
    channel: 'test',
  };
  const callbacks = {
    EndCall: () => setVideoCall(false),
  };
  return videoCall ? (
    <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
  ) : (
    <></>
  );
};

export default App;

[Thu Aug 06 2020 13:50:22.921] ERROR TypeError: undefined is not an object (evaluating 'o.Types.VideoRenderMode')
[Thu Aug 06 2020 13:50:22.922] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Thu Aug 06 2020 13:50:22.922] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

callbacks for fullscreen, mute audio/video not getting executed.

Callback functions which I am passing for fullscreen, mute audio/video buttons are not getting executed.
This is the callbacks object I am passing -
{
onEndCall: () => { this.setState({ videoCall: false }) }
onFullScreen: ()=>{ this.onFullScreen()}
}
The callback for endcall is working fine but FullScreen is not getting executed. Same is the issue for mute audio/video buttons.

Can't find variable mode, role

Newbie here.

Below is my code. I want to create a live stream using the plugin but when I use mode: mode.LiveBroadcasting it says variable mode not found. I read your wiki and used the rtcProps.

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

const App = () => {
const [videoCall, setVideoCall] = useState(true);
const rtcProps = {
appId: 'APP_ID,
channel: 'test',
mode: mode.LiveBroadcasting,
role: role.Audience,
uid: 1,
};
const callbacks = {
EndCall: () => setVideoCall(false),
};
return videoCall ? (

) : (
<></>
);
};

export default App;`

Callback not working

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: xiaomi note 9 pro max
  • OS:
    • [] IOS
    • Android
  • OS Version:22

App Info

  • Type:
    • React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: [0.69]

Describe the issue
RtC call backs are not working with rtm login error

To Reproduce
Steps to reproduce the behavior:
used the same code mentioned in the documentations

LOGS:
Attempted join:
LOG UIkit enabling dual stream undefined
LOG Login to RTM
LOG join RTM
LOG [Error: CHANNEL_MESSAGE_ERR_USER_NOT_LOGGED_IN]
LOG Login to RTM
LOG join RTM
LOG Login to RTM
LOG join RTM
LOG LEAVE_CHANNEL_MESSAGE_ERR_USER_NOT_LOGGED_IN

and also how can i remove the names under button icons

android - camera no working

I install package and rebuild
but, on android camera is not work, only have black screen.
please support for me.
thanks

Camera and micro don't work

Hi @EkaanshArora

I have built and can ran the project. The permission for camera, micro are granted but an error 109 occurred in the console
The camera and micro don't work, the screen always black as screenshot below

image

Can you help ?
Many thanks

Video not covering whole screen

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: Redmi note 9 pro max
  • OS:
    • [] IOS
    • Android
  • OS Version: [e.g. 29] 29

App Info

  • Type:
    • React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: [e.g. .63.3]

Describe the issue
A clear and concise description of what the issue is.
i have used agora kit in absolute positioned view and the local video component is not filling the screen for pinned view

To Reproduce
Steps to reproduce the behaviour:
create a new project add a animated view with absolute positioning , import agora ui kit with default props

Screenshots
If applicable, add screenshots to help explain your problem.
attached screenshots of minimised mode and maximised mode for reference
WhatsApp Image 2022-05-25 at 7 10 42 PM (1)
WhatsApp Image 2022-05-25 at 7 10 42 PM

entering the call with muted audio and camera off

Hello, could you let me know if it is possible to enter a video call with the audio muted and the camera turned off and so be only by the user's consent to want to activate them after the call has been initialized. I thank you for your attention!

username is not displayed when passing token to connectionData

Currently I am having 1 issue about aogra-ui-kit.
If I pass tokenUrl into connectionData, username's displayed.
If I pass token into connectionData, username's not displayed anymore.
I checked in source code, and I see when I pass tokenUrl, then 2 events "MessageReceived" and "ChannelMessageReceived" will be listened, and username will be set,
else if I pass token, then 2 events will be not listened.

Path in this image: agora-rn-uikit/src/RtmConfigure.tsx
it's in init() function
image

Has anyone come across this situation?
This is the version I used:

  • "react-native-agora": "^3.5.3"
  • "agora-react-native-rtm": "^1.5.0"
  • "agora-rn-uikit": "^4.0.0"

I need share screen in my app

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone6]
  • OS:
    • IOS
    • Android
  • OS Version: [e.g. 22, 14.1]

App Info

  • Type:
    • React Native CLI
    • Expo CLI (using custom development clients)
  • CLI Version: [e.g. 22]

Describe the issue
I need share screen in my app
someone has been able to share screen using the Agora UIKit

Displaying multiple SurfaceView of same UID

is is possible to render multiple surface views of the same UID? For example if using a gridview can you popup a modal with the same surface views? at the moment only the newest rendered surface-views actually show the video, the others go grey

Local control icons not loading on iOS

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [e.g. iPhone7 plus]
  • OS:
    • IOS
  • OS Version: [14.3]

App Info (Note: Expo CLI managed workflow is not supported by the UIKit)

  • Type:
    • React Native CLI
  • CLI Version: [2.0.1]

Describe the issue
Local control icons sometimes take up to 1 minute to show up

To Reproduce
Steps to reproduce the behaviour:

  1. Place call
  2. Observe Local control icons not loading on iOS

Screenshots
image-2021-08-04-17-34-57-930

Event Listeners

  • Is there a way to listen to events such as one of the users on a one on one video call leaves?
  • Also is there an option to show only Remote Stream?

Showing Blank screen

Target device: (Note: simulators are not supported for running the UIKit)

  • Device: [ iPhone 8 plus]
  • OS:
    • [IOS] IOS
    • Android
  • OS Version: [14.5]

App Info (Note: Expo CLI managed workflow is not supported by the UIKit)

  • Type:
    • [Yes] React Native CLI
    • Expo CLI - bare workflow
  • CLI Version: [e.g. 22]

Describe the issue
showing blanks screen with error here is screenshot

Screenshots
Screenshot 2021-05-27 at 5 20 25 PM

Example SurfaceView Error: EXPO DEV CLIENT

image
image

packages:
"react": "18.0.0",
"react-native": "0.69.6",
"expo": "46.0.13"
"agora-react-native-rtm": "^1.5.0",
"react-native-agora": "^4.0.0",
"agora-rn-uikit": "^4.0.0",
"expo-dev-client": "~1.2.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.