Godot WebView

https://godotwebview.com/developer/
Admin
Godot WebView is a plugin that integrates web technologies into Godot game engine, enabling...
Tokens:15,459
Snippets:83
Trust Score:4.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Install Vue.js Project Dependencies using npm

Source: https://godotwebview.com/developer/tutorial-spa-vuejs-single-page-application

After generating a new Vue.js project, this command is used to navigate into the project directory and install all the necessary dependencies defined in the `package.json` file. This step is crucial before building or running the Vue.js application.

```bash
cd test
npm install

```

--------------------------------

### Manual Texture Setup for WebView in Godot

Source: https://godotwebview.com/developer/getting-started/hello-world

Demonstrates how to manually set up a texture for the WebView node, allowing it to be applied to custom meshes. This involves connecting to the 'view_ready' signal, creating a StandardMaterial3D, and assigning the WebView's texture to the material's albedo. This method requires manual implementation of input handlers.

```gdscript
@onready var view = $WebView

func _ready():
    view.connect("view_ready", _on_view_ready)

func _on_view_ready():
    if view.load():
        # create a material
        var mat: StandardMaterial3D = StandardMaterial3D.new()
        mat.shading_mode = BaseMaterial3D.SHADING_MODE_UNSHADED
        mat.texture_repeat = false
        mat.albedo_texture_force_srgb = true
        mat.transparency = BaseMaterial3D.TRANSPARENCY_ALPHA
        # note; you may call `get_texture` multiple times, it returns the same texture
        mat.albedo_texture = view.get_texture() 
        # apply your material to some mesh here

```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Jinja2 HTML Template Structure

Source: https://godotwebview.com/developer/jinja2/jinja2

An example of a Jinja2 template file (`.jinja2`) demonstrating basic syntax for variable substitution, conditional logic (`{% if %}`), and loops (`{% for %}`). This template is used with the GDScript rendering example.

```html
<html>
<body>
<h1>{{ title }}</h1>

{% if foo %}
<p>foo was true</p>
{% else %}
<p>foo was false</p>
{% endif %}

<ul>
{% for val in bar.items %}
  <li>{{ val }}</li>
{% endfor %}
</ul>

<ul>
  <li>num: {{ num + 0.7 }}</li>
  <li>vector: {{ vec.x | round(2) }}, {{ vec.y | round(2) }}</li>
</li>

</body>
</html>

```

--------------------------------

### Control Keyboard/Mouse Capture in Godot WebView

Source: https://godotwebview.com/developer/getting-started/keyboard-mouse

Programmatically control whether Godot WebView captures keyboard and mouse input. These methods allow fine-grained control over input handling, considering factors like screen resolution and keyboard locale. Useful for custom input management within web views.

```gdscript
set_capture_keyboard(enabled: bool)
get_capture_keyboard()
set_capture_mouse(enabled: bool)
get_capture_mouse()
```

--------------------------------

### Manual Input Handling for WebView in Godot

Source: https://godotwebview.com/developer/getting-started/hello-world

Provides examples of manually handling input events for the WebView node in Godot. This is necessary when not using automatic renderers like TextureRect or MeshInstance3D. It covers mouse clicks, movement, wheel events, and key events.

```gdscript
view.key_event(...);
view.mouse_click(...);
view.mouse_move(...);
view.mouse_wheel_up(...);
view.mouse_wheel_down(...);

```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### QuickView API

Source: https://godotwebview.com/developer/api/quickview

Documentation for the QuickView API, which is used to render QtQuick content within Godot.

```APIDOC
## QuickView API

### Description
Render QtQuick content. This is auto-generated (for now).

### Method
N/A (Class Documentation)

### Endpoint
N/A (Class Documentation)

### Properties
#### Component Properties
- **component** (String) - Optional - The name of the component to load. Defaults to "Splash".
  - `get_component_name()`
  - `set_component_name(String component)`
- **module** (String) - Optional - The name of the module containing the component. Defaults to "Splash".
  - `get_module_name()`
  - `set_module_name(String module)`
- **resolution** (Vector2) - Optional - The resolution for rendering the QtQuick content. Defaults to Vector2(2560, 1440).
  - `get_resolution()`
  - `set_resolution(Vector2 resolution)`

### Request Example
```json
{
  "component": "MyCustomComponent",
  "module": "MyModule",
  "resolution": {"x": 1920, "y": 1080}
}
```

### Response
#### Success Response (N/A)
N/A (Class Documentation)

#### Response Example
N/A (Class Documentation)
```

--------------------------------

### QCameraView API

Source: https://godotwebview.com/developer/api/qcameraview

