React Native RTMP 直播流客户端-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00411/article/details/147382581

React Native RTMP 直播流客户端

api.video-reactnative-live-stream React Native RTMP live stream client. Made with ♥ by api.video 项目地址: https://gitcode.com/gh_mirrors/ap/api.video-reactnative-live-stream

1. 项目介绍

本项目是一个用于在智能手机相机上广播RTMP直播流的React Native模块。它允许开发者轻松地将实时视频直播功能集成到他们的应用程序中。该模块基于开源的StreamPack和HaishinKit库，支持高分辨率直播，并提供了一系列灵活的配置选项。

2. 项目快速启动

安装

首先，确保你的开发环境中已经安装了React Native。然后，你可以使用以下命令安装本模块：

npm install @api.video/react-native-livestream
# 或者
yarn add @api.video/react-native-livestream

权限

Android

在Android应用中，以下权限已经包含在库的清单文件中，并在运行时请求：

android.permission.RECORD_AUDIO
android.permission.CAMERA
android.permission.INTERNET

对于PlayStore，你需要在AndroidManifest.xml中声明以下功能：

<manifest>
  <uses-feature android:name="android.hardware.camera" android:required="true" />
  <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
</manifest>

iOS

在iOS中，你需要在Info.plist中添加相机和麦克风的用途描述：

<key>NSCameraUsageDescription</key>
<string>你的应用程序使用相机的目的描述</string>
<key>NSMicrophoneUsageDescription</key>
<string>你的应用程序使用麦克风的目的描述</string>

代码示例

以下是一个基本的React Native组件，用于启动和停止直播流：

import React, { useRef, useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { ApiVideoLiveStreamView } from '@api.video/react-native-livestream';

const App = () => {
  const ref = useRef(null);
  const [streaming, setStreaming] = useState(false);

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <ApiVideoLiveStreamView
        style={{ flex: 1, backgroundColor: 'black', alignSelf: 'stretch' }}
        ref={ref}
        camera="back"
        enablePinchedZoom={true}
        video={{ fps: 30, resolution: '720p', bitrate: 2 * 1024 * 1024, gopDuration: 1 }}
        audio={{ bitrate: 128000, sampleRate: 44100, isStereo: true }}
        isMuted={false}
        onConnectionSuccess={() => {}}
        onConnectionFailed={(e) => {}}
        onDisconnect={() => {}}
      />
      <View style={{ position: 'absolute', bottom: 40 }}>
        <TouchableOpacity
          style={{ borderRadius: 50, backgroundColor: streaming ? 'red' : 'white', width: 50, height: 50 }}
          onPress={() => {
            if (streaming) {
              ref.current?.stopStreaming();
              setStreaming(false);
            } else {
              ref.current?.startStreaming('YOUR_STREAM_KEY');
              setStreaming(true);
            }
          }}
        />
      </View>
    </View>
  );
};

export default App;