0

I tried setting up Ant Media using the WebRTC React Native package. Unfortunately, I could not get it to work properly after spending a day.

I ended up building an interface to React-Native from the Ant Media iOS library. It works very well. However, I'm not a Java developer and need to support Android. Does anyone have a working example using React-native-webrtc or anything else to help me get Android working?

Thank you!

Logan Head
  • 11
  • 1
  • As I know, some of our customers are using this library -> https://github.com/react-native-webrtc/react-native-webrtc Could you please give us more detail about your use case? – Selim Emre Toy Jun 30 '20 at 17:10
  • @logan-head can you provide me sample of your app so i can use ios app interface which you have created – Vivek Gupta Dec 01 '20 at 11:18

1 Answers1

4

I'm working on a port of webrtc-adaptor to RN using react-native-webrtc, you can find here the package I'm working on https://www.npmjs.com/package/rn-antmedia, I'm using on an app and for me it's working well.

You can install by npm or yarn, yarn add rn-antmedia, this lib use react-native-webrtc, then you will need to install this lib too and take some configuration.

Currently this lib is under development, and some antmedia features could not work properly. I'm creating an example app with some cases this lib could work.

This is an example how to use the 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>
    )
};
Vitor
  • 41
  • 3