# Advanced Usage

> This section outlines key considerations and common issues when using the player component.

## Business Scenarios

### Native Components

The player is a **native component**. When custom components (such as swipe dials or draggable gesture areas) are layered on top of it, the gesture response area may extend beyond the native component itself. This can cause events to be intercepted by the player, affecting business interaction experience.

To ensure proper interaction, it is recommended to temporarily disable the native component’s gesture response by calling `ty.nativeDisabled(true)` **before** the user operates a custom component. After the operation is complete, call `ty.nativeDisabled(false)` to **restore** gesture response.

For more information, refer to [Native Components](https://developer.tuya.com/en/miniapp/develop/miniapp/component/native-component/native-component#native-component).

```jsx
// Drag Start
const handTouchStart = value => {
    ty.nativeDisabled(true);
};

// While Dragging
const handTouchMove = value => {
    ty.nativeDisabled(true);
};
// Drag End
const handTouchEnd = value => {
    ty.nativeDisabled(true);
};

```

### Custom Components on the Player

When adding clickable areas on top of the player—such as screenshot buttons, intercom buttons, etc.—you must wrap them using the [CoverView](https://developer.tuya.com/en/miniapp/develop/ray/component/view-container/cover-view) component.

**Example Code**

```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';
import { View, Text, CoverView } from '@ray-js/ray';

function Page() {

  const [show, setShow] = useState(false)
  const deviceId = '1234567890xxxxxx';
  // Device online status
  const onlineStatus = true; 
  // Get player instance – allows calling methods on the player
  const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
  };
  // Listen to player stream status
  const onChangeStreamStatus = (status) => {
     console.log(status, 'status');
     // When the player starts streaming, show the screenshot button,
    // or customize your own display logic
     if( status === 1002 ) {
        setShow(true);
     }
  };

  return (
    // playerContainer is the player container,
    // used to define the size of the player area
    <View className={Styles.playerContainer}>
      <IpcPlayer
          objectFit='contain'
          onCtx={onCtx}
          devId={deviceId}
          onlineStatus={onlineStatus}
          onChangeStreamStatus={onChangeStreamStatus}
        />

        <View className={Styles.featureContainer}>
          {show && <CoverView className={Styles.coverView}>
            <Text>screenshot</Text> 
          </CoverView> }  
        </View>
     </View>    
  )
}

```

**Style Definition**

```less
.playerContainer {
  width: 100%;
  height: 300px;
  position: relative;
}
.featureContainer {
  //  Only handle positioning 
  // Width and height should be defined by the content inside
  position: absolute;
  top: 0;
  left: 0
}
.coverView {
    width: 100px;
    height: 20px;
}

```


## FAQ

### 1. Player appears white (no video) when streaming

Ensure that the container of the player component does **not** have a background color set.  
Refer to the [Native Component Documentation](https://developer.tuya.com/en/miniapp/develop/miniapp/component/native-component/native-component#native-component) for details.

### 2. Troubleshooting Video Stream Loading Errors

Starting from App version **650** and [IpcPlayer](https://www.npmjs.com/package/@ray-js/ray-ipc-player) **v2.0.20 or later**, if the video stream fails to load, an **error code** will be returned.  
Developers can use this error code to troubleshoot specific issues.

## Appendix

### Error Codes

| Code | Description |
|------|-------------|
| -60000 | No available traffic, please recharge soon |
| -1000 | Invalid or empty request parameters (parameter validation failed) |
| -1001 | API call failed |
| -1301 | API call failed |
| -30 | API call failed |
| -1002 | Failed to parse API result [Invalid data] |
| -1303 | Failed to parse API result [Invalid data] |
| -20003 | Failed to parse API result [Invalid data] |
| -5 | Invalid parameter, method parameter is illegal |
| -1010 | Invalid parameter, method parameter is illegal |
| -1310 | Invalid parameter, method parameter is illegal |
| -20002 | Invalid parameter, method parameter is illegal |
| -40001 | Invalid parameter, method parameter is illegal |
| -1011 | Returned result is empty |
| -1311 | Returned result is empty |
| -40002 | Returned result is empty |
| -1020 | Unsupported P2PType |
| -1 | Not initialized |
| -1360 | Camera object not initialized or has been destroyed |
| -10000 | Camera object not initialized or has been destroyed |
| -1361 | Failed to create camera object |
| -1362 | Camera object connection error / not connected |
| -10001 | Camera object connection error / not connected |
| -1390 | Device offline |
| -10006 | Device offline |
| -1 | General error code |
| -40000 | cameraSDK general error |
| -40200 | General streaming error |
| -40300 | General decoding error |
| -40400 | General cloud storage error |
| -11 | Invalid session |
| -10002 | Session expired |
| -3 | Timeout |
| -10003 | Timeout |
| -40201 | Network data fetch timeout |
| -40202 | Streaming timeout, more data needed |
| -40203 | Decoding timeout |
| -33 | P2P session fetch timeout |
| -38 | DTLS handshake timeout |
| -55 | Connection timeout (detail of -3) |
| -56 | Connection timeout (detail of -3) |
| -57 | Connection timeout (detail of -3) |
| -58 | Connection timeout (detail of -3) |
| -1004 | P2P session was cancelled midway |
| -1008 | Device error occurred |
| -41001 | Device not responding |
| -39 | Peer not responding to preconnect command |
| -20001 | Invalid operation |
| -20004 | Operation interrupted |
| -40205 | Streaming process interrupted by user |
| -20005 | Operation not allowed |
| -20007 | Device busy |
| -20008 | Memory allocation failed |
| -29 | Insufficient memory |
| -30012 | Incorrect audio parameters |
| -30060 | Invalid parameter returned by device |
| -30061 | Data transmission error |
| -30082 | No first I-frame received [No data] |
| -12 | Session closed by peer |
| -13 | Session closed |
| -14 | Session closed locally |
| -100 | Session closed by peer |
| -115 | Device in restricted streaming mode |
| -23 | Session limit reached |
| -104 | Session limit reached, session closed |
| -24 | Invalid preconnect |
| -25 | Preconnect disconnected |
| -102 | Session detected, but device in privacy mode, session closed |
| -103 | Failed to create data sending thread |
| -105 | Authentication failed |
| -108 | Zombie session |
| -114 | Application layer resource request failed |
| -50 | No answer or candidate received |
| -52 | Socket connection failed |
| -53 | Peer socket connection failed |
| -54 | tcprelay service not responding (auth failed or device ID incorrect) |
| -20006 | Current app version does not support this protocol, please update the app |
| -30083 | Only MJPEG stream is supported |
| -40301 | Invalid decoding input |
| -40302 | Invalid decoding output |
| -40303 | Unsupported pixel format |
| -41000 | Device general error code |
| -40206 | Device exception during streaming |
| -54 | tcprelay service not responding (auth failed or device ID incorrect) |