Code Monkey home page Code Monkey logo

pili-streaming-react-native's Introduction

Pili 推流 SDK for react-native

概述

pili-streaming-react-native 是支持 React Native 项目添加直播推流功能的 SDK,底层基于 PLDroidMediaStreaming (Android) 和 PLMediaStreamingKit(iOS) 实现。

安装

1. 通过 npm 安装依赖包
npm i --save pili-streaming-react-native
2. 添加 android 支持
  1. 在 android 项目根目录下的 settings.gradle 中添加如下代码:

    include ':pili-streaming-react-native'
    project(':pili-streaming-react-native').projectDir = new File(settingsDir, '../node_modules/pili-streaming-react-native/android/pili-react-native')
  2. 在 android 项目的 app 目录下 build.gradle 文件中添加如下依赖:

    implementation "com.facebook.react:react-native:+" // From node_modules.
    implementation project(':pili-streaming-react-native')
  3. ReactApplication 的子类中定义 ReactNativeHost 对象,并重写其 getPackages 方法,将 PiliPackage 对象添加进去,示例代码如下:

    private final ReactNativeHost mReactNativeHost =
          new ReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
              return BuildConfig.DEBUG;
            }
    
            @Override
            protected List<ReactPackage> getPackages() {
              @SuppressWarnings("UnnecessaryLocalVariable")
              List<ReactPackage> packages = new PackageList(this).getPackages();
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // packages.add(new MyReactNativePackage());
              packages.add(new PiliPackage());
              return packages;
            }
    
            @Override
            protected String getJSMainModuleName() {
              return "index";
            }
          };
3. 添加 ios 支持

环境配置:Cocoapod 安装教程

  1. 打开 ios 文件夹,在 Podfile 文件中添加

    pod 'pili-react-native', :path => '../node_modules/pili-streaming-react-native/ios/pili-react-native'
    
  2. 终端运行

    cd ../ios
    pod install
  3. 打开 YourPorjectName.xcworkspace (这里请注意是打开 .xcworkspace!请确认)

  4. 运行 project (Cmd+R)

注意: 如果是 iOS 10 以上需要在 iOS 项目中的 info.plist 文件里额外添加如下权限:

<key>NSCameraUsageDescription</key>
<string>cameraDesciption</string>

<key>NSContactsUsageDescription</key>
<string>contactsDesciption</string>

<key>NSMicrophoneUsageDescription</key>
<string>microphoneDesciption</string>

使用

import { consts, Streaming } from './pili-react-native'

function Foo() {
  return (
    <Streaming
      rtmpURL="..."
      profile={{
        videoStreamingSetting: {
          fps: 30,
          bps: 800 * 1024,
          maxFrameInterval: 60
        },
        audioStreamingSetting: {
          rate: 44100,
          bitrate: 96 * 1024,
        },
        encodingSize: consts.videoEncoding480
      }}
    />
  )
}

更多高级功能配置,可以参考 Demo

pili-streaming-react-native's People

Contributors

boleliu avatar kevinhuo avatar kivenhaoyu avatar nighca avatar

Watchers

 avatar

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.