React Native Android Webview Video

Question

React Native를 사용하여 Android/iOS 앱을 만들고 WebView 구성 요소에서 재생할 비디오를 가져 오려고합니다. 동영상이 iOS에서 제대로 재생되지만 Android WebView에서 재생하는 데 문제가 있습니다.

mainWebView.setWebChromeClient(new WebChromeClient()); 

:

나는이 안드로이드에 상당히 일반적인 문제와 WebChromeClient를 가져 오기 때문에 같은 웹보기에서 해당 옵션을 설정하여 해결할 수 있습니다 주장이 하나 (Enabling HTML5 video playback in android WebView?)과 같은 몇 가지 스레드에 걸쳐 왔어요

하지만 거의 모든 스레드는 네이티브 Android 앱을 제작하고 React Native를 사용하지 않고 있습니다.

누구나 이것이 네이티브에서 작동하도록하는 방법을 알고 있습니까?

Answer 1

나는 그것을 사용할 수에 따라 스트림의 비디오 품질을 전환 필요로하기 때문에, 그는 분명히 응용 프로그램의 가장 어려운 부분은 라이브 비디오 스트림을 처리하는

를 기록 그것의 article by Yevgen Safronov

참조 인터넷 대역폭. 하지만 우선 첫번째 내용 - 모든 비디오 스트림을 표시하려면 RN 기본 구성 요소가 필요했습니다. 여기은 RN의 인기있는 비디오 구성 요소이지만 iOS 만 지원합니다. 내가 Vitamio 플레이어 주위에 내 자신의 RN 구성 요소 래퍼를 작성하기로 결정했습니다. 그것 잘 알려진 오픈 소스 프로젝트이며 우리는 모바일 애플 리케이션을위한 RTMP 프로토콜을 지원합니다.

네이티브 RN 구성 요소를 작성한 경험이 없으므로을 직접 작성하여 RN 설명서를 작성하는 방법을 살펴 보았습니다. 을 참조하는 가이드를 기본 UI 구성 요소라고하며, iOS와 유사한 요소가 있습니다. 사용자 정의를 구현 ViewManager (안드로이드 일부)
ViewManager (안드로이드 일부)
가
모듈을 등록 자바 스크립트 모듈 (안드로이드 일부)

하는 사용자 정의 구현을 구현 등록을

: 선언하는 몇 가지 중요한 부분이 있습니다 ViewManager를 선언하는 예제를 참고하면 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(); 
} 
... 
} 

코드는 매우 간단합니다. 참조를 Activity에 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; 
} 

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에게 함수를 호출 할 필요가 자바 스크립트에서 사용자 정의 UI 구성 요소 를 노출하기 위해 자바 스크립트 모듈을 구현 모듈 참조로 인해 공식 문서에 필요한 단계로 언급되어 있지는 않지만 루트 활동으로 : 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; 

희망이 있습니다. 자신의 참고 문헌 목록이 도움말에 나와 있습니다.