Descripción general

La API de Chillin Render te permite especificar el contenido del video y los parámetros que se van a renderizar definiendo una estructura JSON como la que se muestra a continuación.

Ve a Render Console para obtener créditos de la API de Render y generar tu clave de API de Render
Envía una solicitud POST al punto de acceso de la API de Render con tu clave de API:

curl-example.sh

curl -X POST https://render-api.chillin.online/render/v1 \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_KEY" \
-d @request.json

request.json

{
"compositeWidth": 1920,
"compositeHeight": 1080,
"fps": 30,
"projectData": {
  "type": "",
  "width": 1920,
  "height": 1080,
  "fill": "#000000",
  "view": [
    {
      "id": "bba95c7f-652b-4380-b166-6bece989f527",
      "type": "Image",
      "start": 0,
      "duration": 5,
      "trackIndex": 0,
      "x": 0,
      "y": 0,
      "width": 3629,
      "height": 5444,
      "blendMode": "normal",
      "anchorX": 1814.5,
      "anchorY": 2722,
      "rotation": 0,
      "scaleX": 0.19838354151359294,
      "scaleY": 0.19838354151359294,
      "alpha": 1,
      "skewX": 0,
      "skewY": 0,
      "hidden": false,
      "locked": false,
      "keyframes": [],
      "externalUrl": "https://images.pexels.com/photos/33189512/pexels-photo-33189512.jpeg",
      "ext": "jpeg"
    }
  ],
  "audio": [],
  "effect": [],
  "transition": [],
  "version": 0,
  "duration": 5
}
};

La API opera en modo asíncrono y devuelve una respuesta como esta:

async_response.json

{
"code": 0,
"data": {
  "message": "Async render request submitted successfully",
  "render_id": 100000,
  "status": "processing"
},
"msg": "success"
}

Conceptos Clave

Todos los objetos JSON incluyen un objeto de proyecto de video, que especifica el ancho compuesto del video, la altura compuesta y la resolución.

El objeto del proyecto contiene los parámetros básicos para renderizar el video, como ancho, altura, duración, color de fondo y más.

El proyecto también incluye uno o más elementos, donde cada elemento representa un componente de video, como un video, imagen, texto, forma, audio o efecto.

Cada elemento contiene parámetros específicos para el componente, como posición, tamaño, color, contenido, y así sucesivamente.

project.json

{
"compositeWidth": 1920,
"compositeHeight": 1080,
"fps": 30,
"projectData": {
  "type": "",
  "width": 1920,
  "height": 1080,
  "fill": "#000000",
  "view": [
    {
      "id": "8ecf7475-2c6c-47f9-827b-a09c7913f4c0",
      "type": "Image",
      "start": 0,
      "duration": 5,
      "trackIndex": 0,
      "x": -570.0335392757963,
      "y": -170.90659033307685,
      "blendMode": "normal",
      "anchorX": 1302,
      "anchorY": 2312,
      "rotation": 0,
      "scaleX": 0.23356401384083045,
      "scaleY": 0.23356401384083045,
      "alpha": 1,
      "skewX": 0,
      "skewY": 0,
      "keyframes": [],
      "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
      "ext": "jpeg"
    }
  ],
  "audio": [],
  "effect": [],
  "transition": [],
  "version": 0,
  "duration": 5
}
};

Espacio 3D y Cámara

El motor de renderizado admite tanto elementos 2D como 3D. Mientras que el lienzo se define con width y height en píxeles, el motor utiliza una cámara de perspectiva para el renderizado 3D:

Sistema de Coordenadas: Las coordenadas x e y representan posiciones en el plano del lienzo 2D. La coordenada z controla la profundidad en el espacio 3D.
Proyección Perfecta: En z=0, una unidad mundial equivale a un píxel, manteniendo la compatibilidad con flujos de trabajo 2D.
Rotaciones 3D: Los elementos pueden ser rotados alrededor de los ejes X, Y y Z usando las propiedades rotationX, rotationY y rotation (eje Z).

Este diseño permite una mezcla fluida de elementos 2D y 3D en el mismo proyecto. Los elementos 2D tradicionales (con z=0) se renderizan exactamente como antes, mientras que los elementos 3D pueden ser posicionados y rotados en el espacio tridimensional.

Ejemplo de Elemento 3D

Aquí hay un ejemplo simple de un elemento cúbico 3D:

3d-cube-example.json

{
"id": "3d-cube-001",
"type": "3D",
"start": 0,
"duration": 5,
"trackIndex": 0,
"x": 960,
"y": 540,
"z": 0,
"width": 200,
"height": 200,
"anchorX": 100,
"anchorY": 100,
"rotation": 0,
"rotationX": 30,
"rotationY": 45,
"scaleX": 1,
"scaleY": 1,
"scaleZ": 1,
"alpha": 1,
"ext": "geometry",
"geometryType": "cube",
"nodeCategory": "basic",
"geometryColor": "#4A90E2"
}

Diferencias clave de los elementos 2D:

type: "3D" identifica esto como un elemento 3D
z, rotationX, rotationY y scaleZ habilitan transformaciones 3D
geometryType especifica la forma 3D (cubo, esfera, cilindro, etc.)
geometryColor establece el color base de la geometría 3D

Para más detalles sobre elementos 3D, consulta la documentación de Elemento 3D.

Esquema JSON

Tu JSON de solicitud debe adherirse estrictamente al esquema JSON definido en este documento. Puedes probar y generar el JSON de solicitud correspondiente en el Editor de Video Chillin.