Coder Social home page Coder Social logo

react-native-android-vitamio's Introduction

react-native-android-vitamio

A React-native component for android Vitamio video player.

Supports React Native up to 0.21.

Demo app

https://github.com/sejoker/react-native-vitamio-demo

Installation

npm install --save react-native-android-vitamio

Add it to your android project

  • In android/setting.gradle
...
include ':vitamio'
project(':vitamio').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-vitamio/vitamio')
include ':RNVitamioView'
project(':RNVitamioView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-vitamio')
  • In android/app/build.gradle
...
dependencies {
    ...
    compile project(':RNVitamioView')
}
  • register module on React Native >= 0.18 (in MainActivity.java)
package com.vitamio_demo;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

import com.sejoker.VitamView.VitamioViewPackage; // <--- import

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "vitamio_demo";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new VitamioViewPackage(this)          // <------ add here
      );
    }
}
  • register module on React Native < 0.18 (in MainActivity.java)
import com.sejoker.VitamView.VitamioViewPackage;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new VitamioViewPackage(this))              // <------ add here
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "app", null);

    setContentView(mReactRootView);
  }

  ......

}

Example

var VitamioView = require('react-native-android-vitamio');

class VideoScreen extends React.Component {
  render() {
    return (
      <View>
        <VitamioView style={styles.video} streamUrl="rtmp://fms.12E5.edgecastcdn.net/0012E5/mp4:videos/8Juv1MVa-485.mp4"/>
      </View>
    );
  }
}


var styles = StyleSheet.create({
  video: {
      flex: 1,
      flexDirection: 'row',
      height: 400,
    }
})

module.exports = VideoScreen;

Known issues

Vitamio doesn't play video in android simulator. Video doesn't start automatically, touch the screen and press start.

License

MIT

react-native-android-vitamio's People

Contributors

abbasfreestyle avatar sejoker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-android-vitamio's Issues

Android Build Failed - RN 0.24

Unfortunately i got this error when building:

Any idea how to fix this? Many thanks.