Documentation for the QCameraView API, which allows displaying a camera input feed. This class inherits from QuickView and is known to work on Linux and Windows.

```APIDOC
## QCameraView API

### Description
Provides functionality to display a camera input feed. This class inherits from `QuickView` and is compatible with Linux and Windows operating systems. It is currently auto-generated.

### Public Types

*   **CameraError** enum:
    *   `NoError`
    *   `Error`

*   **CameraExposureMode** enum:
    *   `ExposureAuto`
    *   `ExposureManual`
    *   `ExposurePortrait`
    *   `ExposureNight`
    *   `ExposureSports`
    *   `ExposureSnow`
    *   `ExposureBeach`
    *   `ExposureAction`
    *   `ExposureLandscape`
    *   `ExposureNightPortrait`
    *   `ExposureTheatre`
    *   `ExposureSunset`
    *   `ExposureSteadyPhoto`
    *   `ExposureFireworks`
    *   `ExposureParty`
    *   `ExposureCandlelight`
    *   `ExposureBarcode`

*   **CameraFeature** enum:
    *   `ColorTemperature`
    *   `ExposureCompensation`
    *   `IsoSensitivity`
    *   `ManualExposureTime`
    *   `CustomFocusPoint`
    *   `FocusDistance`

*   **CameraFlashMode** enum:
    *   `FlashOff`
    *   `FlashOn`
    *   `FlashAuto`

*   **CameraFocusMode** enum:
    *   `FocusModeAuto`
    *   `FocusModeAutoNear`
    *   `FocusModeAutoFar`
    *   `FocusModeHyperfocal`
    *   `FocusModeInfinity`
    *   `FocusModeManual`

*   **CameraTorchMode** enum:
    *   `TorchOff`
    *   `TorchOn`
    *   `TorchAuto`

*   **CameraWhiteBalanceMode** enum:
    *   `WhiteBalanceAuto`
    *   `WhiteBalanceManual`
    *   `WhiteBalanceSunlight`
    *   `WhiteBalanceCloudy`
    *   `WhiteBalanceShade`
    *   `WhiteBalanceTungsten`
    *   `WhiteBalanceFluorescent`
    *   `WhiteBalanceFlash`
    *   `WhiteBalanceSunset`

### Properties

*   **active** (bool) - Gets or sets the active state of the camera.
    *   `get_is_active()`
    *   `set_active(bool active)`

*   **auto_play** (bool) - Gets or sets whether the camera feed should auto-play. Default: `true`.
    *   `get_auto_play()`
    *   `set_auto_play(bool auto_play)`

*   **color_temperature** (int) - Gets or sets the color temperature of the camera feed.
    *   `get_color_temperature()`
    *   `set_color_temperature(int color_temperature)`

*   **component** (String) - Gets or sets the camera component name. Default: `"Camer...`.
    *   `get_component_name()`
    *   `set_component_name(String component)`

*   **custom_focus_point** (Vector2) - Gets or sets a custom focus point for the camera.
    *   `get_custom_focus_point()`
    *   `set_custom_focus_point(Vector2 custom_focus_point)`

*   **error** (QCameraView.CameraError) - Gets the current camera error status.
    *   `get_error()`

*   **error_string** (String) - Gets a string representation of the current camera error.
    *   `get_error_string()`

*   **exposure_compensation** (float) - Gets or sets the exposure compensation for the camera.
    *   `get_exposure_compensation()`
    *   `set_exposure_compensation(float exposure_compensation)`

*   **exposure_mode** (QCameraView.CameraExposureMode) - Gets or sets the exposure mode of the camera. Default: `0`.
    *   `get_exposure_mode()`
    *   `set_exposure_mode(QCameraView.CameraExposureMode exposure_mode)`

*   **exposure_time** (float) - Gets the current exposure time of the camera.
    *   `get_exposure_time()`

*   **flash_mode** (QCameraView.CameraFlashMode) - Gets or sets the flash mode of the camera. Default: `0`.
    *   `get_flash_mode()`
    *   `set_flash_mode(QCameraView.CameraFlashMode flash_mode)`

*   **flash_ready** (bool) - Indicates whether the flash is ready to be used.
    *   `get_is_flash_ready()`

*   **focus_distance** (float) - Gets or sets the focus distance of the camera.
    *   `get_focus_distance()`
    *   `set_focus_distance(float focus_distance)`

*   **focus_mode** (QCameraView.CameraFocusMode) - Gets or sets the focus mode of the camera.
    *   `get_focus_mode()`
    *   `set_focus_mode(QCameraView.CameraFocusMode focus_mode)`

