Reaguj natywny widok z przeglądarki Android Video

Question

Używam React Native do tworzenia aplikacji dla systemu Android/iOS i próbuję uzyskać wideo do odtworzenia w komponencie WebView. Film gra dobrze na iOS, ale mam problem z odtworzeniem go w Androidzie WebView.

Natknąłem kilka wątków jak ten (Enabling HTML5 video playback in android WebView?), które twierdzą, że jest to dość powszechny problem na Androida i może być rozwiązany poprzez importowanie WebChromeClient i ustawienie tej opcji na WebView tak:

mainWebView.setWebChromeClient(new WebChromeClient()); 

Jednak prawie wszystkie te wątki ściśle dotyczą budowania natywnej aplikacji na Androida i nie używają React Native.

Czy ktoś wie, jak uzyskać to do pracy w React Native?

Answer 1

odsyłam do article by Yevgen Safronov

w nim pisze

Oczywiście najtrudniejszym elementem aplikacji obsługuje żywo strumień wideo, ponieważ wymaga przełączania Stream wideo jakości w oparciu o dostępne Przepustowość Internetu. Najpierw jednak potrzebowałem natywnego komponentu RN do pokazania dowolnego strumienia wideo. Istnieje jest popularnym komponentem wideo dla RN, ale obsługuje tylko iOS. I postanowiłem napisać własną wrapper składową RN wokół odtwarzacza Vitamio. To jest dobrze znanym projektem open-source i ma wsparcie dla protokołu RTMP, którego używamy w aplikacji mobilnej na numer .

Nie miałem wcześniejszego doświadczenia z pisaniem natywnych składników RN, więc poszedłem bezpośrednio do dokumentacji RN, jak ją utworzyć. Przewodnik, który nazywam nazywa się Natywnymi składnikami interfejsu użytkownika, jest podobny do iOS. Nie kilka istotnych części deklarować:

Wdrożenie zwyczaj ViewManager (część Android)
zarejestrować ViewManager (część Android)
wdrożyć moduł JavaScript
zarejestrować moduł (część Android)

wdrożyć niestandardowe ViewManager Odwołując się do przykładu deklarując VideoView dla Vitamio to jak istota deklaracji VideoView wygląda następująco:

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

Kod wygląda dość prosto. Poza przekazaniem referencji do Activity do LibsChecker, VideoView wymaga ścieżki do strumienia wideo i instancji MediaController.

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

wystawiać setStreamUrl setter użyciu ReactProp:

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

dodać realizację 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; 
} 

Zarejestruj ViewManager Ostatnim krokiem Java jest zarejestrowanie ViewManager do wniosku, dzieje się to za pośrednictwem funkcji członka pakietu aplikacji createViewManagers: ...

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

Wdrożenie modułu JavaScript, aby odsłonić niestandardowy składnik UI w JavaScript konieczne jest zadzwonić zachodzą specyficzne requireNativeComponent funkcję:

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

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

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

zarejestrować moduł Chociaż nie jest wymieniony jako wymagany krok w oficjalnej dokumentacji potrzebujemy go ze względu na odniesienie do działania root: : 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 
    ); 
    } 
} 

Przykład użycia zainstalować pakiet w projekcie:

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; 

Mam nadzieję, że to pomoże, lista jego własnych odniesień podana jest w artykule.