我想在 React Native 中制作类似 Swift 的 MultipeerConnectivity 功能

问题描述 投票:0回答:0
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.4",
    "react-native-vision-camera": "^2.15.4",
    "react-native-wifi-p2p": "^3.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

我一直在寻找各种图书馆并尝试使用您制作的东西。我正在尝试创建两个功能。

  1. 两个 Android 设备之间的 WiFi 或蓝牙连接
  2. 在另一台安卓设备上实时观看一台安卓设备拍摄的视频
  3. 观察的安卓控制连接的安卓设备。

e.g) 安卓手机 + 带摄像头的扫地机器人 ㄴ安卓手机可以看到扫地机器人拍摄的视频,可以控制扫地机器人的移动方向

Q1.我想知道一个可以实现以上功能的库 Q2.Kotlin可以实现上面的功能吗?

import React, {PureComponent} from 'react';
import {StyleSheet, View, Button} from 'react-native';
import {
  initialize,
  startDiscoveringPeers,
  stopDiscoveringPeers,
  subscribeOnConnectionInfoUpdates,
  subscribeOnThisDeviceChanged,
  subscribeOnPeersUpdates,
  connect,
  cancelConnect,
  createGroup,
  removeGroup,
  getAvailablePeers,
  sendFile,
  receiveFile,
  getConnectionInfo,
  getGroupInfo,
  receiveMessage,
  sendMessageTo,
} from 'react-native-wifi-p2p';
import {PermissionsAndroid} from 'react-native';
import Camera from 'react-natve-vision-camera'

type Props = {};
export default class App extends PureComponent<Props> {
  peersUpdatesSubscription;
  connectionInfoUpdatesSubscription;
  thisDeviceChangedSubscription;

  state = {
    devices: [],
  };

  async componentDidMount() {
    try {
      await initialize();
      // since it's required in Android >= 6.0
      await Camera.getCameraPermissionStatus()
      await Camera.getMicrophonePermissionStatus()
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Access to wi-fi P2P mode',
          message: 'ACCESS_FINE_LOCATION',
          buttonPositive: 'Okay',
        },
      );

