Reagieren Native Android Webview Video

Question

Ich benutze React Native, um eine Android/iOS-App zu erstellen und versuchen, ein Video in der WebView-Komponente zu spielen. Das Video spielt auf iOS gut, aber ich habe Probleme, es im android WebView zu spielen.

Ich habe über ein paar Themen wie diese kommen (Enabling HTML5 video playback in android WebView?), die behaupten, dies ein recht häufiges Problem auf Android und kann durch den Import von WebChromeClient und Einstellung, die Option auf die Webansicht wie so gelöst werden:

mainWebView.setWebChromeClient(new WebChromeClient()); 

Aber fast alle diese Threads sind ausschließlich zum Erstellen einer nativen Android App und nicht zur Verwendung von React Native.

Kann jemand in React Native arbeiten?

Answer 1

I beziehen sich auf eine article by Yevgen Safronov

Darin schreibt er

Offensichtlich ist der schwierigste Teil der Anwendung ist der Umgang mit Live-Videostream, weil es Schalt Video Qualität Stream basierend auf den verfügbaren erfordert Internet-Bandbreite. Aber zuerst Dinge zuerst - Ich brauchte eine RN native Komponente, um jeden Video-Stream zu zeigen. There ist eine beliebte Videokomponente für RN, aber es hat nur Unterstützung für iOS. Ich habe beschlossen, meine eigene RN-Komponente Wrapper um Vitamio Player zu schreiben. Es ist ist ein bekanntes Open-Source-Projekt und hat die Unterstützung von RTMP-Protokoll wir für mobile App verwenden.

Ich hatte keine vorherige Erfahrung mit dem Schreiben von nativen RN-Komponenten, so ging ich direkt zu RN-Dokumentation auf, wie man einen erstellt. Eine Anleitung, die ich auf verweise, heißt Native UI Components, es gibt eine ähnliche für iOS. Es sind mehrere wesentliche Teile zu erklären:

individuelle Implementierung Viewmanager (Android Teil)
Registrieren Sie den Viewmanager (Android Teil)
Implementieren Sie die JavaScript-Modul
das Modul Register (Android Teil)

Implementieren benutzerdefinierte Viewmanager Unter Bezugnahme auf das Beispiel erklärt Videoview für Vitamio das ist, wie das Wesen der Videoview Erklärung wie folgt aussieht:

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(); 
} 
... 
} 

Der Code sieht ziemlich einfach aus. Neben der Übergabe einer Referenz an Activity in LibsChecker benötigt VideoView einen Pfad zu einem Video-Stream und einer Instanz von MediaController.

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

setStreamUrl Setter mit ReactProp aussetzen:

@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 Implementierung hinzu:

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

Registrieren Sie den Viewmanager Der letzte Java Schritt ist es, die Viewmanager der Anwendung zu registrieren, Dies geschieht über die Memberfunktion createViewManagers des Anwendungspakets: ...

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

Implementieren Sie die JavaScript-Modul Um es benutzerdefinierte UI-Komponente in JavaScript zu belichten notwendig, spezielle requireNativeComponent Funktion aufzurufen:

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

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

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

Registrieren der Modul Obwohl es nicht als erforderlich Schritt in offizielle Dokumentation erwähnt wir brauchen es wegen der Referenz an die Wurzel Aktivität: Paket 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 
    ); 
    } 
} 

Anwendungsbeispiel Installieren das Paket in einem Projekt:

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; 

Hoffe, das ist hilfreich, eine Liste seiner eigenen Referenzen wird in dem Artikel gegeben.