:RCTVideo:compileLint
:RCTVideo:copyReleaseLint UP-TO-DATE
:RCTVideo:preBuild UP-TO-DATE
:RCTVideo:preReleaseBuild UP-TO-DATE
:RCTVideo:checkReleaseManifest
:RCTVideo:preDebugAndroidTestBuild UP-TO-DATE
:RCTVideo:preDebugBuild UP-TO-DATE
:RCTVideo:preDebugUnitTestBuild UP-TO-DATE
:RCTVideo:preReleaseUnitTestBuild UP-TO-DATE
:RCTVideo:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:RCTVideo:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:RCTVideo:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:RCTVideo:prepareComFacebookFrescoDrawee081Library UP-TO-DATE
:RCTVideo:prepareComFacebookFrescoFbcore081Library UP-TO-DATE
:RCTVideo:prepareComFacebookFrescoFresco081Library UP-TO-DATE
:RCTVideo:prepareComFacebookFrescoImagepipeline081Library UP-TO-DATE
:RCTVideo:prepareComFacebookFrescoImagepipelineOkhttp081Library UP-TO-DATE
:RCTVideo:prepareComFacebookReactReactNative0191Library UP-TO-DATE
:RCTVideo:prepareComYqritcAndroidScalablevideoview101Library UP-TO-DATE
:RCTVideo:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:RCTVideo:prepareReleaseDependencies
:RCTVideo:compileReleaseAidl UP-TO-DATE
:RCTVideo:compileReleaseRenderscript UP-TO-DATE
:RCTVideo:generateReleaseBuildConfig UP-TO-DATE
:RCTVideo:generateReleaseAssets UP-TO-DATE
:RCTVideo:mergeReleaseAssets UP-TO-DATE
:RCTVideo:generateReleaseResValues UP-TO-DATE
:RCTVideo:generateReleaseResources UP-TO-DATE
:RCTVideo:mergeReleaseResources UP-TO-DATE
:RCTVideo:processReleaseManifest UP-TO-DATE
:RCTVideo:processReleaseResources UP-TO-DATE
:RCTVideo:generateReleaseSources UP-TO-DATE
:RCTVideo:processReleaseJavaRes UP-TO-DATE
:RCTVideo:compileReleaseJavaWithJavac UP-TO-DATE
:RCTVideo:extractReleaseAnnotations UP-TO-DATE
:RCTVideo:mergeReleaseProguardFiles UP-TO-DATE
:RCTVideo:packageReleaseJar UP-TO-DATE
:RCTVideo:compileReleaseNdk UP-TO-DATE
:RCTVideo:packageReleaseJniLibs UP-TO-DATE
:RCTVideo:packageReleaseLocalJar UP-TO-DATE
:RCTVideo:packageReleaseRenderscript UP-TO-DATE
:RCTVideo:packageReleaseResources UP-TO-DATE
:RCTVideo:bundleRelease UP-TO-DATE
:RNVitamioView:compileLint
:RNVitamioView:copyReleaseLint UP-TO-DATE
:RNVitamioView:preBuild UP-TO-DATE
:RNVitamioView:preReleaseBuild UP-TO-DATE
:RNVitamioView:checkReleaseManifest
:RNVitamioView:preDebugAndroidTestBuild UP-TO-DATE
:RNVitamioView:preDebugBuild UP-TO-DATE
:RNVitamioView:preDebugUnitTestBuild UP-TO-DATE
:RNVitamioView:preReleaseUnitTestBuild UP-TO-DATE
:vitamin:compileLint
:vitamio:copyReleaseLint UP-TO-DATE
:vitamio:mergeReleaseProguardFiles UP-TO-DATE
:vitamio:preBuild UP-TO-DATE
:vitamio:preReleaseBuild UP-TO-DATE
:vitamin:checkReleaseManifest
:vitamin:prepareReleaseDependencies
:vitamio:compileReleaseAidl UP-TO-DATE
:vitamio:compileReleaseRenderscript UP-TO-DATE
:vitamio:generateReleaseBuildConfig UP-TO-DATE
:vitamio:generateReleaseAssets UP-TO-DATE
:vitamio:mergeReleaseAssets UP-TO-DATE
:vitamio:generateReleaseResValues UP-TO-DATE
:vitamio:generateReleaseResources UP-TO-DATE
:vitamio:packageReleaseResources UP-TO-DATE
:vitamio:processReleaseManifest UP-TO-DATE
:vitamio:processReleaseResources UP-TO-DATE
:vitamio:generateReleaseSources UP-TO-DATE
:vitamio:processReleaseJavaRes UP-TO-DATE
:vitamio:compileReleaseJavaWithJavac UP-TO-DATE
:vitamio:packageReleaseJar UP-TO-DATE
:vitamio:compileReleaseNdk UP-TO-DATE
:vitamio:packageReleaseJniLibs UP-TO-DATE
:vitamio:packageReleaseLocalJar UP-TO-DATE
:vitamio:packageReleaseRenderscript UP-TO-DATE
:vitamio:bundleRelease UP-TO-DATE
:RNVitamioView:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:RNVitamioView:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:RNVitamioView:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:RNVitamioView:prepareComFacebookFrescoDrawee081Library UP-TO-DATE
:RNVitamioView:prepareComFacebookFrescoFbcore081Library UP-TO-DATE
:RNVitamioView:prepareComFacebookFrescoFresco081Library UP-TO-DATE
:RNVitamioView:prepareComFacebookFrescoImagepipeline081Library UP-TO-DATE
:RNVitamioView:prepareComFacebookFrescoImagepipelineOkhttp081Library UP-TO-DATE
:RNVitamioView:prepareComFacebookReactReactNative0191Library UP-TO-DATE
:RNVitamioView:prepareNavigatorVitamioUnspecifiedLibrary UP-TO-DATE
:RNVitamioView:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:RNVitamioView:prepareReleaseDependencies
:RNVitamioView:compileReleaseAidl UP-TO-DATE
:RNVitamioView:compileReleaseRenderscript UP-TO-DATE
:RNVitamioView:generateReleaseBuildConfig UP-TO-DATE
:RNVitamioView:generateReleaseAssets UP-TO-DATE
:RNVitamioView:mergeReleaseAssets UP-TO-DATE
:RNVitamioView:generateReleaseResValues UP-TO-DATE
:RNVitamioView:generateReleaseResources UP-TO-DATE
:RNVitamioView:mergeReleaseResources UP-TO-DATE
:RNVitamioView:processReleaseManifest UP-TO-DATE
:RNVitamioView:processReleaseResources UP-TO-DATE
:RNVitamioView:generateReleaseSources UP-TO-DATE
:RNVitamioView:processReleaseJavaRes UP-TO-DATE
:RNVitamioView:compileReleaseJavaWithJavac
/Users/me/Apps/react-native/navigator/node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:11: error: cannot find symbol
import com.facebook.react.uimanager.annotations.ThemedReactContext;
                                               ^
  symbol:   class ThemedReactContext
  location: package com.facebook.react.uimanager.annotations
/Users/me/Apps/react-native/navigator/node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:26: error: cannot find symbol
    private ThemedReactContext mContext = null;
            ^
  symbol:   class ThemedReactContext
  location: class VitamioViewManager