      const granted2 = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.NEARBY_WIFI_DEVICES,
        {
          title: 'Access to wi-fi P2P mode',
          message: 'NEARBY_WIFI_DEVICES',
          buttonPositive: 'Okay',
        },
      );

      console.log(
        granted === PermissionsAndroid.RESULTS.GRANTED
          ? 'You can use the p2p mode'
          : 'Permission denied: p2p mode will not work',
      );

      this.peersUpdatesSubscription = subscribeOnPeersUpdates(
        this.handleNewPeers,
      );
      this.connectionInfoUpdatesSubscription = subscribeOnConnectionInfoUpdates(
        this.handleNewInfo,
      );
      this.thisDeviceChangedSubscription = subscribeOnThisDeviceChanged(
        this.handleThisDeviceChanged,
      );

      const status = await startDiscoveringPeers();
      console.log('startDiscoveringPeers status: ', status);
    } catch (e) {
      console.error(e);
    }
  }

  componentWillUnmount() {
    this.peersUpdatesSubscription?.remove();
    this.connectionInfoUpdatesSubscription?.remove();
    this.thisDeviceChangedSubscription?.remove();
  }

  handleNewInfo = info => {
    console.log('OnConnectionInfoUpdated', info);
  };

  handleNewPeers = ({devices}) => {
    console.log('OnPeersUpdated', devices);
    this.setState({devices: devices});
  };

  handleThisDeviceChanged = groupInfo => {
    console.log('THIS_DEVICE_CHANGED_ACTION', groupInfo);
  };

  connectToFirstDevice = () => {
    console.log('Connect to: ', this.state.devices[0]);
    connect(this.state.devices[0].deviceAddress)
      .then(() => console.log('Successfully connected'))
      .catch(err => console.error('Something gone wrong. Details: ', err));
  };

  onCancelConnect = () => {
    cancelConnect()
      .then(() =>
        console.log('cancelConnect', 'Connection successfully canceled'),
      )
      .catch(err =>
        console.error('cancelConnect', 'Something gone wrong. Details: ', err),
      );
  };

  onCreateGroup = () => {
    createGroup()
      .then(() => console.log('Group created successfully!'))
      .catch(err => console.error('Something gone wrong. Details: ', err));
  };

  onRemoveGroup = () => {
    removeGroup()
      .then(() => console.log("Currently you don't belong to group!"))
      .catch(err => console.error('Something gone wrong. Details: ', err));
  };

  onStopInvestigation = () => {
    stopDiscoveringPeers()
      .then(() => console.log('Stopping of discovering was successful'))
      .catch(err =>
        console.error(
          `Something is gone wrong. Maybe your WiFi is disabled? Error details`,
          err,
        ),
      );
  };

  onStartInvestigate = () => {
    startDiscoveringPeers()
      .then(status =>
        console.log(
          'startDiscoveringPeers',
          `Status of discovering peers: ${status}`,
        ),
      )
      .catch(err =>
        console.error(
          `Something is gone wrong. Maybe your WiFi is disabled? Error details: ${err}`,
        ),
      );
  };

  onGetAvailableDevices = () => {
    getAvailablePeers().then(peers => console.log(peers));
  };

  onSendFile = () => {
    //const url = '/storage/sdcard0/Music/Rammstein:Amerika.mp3';
    const url =
      '/storage/emulated/0/Music/Bullet For My Valentine:Letting You Go.mp3';
    PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      {
        title: 'Access to read',
        message: 'READ_EXTERNAL_STORAGE',
        buttonPositive: 'Okay',
      },
    )
      .then(granted => {
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('You can use the storage');
        } else {
          console.log('Storage permission denied');
        }
      })
      .then(() => {
        return PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'Access to write',
            message: 'WRITE_EXTERNAL_STORAGE',
            buttonPositive: 'Okay',
          },
        );
      })
      .then(() => {
        return sendFile(url)
          .then(metaInfo => console.log('File sent successfully', metaInfo))
          .catch(err => console.log('Error while file sending', err));
      })
      .catch(err => console.log(err));
  };

  onReceiveFile = () => {
    PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      {
        title: 'Access to read',
        message: 'READ_EXTERNAL_STORAGE',
        buttonPositive: 'Okay',
      },
    )
      .then(granted => {
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('You can use the storage');
        } else {
          console.log('Storage permission denied');
        }
      })
      .then(() => {
        return PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'Access to write',
            message: 'WRITE_EXTERNAL_STORAGE',
            buttonPositive: 'Okay',
          },
        );
      })
      .then(() => {
        return receiveFile(
          '/storage/emulated/0/Music/',
          'BFMV:Letting You Go.mp3',
        )
          .then(() => console.log('File received successfully'))
          .catch(err => console.log('Error while file receiving', err));
      })
      .catch(err => console.log(err));
  };

  onSendMessageTo = () => {
    sendMessageTo('Hello world!', 'aa:79:8d:42:01:c0').then(msg =>
      console.log('Message sent successfully', msg),
    );
  };

  onReceiveMessage = () => {
    receiveMessage()
      .then(msg => console.log('Message received successfully', msg))
      .catch(err => console.log('Error while message receiving', err));
  };

  onGetConnectionInfo = () => {
    getConnectionInfo().then(info => console.log('getConnectionInfo', info));
  };

  onGetGroupInfo = () => {
    getGroupInfo().then(info => console.log('getGroupInfo', info));
  };

  render() {
    const {devices} = this.state;

    return (
      <View style={styles.container}>
        {devices.map(device => (
          <Button
            key={device.deviceAddress}
            title={device.deviceName}
            onPress={this.connectToFirstDevice}
          />
        ))}
        <Button title="Connect" onPress={this.connectToFirstDevice} />
        <Button title="Cancel connect" onPress={this.onCancelConnect} />
        <Button title="Create group" onPress={this.onCreateGroup} />
        <Button title="Remove group" onPress={this.onRemoveGroup} />
        <Button title="Investigate" onPress={this.onStartInvestigate} />
        <Button
          title="Prevent Investigation"
          onPress={this.onStopInvestigation}
        />
        <Button
          title="Get Available Devices"
          onPress={this.onGetAvailableDevices}
        />
        <Button
          title="Get connection Info"
          onPress={this.onGetConnectionInfo}
        />
        <Button title="Get group info" onPress={this.onGetGroupInfo} />
        <Button title="Send file" onPress={this.onSendFile} />
        <Button title="Receive file" onPress={this.onReceiveFile} />
        <Button title="Send message" onPress={this.onSendMessageTo} />
        <Button title="Receive message" onPress={this.onReceiveMessage} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

android react-native p2p multipeer-connectivity
© www.soinside.com 2019 - 2024. All rights reserved.