react-native - Ant Media - React-Native - iOS/Android 支持

Question

我尝试使用 WebRTC React Native 包设置 Ant Media。不幸的是，我花了一天后无法让它正常工作。

我最终从 Ant Media iOS 库构建了一个到 React-Native 的接口。它工作得很好。但是，我不是 Java 开发人员，需要支持 Android。有没有人有一个使用 React-native-webrtc 或其他任何东西来帮助我让 Android 工作的工作示例？

谢谢！

Answer 1

我正在使用 react-native-webrtc 将 webrtc-adaptor 移植到 RN，你可以在这里找到我正在使用的包https://www.npmjs.com/package/rn-antmedia，我是在应用程序上使用，对我来说效果很好。

你可以通过 npm 或 yarn 安装yarn add rn-antmedia，这个库使用 react-native-webrtc，那么你也需要安装这个库并进行一些配置。

目前此库正在开发中，一些 antmedia 功能无法正常工作。我正在创建一个示例应用程序，在某些情况下这个库可以工作。

这是一个如何使用 lib 的示例

import React, { useState, useRef, useCallback } from 'react';
import {SafeAreaView, Button} from 'react-native';
import {RTCView} from 'react-native-webrtc';
/* importing lib */
import { useAntMedia } from 'rn-antmedia';

const App = () => {
    const [localStream, setLocalStream] = useState('');
    const [remoteStream, setRemoteStream] = useState(null);
    const stream = useRef({id: ''}).current;
    
    const adaptor = useAntMedia({
    url: 'wss://testserver.com/WebRTCAppEE/websocket',
    mediaConstraints: {
      video: true,
      audio: true,
    },
    sdp_constraints: {
      offerToReceiveAudio: true,
      offerToReceiveVideo: true,
    },
        bandwidth: 300,
    callback(command, data) {
      switch (command) {
        case 'pong':
          break;
        case 'joinedTheRoom':
          if ('onJoinedRoom' in events) {
            const tok = data.ATTR_ROOM_NAME;
            this.initPeerConnection(data.streamId);
            this.publish(data.streamId, tok);

            const streams = data.streams;

            if (streams != null) {
              streams.forEach((item) => {
                if (item === stream.id) return;
                this.play(item, tok, roomId);
              });
            }
          }
          break;
        case 'streamJoined':
          if ('onStreamJoined' in events) {
            this.play(data.streamId, token, roomId);
          }
          break;
        default:
          break;
      }
    },
    callbackError: (err, data) => {
      console.error('callbackError', err, data);
    },
    });

    const handleConnect = useCallback(() => {
        if (adaptor) {
            const streamId = `12ans1`;
            const roomId = '5abcd1';

            stream.id = streamId;

            adaptor.joinRoom(roomId, streamId);
        };
    }, [adaptor]);

    useEffect(() => {
    if (adaptor) {
      const verify = () => {
        if (
          adaptor.localStream.current &&
          adaptor.localStream.current.toURL()
        ) {
          return setLocalStream(adaptor.localStream.current.toURL());
        }
        setTimeout(verify, 3000);
      };
      verify();
    }
    }, [adaptor]);
    
    useEffect(() => {
    if (adaptor && Object.keys(adaptor.remoteStreams).length > 0) {
      for (let i in adaptor.remoteStreams) {
        if (i !== stream.id) {
          let st =
            adaptor.remoteStreams[i][0] &&
            'toURL' in adaptor.remoteStreams[i][0]
              ? adaptor.remoteStreams[i][0].toURL()
              : null;
          setRemoteStream(st);
          break;
        } else {
          setRemoteStream(null);
        }
      }
    }
  }, [adaptor, stream.id]);

    
    return (
        <SafeAreaView style={{flex: 1;}}>
        {
            localStream && remoteStream ? (
                <>
                    <RTCView
                        style={{flex: 1}}
                        objectFit="cover"
                        streamURL={remoteStream}
                    />
                    <RTCView
                        style={{ width: 200, height: 200,  position: 'absolute', bottom: 0, right: 0, }}
                        objectFit="cover"
                        streamURL={localStream}
                    />
                </>
            ) : (
                <Button
                    onPress={handleConnect}
                    title="Join room"
                    color="#841584"
                    accessibilityLabel="Connect to antmedia"
                />
            )
        }
        </SafeAreaView>
    )
};