/Users/me/Apps/react-native/navigator/node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:38: error: cannot find symbol
    public VideoView createViewInstance(ThemedReactContext context) {
                                        ^
  symbol:   class ThemedReactContext
  location: class VitamioViewManager
3 errors
:RNVitamioView:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':RNVitamioView:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

unable to import the vitamio for video view

annotation
**facing issue in the import of VitamioViewManager.java .
kindly help me to resolve the error. By removing annotation from the import..

import com.facebook.react.uimanager.annotations.ThemedReactContext;
new issue arise which is
screenshot_2016-05-06-14-49-20

i want to add video in my application.

code of my index.android.js
`import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var VitamioView = require('react-native-android-vitamio');
class app5 extends Component {
render() {
return (

  </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
video: {
flex: 1,
flexDirection: 'row',
height: 400,
},

});

AppRegistry.registerComponent('app5', () => app5);`
**

0.26 RN

node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:8: error: cannot find symbol
import com.facebook.react.uimanager.BaseViewPropertyApplicator;
                                   ^
  symbol:   class BaseViewPropertyApplicator
  location: package com.facebook.react.uimanager
node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:9: error: cannot find symbol
import com.facebook.react.uimanager.CatalystStylesDiffMap;
                                   ^
  symbol:   class CatalystStylesDiffMap
  location: package com.facebook.react.uimanager
2 errors
:RNVitamioView:compileReleaseJavaWithJavac FAILED

Thank you

Javac cannot find symbols com.facebook.react.uimanager.BaseViewPropertyApplicator, com.facebook.react.uimanager.CatalystStylesDiffMap

Hello,

I've rnpm-installed this component in my React app, and modified various files based on the Demo app example you've provided. But my java compilation step is failing:

RNVitamioView:compileReleaseJavaWithJavac
/Users/webfreelance10/eaplay_good/node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:8: error: cannot find symbol
import com.facebook.react.uimanager.BaseViewPropertyApplicator;
^
symbol: class BaseViewPropertyApplicator
location: package com.facebook.react.uimanager
/Users/webfreelance10/eaplay_good/node_modules/react-native-android-vitamio/src/main/java/com/RNVitamioView/VitamioViewManager.java:9: error: cannot find symbol
import com.facebook.react.uimanager.CatalystStylesDiffMap;
^
symbol: class CatalystStylesDiffMap
location: package com.facebook.react.uimanager
2 errors
:RNVitamioView:compileReleaseJavaWithJavac FAILED

Here are my versions of React:
$ react-native --version
react-native-cli: 0.2.0
react-native: 0.26.2

Please advise, thanks.

VitamioView shows blank

The player appears to be blank when using VitamioView

I used the following code:

import VitamioView from 'react-native-android-vitamio';
<VitamioView style={styles.video} streamUrl="rtmp://fms.12E5.edgecastcdn.net/0012E5/mp4:videos/8Juv1MVa-485.mp4"/>

i noticed in the index.js file the propType name is 'VideoView'

so i also tried like so:
import VideoView from 'react-native-android-vitamio';
<VideoView style={styles.video} streamUrl="rtmp://fms.12E5.edgecastcdn.net/0012E5/mp4:videos/8Juv1MVa-485.mp4"/>

unfortunately still nothing...

Re: VitamioView shows blank

 <View> 
<VideoView style={styles.video} streamUrl="rtmp://fms.12E5.edgecastcdn.net/0012E5/mp4:videos/8Juv1MVa-485.mp4"/>
      </View>

But shows black screen....

An Exception。。。。

hi,
import the module, run the app,throw exception:
Error while updating property 'color' in shadow node of type:RCTText

rtmp live

It's possible to stream to an rtmp server or it can just receive?

issue with 'Video View' has no proptype for native prop 'RCTVitamioView.testID' of native type 'String'

`import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var VitamioView = require('react-native-android-vitamio');
class app3 extends Component {
render() {
return (

  </View>
);

}
}
class VideoScreen extends React.Component {
render() {
return (


//

);
}
}
var styles = StyleSheet.create({

video: {
flex: 1,
flexDirection: 'row',
height: 400,
},
});
module.exports = VideoScreen;
AppRegistry.registerComponent('app3', () => app3);`

Edited the file as given in the read me file , then code shows this error "issue with 'Video View' has no propType for native prop 'RCTVitamioView.testID' of native type 'String' ...... after that error, i have updated the both react-native and node.js" ..
while trying to implement the plugin of vitamio for video view faced many issues but resolved all of them, now unable to resolve that issue"
adding video view in react native is possible ??
screenshot_2016-05-06-14-49-20

VideoView` has no propType for native prop....

First , a lot of thanks for this plugin!)
I have an issue:
VideoViewhas no propType for native propRCTVitamioView.renderToHardwareTextureAndroidof native typeboolean`
Any ideas?
Thanks

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.