*   **focus_point** (Vector2) - Gets the current focus point of the camera.
    *   `get_focus_point()`

*   **iso_sensitivity** (int) - Gets the current ISO sensitivity of the camera.
    *   `get_iso_sensitivity()`

*   **manual_exposure_time** (float) - Gets or sets the manual exposure time for the camera.
    *   `get_manual_exposure_time()`
    *   `set_manual_exposure_time(float manual_exposure_time)`

*   **manual_iso_sensitivity** (int) - Gets or sets the manual ISO sensitivity for the camera.
    *   `get_manual_iso_sensitivity()`
    *   `set_manual_iso_sensitivity(int manual_iso_sensitivity)`

*   **maximum_zoom_factor** (float) - Gets the maximum zoom factor supported by the camera.
    *   `get_maximum_zoom_factor()`

*   **minimum_zoom_factor** (float) - Gets the minimum zoom factor supported by the camera.
    *   `get_minimum_zoom_factor()`

*   **module** (String) - Gets or sets the camera module name. Default: `"Multi...`.
    *   `get_module_name()`
    *   `set_module_name(String module)`

*   **resolution** (Vector2) - Gets or sets the resolution of the camera feed. Default: `Vector2(1920, 1080)`.
    *   `get_resolution()`
    *   `set_resolution(Vector2 resolution)`

*   **torch_mode** (QCameraView.CameraTorchMode) - Gets or sets the torch mode of the camera. Default: `0`.
    *   `get_torch_mode()`
    *   `set_torch_mode(QCameraView.CameraTorchMode torch_mode)`

*   **white_balance_mode** (QCameraView.CameraWhiteBalanceMode) - Gets or sets the white balance mode of the camera. Default: `0`.
    *   `get_white_balance_mode()`
    *   `set_white_balance_mode(QCameraView.CameraWhiteBalanceMode white_balance_mode)`

*   **zoom_factor** (float) - Gets or sets the current zoom factor of the camera.
    *   `get_zoom_factor()`
    *   `set_zoom_factor(float zoom_factor)`

```

--------------------------------

### Untitled

No description

--------------------------------

### QScreenCaptureView API

Source: https://godotwebview.com/developer/api/qscreencaptureview

Documentation for the QScreenCaptureView class, which allows capturing a display using ffmpeg with hardware acceleration. It is known to work on Linux + X11 and Windows.

```APIDOC
## QScreenCaptureView

### Description
Capture a display with ffmpeg, hardware accelerated. Known to work on Linux + X11, and Windows.

### Method
N/A (Class Documentation)

### Endpoint
N/A (Class Documentation)

### Parameters
N/A (Class Documentation)

### Request Example
N/A (Class Documentation)

### Response
#### Success Response (N/A)
N/A (Class Documentation)

#### Response Example
N/A (Class Documentation)

## Properties

### component
- **component** (String) - Optional - The name of the component. Defaults to "Scree...".
  - `get_component_name()`
  - `set_component_name(String component)`

### module
- **module** (String) - Optional - The name of the module. Defaults to "Multi...".
  - `get_module_name()`
  - `set_module_name(String module)`

### physical_screen
- **physical_screen** (String) - Optional - The identifier for the physical screen to capture. Defaults to "0".
  - `get_physical_screen()`
  - `set_physical_screen(String physical_screen)`

## Methods

### get_physical_screens

- **get_physical_screens**() - Returns an Array of available physical screens.
```

--------------------------------

### Download YouTube Video URL with yt-dlp

Source: https://godotwebview.com/developer/multimedia/video-player

This command-line snippet uses yt-dlp to extract the direct URL of a YouTube video. This URL can then be used to stream the video using compatible players or libraries. Ensure yt-dlp is installed and in your system's PATH.

```bash
yt-dlp --print urls https://www.youtube.com/watch?v=iEpJwprxDdk
```

--------------------------------

### BaseView Methods

Source: https://godotwebview.com/developer/api/baseview

Provides an overview of the available methods for the BaseView class. These methods cover essential functionalities such as destroying the view, getting its RID, retrieving the texture, handling input events (keyboard, mouse, wheel), loading content, and managing view state changes.

```gdscript
func destroy() -> void:
  # implementation

func get_RID() -> RID:
  # implementation

func get_texture() -> Texture2DRD:
  # implementation

func key_event(godot_keycode: int, event_type: int, text: String) -> void:
  # implementation

func load() -> bool:
  # implementation

func mouse_click(btn: int, event_type: int, pos_x: int, pos_y: int) -> void:
  # implementation

