perrystreetsoftware/react-native-aws-ivs-player-view

React Native view bindings for the AWS Interactive Video Service

react-native-aws-ivs-player-view

React Native view bindings for the AWS Interactive Video Service

Installation

npm install react-native-aws-ivs-player-view

Usage

import PlayerView from "react-native-aws-ivs-player-view";

// ...
<PlayerView
    style={styles.player}
    ref={(e: any) => {
        this.player = e;
    }}
/>
<Button
    onPress={() => {
        this.player.pause();
    }}
    title="Pause"
/>
<Button
    onPress={() => {
        this.player.load(
        '<SOME_HLS_URL>'
        );
    }}
    title="Play Me"
/>

Development

If you are interested in extending or enhacning this project, first clone it, then:

Run

yarn bootstrap

When the bootstrap is done, you will be able to start the example app by executing one of the following commands:

# Android app
yarn example android
# iOS app
yarn example ios

Requirements

iOS minimum: 12.0

Android minimum: 21 (per AWS)

Contributing

Please open PRs or issues and we will merge accordingly.

License

MIT

react-native-aws-ivs-player-view's Issues

How to resize stream to fill vertical screen orientation?

Hi there.

Currently, I am able to consume the IVS stream on my mobile app and it returns the video in the native aspect ratio as it is streamed from my webcam. How would I go about editing the styling so that the stream fills the whole vertical screen, as it appears right now the stream returned is always contained whereas I want an effect like cover if we were to compare it to styling images for example

Would it be able to support RTMP?

RTMP support for react-native-aws-ivs-player-view

Two audio are there while joining the meeting

i am using react-native-nodemediaclient lib for broadcasting the live feed and using react-native-ivs-player-view for receiving the feed now the problem is there are two audio from the single feed i think the first one is from the chime-sdk it self while is not sync with the ivs video , and second audio is sync with the video now i am stuck with this issue

[iOS] Debug mode only - RCTJSONStringify() encountered the following error: Invalid number value (NaN) in JSON write.

Given the following code:

import React, {useRef} from 'react';
import {StyleSheet, Button, Dimensions} from 'react-native';
import PlayerView from 'react-native-aws-ivs-player-view';
const App = () => {
  const ref = useRef(null);
  return (
    <>
      <PlayerView style={styles.player} ref={ref} />
      <Button
        onPress={() => {
          ref.current.pause();
        }}
        title="Pause"
      />
      <Button
        onPress={() => {
          ref.current.load(
            'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8',
          );
        }}
        title="Play Me"
      />
    </>
  );
};

const styles = StyleSheet.create({
  player: {
    aspectRatio: 16 / 9,
    width: Dimensions.get('window').width,
    backgroundColor: 'black',
  },
});

export default App;

I get the following error when using the remote debugger:

App Crash if used with socket.io-client

the app crashes the moment socket initialized, else it works.

versions:

react-native: 0.63.3
socket.io-client: 2.3.0

[Android] Minimum SDK version 21

I noticed upon installing this library there is a minimum SDK version of 21. If this is needed (maybe it isn't?) then it should be mentioned in the readme since the default for projects at the moment is 16.

[Android] Ability to disable built in controls

On android, there are controls that are native to the video player, it'd be good to be able to disable these. I think ideally they should be off by default to maintain consistency between iOS and Android.

[iOS] Minimum deployment target 12.0

I noticed upon installing this library there is a minimum deployment target of 12 in the podspec. If this is needed (maybe it isn't?) then it should be mentioned in the readme since the default for projects at the moment is 9.

Error during installation

Hi,

I am getting the following error when running the command npm install react-native-aws-ivs-player-view

Can you please advise what is missing?

While resolving: undefined@undefined
Found: [email protected]
node_modules/react
peer react@"" from [email protected]
node_modules/react-native-aws-ivs-player-view
react-native-aws-ivs-player-view@"" from the root project

Could not resolve dependency:
peer react@"16.13.1" from [email protected]
node_modules/react-native
peer react-native@"" from [email protected]
node_modules/react-native-aws-ivs-player-view
react-native-aws-ivs-player-view@"" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Here's my package.json:
{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^0.2.33",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "aws-amplify": "^3.3.13",
    "bulma": "^0.9.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-markdown": "^5.0.3",
    "react-peer": "^0.2.6",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-syntax-highlighter": "^15.4.3",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}