使用 React Native 投射到屏幕上

Question

我正在构建一个用于播放视频的 react-native 应用，我希望能够将这些视频投射到屏幕上。视频来自 youtube 和 vimeo。知道如何实现吗？一直在查看 react-native-google-cast 库，看起来它需要用户拥有 Chromecast 设备，这是一个问题。它也不适用于 iOS。

Answer 1

使用这个库将屏幕投射到谷歌浏览器

react-native-google-cast

Instructions

Installation’s in ios

Installation’s in android

React Native Code Chromecast 集成

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import GoogleCast, { CastButton } from 'react-native-google-cast';

class MyChromecastApp extends React.Component {
  // Play the casting, only if the device is connected and was playing something before in the actual sesion
  playCast = () => GoogleCast.play();

  // Pause the currently casting
  pauseCast = () => GoogleCast.pause();

  // Show the Expanded Control Panel
  shwoControls = () => GoogleCast.launchExpandedControls();

  // Start the cast with selected media passed by function parameter
  startCast = (video, image, title, subtitle, duration, currentTime, mediaType, moreDetails) => {
    GoogleCast.castMedia({
      mediaUrl: video, // Stream media video uri
      imageUrl: image, // Image video representative uri
      title, // Media main title
      subtitle, // Media subtitle
      studio: 'Asap Developers', // Media or app owner
      streamDuration: duration, // Stream duration in seconds
      contentType: mediaType, // Optional media type, default is 'video/mp4'
      playPosition: currentTime, // Stream play position in seconds
      customData: {
        // Optional, your custom object that will be passed to as customData to reciever
        mediaDetails: moreDetails,
      },
    })
      .then(console.log('Playing.. '))
      .catch(e => console.log('An error has ocurred, reason: ', e));
  };

  render() {
    return (
      <View>
        <Text>Connect with chromecast device with the button above:</Text>
        <CastButton style={{ width: 30, height: 30 }} />
        <Text>If the conecction was successfully, you are ready to send content now:</Text>
        <TouchableOpacity onPress={() => this.startCast('video.mp4', 'video_image.jpg', 'Asap Sample Video', '-', 120, 0, 'video/mp4', 'No details')}>
          <Text>Send my video</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default MyChromecastApp;