func mouse_move(pos_x: int, pos_y: int) -> void:
  # implementation

func mouse_wheel_down(pos_x: int, pos_y: int) -> void:
  # implementation

func mouse_wheel_up(pos_x: int, pos_y: int) -> void:
  # implementation

func on_unloaded_warning_timeout() -> void:
  # implementation

func size_changed() -> void:
  # implementation
```

--------------------------------

### Build Vue.js Project using npm

Source: https://godotwebview.com/developer/tutorial-spa-vuejs-single-page-application

This command is used to build the Vue.js project for production. It triggers Vite to bundle the application, optimize assets, and generate static files in the `dist/` directory. These built files are then intended to be moved into the Godot project's resource system for serving via the webview.

```bash
npm run build

```

--------------------------------

### Untitled

No description

--------------------------------

### QVideoPlayerView API

Source: https://godotwebview.com/developer/api/qvideoplayerview

Documentation for the QVideoPlayerView class, which handles video rendering with hardware acceleration.

```APIDOC
## QVideoPlayerView

Render video content with ffmpeg, hardware accelerated. H264 and H265 are disabled by default due to codec licensing.
This Node is a technology preview and known to work on Linux + X11 + NVidia drivers, and Windows. MacOS is untested.

### Public Types

*   **PlaybackState**: { StoppedState, PlayingState, PausedState }
*   **MediaStatus**: { NoMedia, LoadingMedia, LoadedMedia, StalledMedia, BufferingMedia, BufferedMedia, EndOfMedia, InvalidMedia }
*   **MediaError**: { NoError, ResourceError, FormatError, NetworkError, AccessDeniedError }
*   **MediaLoops**: { Infinite, Once }
*   **MediaStretch**: { Stretch, PreserveAspectFit, PreserveAspectCrop }

### Properties

*   **active_audio_track** (int) - Get or set the active audio track.
*   **active_subtitle_track** (int) - Get or set the active subtitle track.
*   **active_video_track** (int) - Get or set the active video track.
*   **audio_tracks** (Array) - Get available audio tracks.
*   **auto_play** (bool, default = true) - Whether the video should autoplay.
*   **buffer_progress** (float) - Get the current buffer progress.
*   **component** (String, default = "Video...") - Set the component name.
*   **controls_auto_hide** (bool, default = false) - Whether controls should auto-hide.
*   **controls_enabled** (bool, default = true) - Whether controls are enabled.
*   **duration** (int) - Get the total duration of the media.
*   **error** (QVideoPlayerView.MediaError) - Get the current media error.
*   **error_string** (String) - Get a string representation of the error.
*   **fill_mode** (QVideoPlayerView.MediaStretch, default = 1) - Set the fill mode for the video.
*   **has_audio** (bool) - Check if the media has audio.
*   **has_video** (bool) - Check if the media has video.
*   **loops** (QVideoPlayerView.MediaLoops) - Set the looping behavior.
*   **media_status** (QVideoPlayerView.MediaStatus) - Get the current media status.
*   **metadata** (Dictionary) - Get the media metadata.
*   **module** (String, default = "Multi...") - Set the module name.
*   **muted** (bool, default = false) - Whether the audio is muted.
*   **playback_rate** (float) - Get or set the playback speed.
*   **playback_state** (QVideoPlayerView.PlaybackState) - Get the current playback state.
*   **position** (int) - Get or set the current playback position.
*   **resolution** (Vector2, default = Vector2(1920, 1080)) - Get or set the video resolution.
*   **seekable** (bool) - Check if the media is seekable.
*   **source** (String, default = "") - Get or set the media source URL or path.
*   **subtitle_tracks** (Array) - Get available subtitle tracks.
*   **video_tracks** (Array) - Get available video tracks.
*   **volume** (float) - Get or set the audio volume.

### Methods

*   **get_current_subtitle_name**() -> String - Get the name of the current subtitle track.
*   **pause**() - Pauses the video playback.
*   **play**() - Starts or resumes video playback.
*   **stop**() - Stops the video playback.
```

--------------------------------

### Create Vue.js Project using npm

Source: https://godotwebview.com/developer/tutorial-spa-vuejs-single-page-application

This command initiates the creation of a new Vue.js project using the Vue project scaffolding tool. It prompts the user for various configuration options, including project name, TypeScript support, JSX, Vue Router, Pinia, testing solutions, ESLint, Prettier, and Vue DevTools. The Vue Router option is specifically highlighted for demonstrating SPA routing capabilities.

```bash
npm create vue@latest

```

--------------------------------

### Untitled

No description
Tokens:
Raw