リアクションネイティブAndroidウェブビュービデオ

Question

私はReact Nativeを使用してAndroid/iOSアプリを作成し、WebViewコンポーネントで再生するビデオを取得しようとしています。動画はiOSで正常に再生されますが、Android WebViewで再生するには問題があります。

私は、これは、Android上でかなり共通の問題であるとWebChromeClientをインポートし、そのようなWebViewの上でそのオプションを設定することで解決することができると主張、このようないくつかのスレッド（ Enabling HTML5 video playback in android WebView?）に遭遇しました

：

mainWebView.setWebChromeClient(new WebChromeClient()); 

しかし、これらのスレッドのほとんどは厳密にネイティブAndroidアプリを開発し、React Nativeを使用していないことです。

これをReact Nativeで動作させる方法を知っている人はいますか？

Answer 1

は、私はそれが利用可能に基づいて、ストリームのビデオ 品質を切り替える必要があるため、彼は、明らかにアプリケーションの最も困難な部分は ライブビデオストリームを処理している

を書き込み、それにarticle by Yevgen Safronov

を参照してください。インターネット帯域幅。しかし最初のもの 最初 - 私はビデオストリームを表示するためにRNネイティブコンポーネントが必要でした。そこに はRNのための普及したビデオコンポーネントですが、iOSだけのサポートがあります。私は Vitamioプレーヤーの周りに自分のRNコンポーネントラッパーを書くことに決めました。それは はよく知られているオープンソースのプロジェクトであり、私たちは モバイルアプリケーション用にRTMPプロトコルをサポートしています。

ネイティブRNコンポーネントの作成に関する以前の経験はありませんでしたので、を直接RNドキュメントに作成して作成しました。 を参照するガイドはネイティブUIコンポーネントと呼ばれ、iOSにも同様のものがあります。 は宣言するために、いくつかの重要な部分があります。

はViewManager（Androidの一部）を登録するカスタムViewManager（Androidの一部に）
を実装
JavaScriptのモジュール
は、モジュール（Androidの一部）を登録実装

カスタムを実装ViewManager を宣言する例を参照してください.VitamioのVideoViewは、VideoView宣言の本質が次のようになります。

public class VideoViewDemo extends Activity { 
@Override public void onCreate(Bundle icicle) { 
    super.onCreate(icicle); 
    if (!LibsChecker.checkVitamioLibs(this)) 
    return; 
    setContentView(R.layout.videoview); 
    mEditText = (EditText) findViewById(R.id.url); 
    mVideoView = (VideoView) findViewById(R.id.surface_view); 
    if (path == "") { return; } 
    mVideoView.setVideoPath(path); 
    mVideoView.setMediaController(new MediaController(this)); 
    mVideoView.requestFocus(); 
} 
... 
} 

コードはかなり単純です。 の参照をアクティビティにLibsCheckerに渡す以外に、VideoViewには、ビデオ のストリームとMediaControllerのインスタンスへのパスが必要です。

public class VitamioViewManager extends SimpleViewManager<VideoView>{ 
public static final String REACT_CLASS = “RCTVitamioView”; 
@Override 
public String getName() { 
    return REACT_CLASS; 
} 

ReactPropを使用してsetStreamUrlセッターを公開：

@ReactProp(name = "streamUrl") 
public void setStreamUrl(VideoView view, @Nullable String streamUrl) { 
    if (!LibsChecker.checkVitamioLibs(mActivity)) 
     return; 

    view.setVideoPath(streamUrl);  
    view.setMediaController(new MediaController(mContext)); 
    view.requestFocus();  
} 

はcreateViewInstanceの実装を追加します。

private ThemedReactContext mContext = null; 
private Activity mActivity = null; 
@Override 
public VideoView createViewInstance(ThemedReactContext context){ 
    mContext = context; 
    return new VideoView(context); 
} 
One note about the code. Because LibsChecker requires an instance of Activity we will receive it via constructor, it will reference root activity used for RN application; 
public VitamioViewManager(Activity activity) { 
    mActivity = activity; 
} 

、最終のJavaステップは、アプリケーションにViewManagerを登録することであるViewManager を登録これは、アプリケーションパッケージメンバ関数createViewManagers：を介して行われます。

var { requireNativeComponent, PropTypes } = require('react-native'); 

var iface = { 
    name: 'VideoView', 
    propTypes: { 
    streamUrl: PropTypes.string 
    } 
}; 

module.exports = requireNativeComponent('RCTVitamioView', iface); 

登録：...

public class VitamioViewPackage implements ReactPackage { 

    private Activity mActivity = null; 

    public VitamioViewPackage(Activity activity) { 
     mActivity = activity; 
    } 


    @Override  
    public List<NativeModule> 
    createNativeModules(ReactApplicationContext reactContext) { 
    return Collections.emptyList(); 
    } 
    @Override 
    public List<Class<? extends JavaScriptModule>> createJSModules() { 
    return Collections.emptyList(); 
    }  
    @Override 
    public List<ViewManager> 
    createViewManagers(ReactApplicationContext reactContext) { 
    return Arrays.<ViewManager>asList(
     new VitamioViewManager(mActivity) 
    );  
    } 
} 

特別なrequireNativeComponentに 関数を呼び出す必要があるJavaScriptでカスタムUIコンポーネント を露出させるためには、JavaScriptのモジュールを実装しますモジュール の公式ドキュメントに必要なステップとして記載されていませんが、参考のために必要ですルート アクティビティ：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 
    ); 
    } 
} 

例は、プロジェクト内のパッケージをインストールします。

npm i react-native-android-vitamio --save 

DeclareVideoView：

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; 

これは助けになると思います、彼自身の参考文献のリストは記事で与えられます。