stream - react 原生直播

Question

我想制作一个能够:

节目直播

上传直播

保存流媒体

我有一个 rtmp 网址和一个播放网址。我尝试使用“react-native-video-stream”来实现我的目标，但是流没有启动并且没有明显的错误。
如何在我的应用中直播视频以及应该使用哪个库。

请提供一个进行直播的示例/演示应用程序

Answer 1

我找到了一个简单的平台，叫做 mux创建实时流，上传并保存以供稍后播放。 react-native-nomediaclient将帮助您流式传输视频。另一方面，您可以使用 react-native-video播放流。
Here是整个过程的博客。
还有其他平台可以创建流。但是，关键是您可以使用 react-native-nomediaclient 从其中任何一个进行流式传输。图书馆。
更新:
这是使用 mux 创建实时流的 nomediaclient 配置:

<NodeCameraView 
  style={styles.nodeCameraView}
  ref={(vb) => { this.vb = vb }}
  outputUrl = {`rtmp://live.mux.com/app/${this.state.streamId}`}
  camera={{ cameraId: 0, cameraFrontMirror: true }}
  audio={{ bitrate: 32000, profile: 1, samplerate: 44100 }}
  video={{ 
    preset: 4,
    bitrate: 2000000,
    profile: 2,
    fps: 30,
    videoFrontMirror: false
  }}
  autopreview={true}
/>

获取streamId :

createLive = async () => {
  const auth = {
    username: MUX_ACCESS_TOKEN,
    password: MUX_SECRET
  };
  const param = { "reduced_latency": true, "playback_policy": "public", "new_asset_settings": { "playback_policy": "public" } }
  const res = await axios.post('https://api.mux.com/video/v1/live-streams', param, { auth: auth }).catch((error) => {
    throw error;
  });
  console.log(res.data.data);
  const data = res.data.data;
  this.setState({
    streamId: data.stream_key
  });
}

更新 2
我还找到了另一个比 Mux 更好的平台，称为 Bambuser .它为您的 native 应用程序提供最简单的安装过程。它还具有许多高级功能，例如，您可以一次在多个平台上进行流式传输。它以最小的延迟时间提供高质量的音频和视频流。我已经在我的应用程序中使用过，它运行没有任何问题。
这是您可以与 native 应用程序一起使用的库:

react-native-bambuser-player :这允许您在用户端应用程序中播放流。

react-native-bambuser-broadcaster :使用这个库，你可以创建你的广播应用程序来为你的用户端应用程序流式传输视频。

正确执行安装步骤，一切顺利。
此外，如果您不想构建您的广播应用程序，他们还提供自己的应用程序来创建直播。它具有应该在广播应用程序中的大部分功能。您只需登录应用程序，它就会为您的播放器应用程序启动流。

Bambuser (安卓)

Bambuser (iOS)

它还提供 14 天的免费试用测试。
示例代码
导入 Bambuser 播放器:

import RNBambuserPlayer from 'react-native-bambuser-player';

为您的凭证声明 const :

const BambuserApplicationIds = {
  android: 'ANDROID_APPLICATION_ID', // your bambuser android application id
  ios: 'IOS_APPLICATION_ID' // your bambuser ios application id
}

const BambuserResourceUri = 'YOUR_BAMBUSER_RESOURCE_URI';

这是有关如何获得的详细信息 applicationId和 resourceUri .
渲染 Bambuser Player View :

<RNBambuserPlayer
  style={{ flex: 1 }}
  ref={ref => {
    this.myPlayerRef = ref;
  }}
  applicationId={
    Platform.OS === 'ios'
      ? BambuserApplicationIds.ios
      : BambuserApplicationIds.android
  }
  requiredBroadcastState={
    RNBambuserPlayer.REQUIRED_BROADCAST_STATE.LIVE
  }
  videoScaleMode={RNBambuserPlayer.VIDEO_SCALE_MODE.ASPECT_FILL}
  resourceUri={BambuserResourceUri}
  onTotalViewerCountUpdate={viewer => {
    this.setState({ views: viewer }); // handle views update here
  }}
  onPlaying={() => {
    // code to handle when playing stream
  }}
  onPlaybackError={error => {
    // handle when some error occures
    Alert.alert('Error', error.message); 
  }}
  onPlaybackComplete={() => {
    // this method called when stream is complete. Write some code to handle stream complete like :
    this.setState({ isPlaying: false, isLiveEnded: true }, () => {
      this.props.navigation.setParams({ isLive: false });
    });
  }}
  onStopped={() => {
    // called when stream stops. 
    this.setState({ isPlaying: false }, () => {
      this.props.navigation.setParams({ isLive: false });
    });
  }}
/>

您可以阅读 here更多关于 Prop 。