npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jitsi-fmtech

v1.0.7

Published

React Native SDK for Jitsi Meet.

Downloads

10

Readme

Jitsi Meet React Native SDK

Installation

Inside your project, run;

npm i jitsi-fmtech

If there are conflicts, you can use --force Additionally, if not already installed, some dependencies will need to be added.

This can be done by running the following script:

node node_modules/jitsi-fmtech/update_dependencies.js

This will check and update all your dependencies. After that you need to npm i, if some dependency versions were updated.

Because of SVG use in react native, you need to update metro.config your project's file:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {
      sourceExts,
      assetExts
    }
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  }
})();

iOS

Project Info.plist

  • Add a Privacy - Camera Usage Description
  • Add a Privacy - Microphone Usage Description

General

  • Signing & capabilites:
    • Add Background modes
      • Audio
      • Voice over IP
      • Background fetch

Run;

cd ios && pod install && cd ..

Android

  • In your build.gradle have at least minSdkVersion = 24

  • In android/app/src/debug/AndroidManifest.xml and android/app/src/main/AndroidManifest.xml, under the </application> tag, include

      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.CAMERA" />

    Services

    Screen share

  • Go to your MainApplication.java file and add:

    1. import com.oney.WebRTCModule.WebRTCModuleOptions; that comes from react-native-webrtc dependency.

    2. WebRTCModuleOptions options = WebRTCModuleOptions.getInstance(); instance it.

    3. options.enableMediaProjectionService = true; enable foreground service that takes care of screen-sharing feature.

  • Go to your android/app/src/main/AndroidManifest.xml, under the </application> tag and include

    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

If you want to test all the steps before applying them to your app, you can check our React Native SDK sample app here: https://github.com/jitsi/jitsi-meet-sdk-samples/tree/master/react-native

Using JWT tokens

  • If you are planning to use tokens or another domain, you can do that by updating the following props, as shown below.
  • For example:
  <JitsiMeeting
    room = { 'ThisIsNotATestRoomName' }
    serverURL = { 'https://meet.jit.si/' }
    token={ 'dkhalhfajhflahlfaahalhfahfsl' } />

Using custom overflow menu buttons

  • If you are planning to add custom overflow menu buttons, you can do that by updating the config prop, as shown below.
  • For example:
  <JitsiMeeting
    config = {{
        customToolbarButtons: [
            {
                icon: "https://w7.pngwing.com/pngs/987/537/png-transparent-download-downloading-save-basic-user-interface-icon-thumbnail.png",
                id: "btn1",
                text: "Button one"
            }, {
                icon: "https://w7.pngwing.com/pngs/987/537/png-transparent-download-downloading-save-basic-user-interface-icon-thumbnail.png",
                id: "btn2",
                text: "Button two"
            }
        ]
    }}
    room = { 'ThisIsNotATestRoomName' }
    serverURL = { 'https://meet.jit.si/' }
    token = { 'dkhalhfajhflahlfaahalhfahfsl' } />

For more details on how you can use React Native SDK with React Native app, you can follow this link: https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-react-native-sdk