enx-rtc-react-native/src/EnxStream.js

It is a react native component for Enablex users.

import React, { Component } from "react";
import PropTypes from "prop-types";
import { View} from "react-native";
import { Enx, removeNativeEvents, setNativeEvents } from "./Enx";
import EnxPlayerView from "./views/EnxPlayerView";
import { sanitizePlayerViewEvents } from "./helpers/EnxStreamHelper";
import 'react-native-get-random-values';
import {v4 as uuid4} from "uuid";
import { isNull } from "underscore";
class EnxStream extends Component {
  constructor(props) {
    super(props);
    this.state = {
      streamId: this.props.isPreview ? "abc-123-xyz" : uuid4(),
      isFrontCamera: this.props.isFrontCamera,
      isStreamInitialized: false // Add flag to track stream initialization
    };
  }

  componentDidMount() {
    if (this.props.eventHandlers != null) {
      const publisherEvents = sanitizePlayerViewEvents(this.props.eventHandlers);
      setNativeEvents(publisherEvents);
    }
    // Fix timing issue: Ensure initStream completes before rendering
    // Add small delay to prevent race condition with createPublisherView
    
    // Use requestAnimationFrame to ensure component is fully mounted
    requestAnimationFrame(() => {
      this.initializeStream();
    });
  }

  initializeStream = (retryCount = 0) => {
    const maxRetries = 3;
    const baseDelay = 50;
    
    setTimeout(() => {
      try {
        // Safety check: Ensure Enx and initStream method are available
        if (!Enx || typeof Enx.initStream !== 'function') {
          throw new Error('Enx.initStream method not available');
        }
        
        Enx.initStream(this.state.streamId, this.state.isFrontCamera);
        // Mark stream as initialized after successful call
        this.setState({ isStreamInitialized: true });
       // console.log('EnxStream initialized successfully:', this.state.streamId);
      } catch (error) {
        console.warn('EnxStream initStream error:', error);
        if (retryCount < maxRetries) {
         // console.log(`Retrying initStream, attempt ${retryCount + 1}/${maxRetries}`);
          this.initializeStream(retryCount + 1);
        } else {
          // Even if initialization fails, show the view to prevent blank screen
         // console.error('EnxStream initialization failed after max retries:', error.message);
          this.setState({ isStreamInitialized: true });
        }
      }
    }, baseDelay + (retryCount * 25)); // Increase delay with each retry
  }
  //loadView(){}

  componentWillUnmount() {
    if (this.props.eventHandlers != null) {
      const events = sanitizePlayerViewEvents(this.props.eventHandlers);
      removeNativeEvents(events); // <-- THIS is important
    }
  }

  render() {
    const { streamId, isFrontCamera, isStreamInitialized } = this.state;
    //console.log("EnxStream.id", streamId, "initialized:", isStreamInitialized);
    
    // Don't render the native view until stream is initialized
    if (!isStreamInitialized) {
      return (
        <View style={[{ backgroundColor: '#000' }, this.props.style]}>
          {/* Placeholder while initializing */}
        </View>
      );
    }
    
    return <EnxPlayerView streamId={streamId} isLocal="local" isFrontCamera={isFrontCamera} {...this.props} />;
  }
}

const viewPropTypes = View.propTypes;

EnxStream.propTypes = {
  ...viewPropTypes,
  eventHandlers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  isPreview: PropTypes.bool,
  isFrontCamera: PropTypes.bool
};

EnxStream.defaultProps = {
  eventHandlers: {},
  isPreview: false,
  isFrontCamera: true
};

export default EnxStream;