React原生直播

Question

我想做一个react-native应用程序，它能够:

• show live streaming
• 上传直播
• 保存流

我有一个rtmp url和一个播放url。我尝试使用"react-native-video-stream"来实现我的目标，但是流没有启动，也没有明显的错误。我如何在我的应用程序中直播视频，应该使用哪个库。

请提供一个示例/演示应用程序，它做直播

Answer 1

我发现了一个叫做mux的简单平台，可以创建直播，上传并保存以供以后播放。react-native- nmedidiclient将帮助您流式传输视频。另一方面，你可以直接使用react-native-video来播放流。

这是整个过程的博客

也有其他平台来创建流。但是，关键是您可以使用react-native- nmedidiclient库从它们中的任何一个流式传输。

更新:

下面是使用mux创建实时流的nmedidiclient配置:

<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。它为react native应用程序提供了最简单的安装过程。它也有许多先进的功能，如，你可以流在多个平台上一次。它以最小的延迟时间提供高质量的音频和视频流。我在我的应用程序中使用过，它的工作没有任何问题。

你可以在你的react-native应用中使用这个库:

• react-native-bambuser-player:它允许你在你的用户端应用程序中播放流。
• react-native-bambuser-broadcast:使用这个库，你可以创建你的广播器应用程序来为你的用户端应用程序流式传输视频。

按照正确的安装步骤，你就可以开始了。

如果你不想建立你的广播程序，他们也提供自己的应用程序来创建直播。它拥有大多数应该在广播应用程序中的功能。你只需要登录应用程序，它就可以为你的播放器应用程序启动流。

• Bambuser (Android)
• Bambuser (iOS)

它还提供14天的免费试用。

样例代码

import Bambuser player:

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视图:

<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 });
    });
  }}
/>