Add AR Cube

.gitignore

@@ -12,3 +12,5 @@ share
 
 # OS X
 .DS_Store
+
+.vscode

examples/ArCube.ipynb

@@ -0,0 +1,182 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e4530313-3a49-45c0-a2fc-f2c5f527d3da",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywebrtc import ArCube\n",
+    "from ipywidgets import FloatSlider, IntSlider, VBox"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3e075776-7c56-4111-9957-6bf0bb48880e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fox = \"https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/Fox/glTF/Fox.gltf\"\n",
+    "duck = \"https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/Duck/glTF/Duck.gltf\"\n",
+    "helmet = \"https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/DamagedHelmet/glTF/DamagedHelmet.gltf\"\n",
+    "brain_stem=\"https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/BrainStem/glTF/BrainStem.gltf\"\n",
+    "duck_scale = 1.0\n",
+    "duck_position = [0, -1, 0]\n",
+    "helmet_position=[0, 0, 0]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ec5a3bb2-c748-4ffb-8a9f-913f79ffe6a1",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc = ArCube(model_url = duck)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0fecaa2a-bec1-4584-846d-1914e7c2f885",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4cdda725-7dce-4ea9-b73c-2e361f0be40a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc.model_url=duck"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "be7eb171-c718-4d03-90dd-c33797629de4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc.model_url=brain_stem"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0a2d48b3-eb94-4a00-bcc3-83db0403be86",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc.stage_color=\"#1a1b26\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0dda1b4c-b10e-4df5-ac00-5ad8241e25c4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc.model_url=helmet\n",
+    "mc.position=helmet_position"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8df08289-e45c-4d37-ba6f-c0b92de442da",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc.show_stage = False"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5e4cadbb-fa05-4ce7-97d3-cef9f0e4b7bf",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "scale_slider = FloatSlider(value=1.0, min=0.5, max=3.0, step=0.5, description='Scale:')\n",
+    "y_slider = IntSlider(value=0,min=-5, max=5, step=1, description='Y position:')\n",
+    "\n",
+    "def handle_scale_slider_change(change):\n",
+    "    mc.scale = change.new\n",
+    "def handle_y_slider_change(change):\n",
+    "    mc.position = [0, change.new, 0]\n",
+    "\n",
+    "scale_slider.observe(handle_scale_slider_change, names='value')\n",
+    "y_slider.observe(handle_y_slider_change, names='value')\n",
+    "\n",
+    "VBox([scale_slider, y_slider])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "448627fb",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5be8fe65-1179-4697-97d7-ede9a97af1d5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc.model_url=brain_stem"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1b747f66-a787-420b-a550-3492a7258b12",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "mc"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0340e014-d62f-4698-9725-2562111a198d",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

ipywebrtc/__init__.py

@@ -4,7 +4,7 @@
 from IPython.display import display
 
 from ._version import __version__, version_info  # noqa
-from .webrtc import CameraStream, WebRTCRoomMqtt  # noqa
+from .webrtc import ArCube, CameraStream, WebRTCRoomMqtt  # noqa
 
 
 def _prefix():

ipywebrtc/webrtc.py

@@ -6,17 +6,7 @@
 
 import traitlets
 from ipywidgets import Audio, DOMWidget, Image, Video, register, widget_serialization
-from traitlets import (
-    Bool,
-    Dict,
-    Instance,
-    Int,
-    List,
-    TraitError,
-    Unicode,
-    observe,
-    validate,
-)
+from traitlets import Bool, Dict, Float, Instance, Int, List, TraitError, Unicode, observe, validate
 
 import ipywebrtc._version
 
@@ -636,6 +626,62 @@ class WebRTCRoomMqtt(WebRTCRoom):
     server = Unicode("wss://iot.eclipse.org:443/ws").tag(sync=True)
 
 
+@register
+class ArCube(DOMWidget):
+    """AR Cube
+
+    Display 3d models in AR
+    You'll need the marker cube `found here <https://stemkoski.github.io/AR-Examples/markers/cube.png>`_
+
+    Attributes:
+    ----------
+    width: Int: 640
+        An integer representing the width of the webcam resolution.
+    height: Int: 480
+        An integer representing the height of the webcam resolution.
+    position: tuple: [0, -1, 0]
+        A list representing the position of an object in 3D space. Values are x, y, z coordinates.
+    scale: float: 1.0
+        A floating-point number representing the scaling factor of the object.
+    model_url: string: ''
+        A Unicode string representing the URL to a 3D model.
+    show_stage: boolean: True
+        A boolean indicating whether the stage (background) is visible.
+    stage_color: string: '#11111B'
+        A Unicode string representing the color of the stage in hexadecimal format. Value must be in hexadecimal format.
+    show_edges: boolean: True
+        A boolean indicating whether the edges outlining the stage are visible.
+    fps_limit: integer: 60
+        Set FPS limit of animation loop
+
+    bg: Unicode: ''
+        A Unicode string representing additional background information.
+
+    """
+
+    _model_module = Unicode("jupyter-webrtc").tag(sync=True)
+    _view_module = Unicode("jupyter-webrtc").tag(sync=True)
+    _model_name = Unicode("ArCubeModel").tag(sync=True)
+    _view_name = Unicode("ArCubeView").tag(sync=True)
+    _view_module_version = Unicode(semver_range_frontend).tag(sync=True)
+    _model_module_version = Unicode(semver_range_frontend).tag(sync=True)
+
+    # TODO: Used during camera initialization, don't sync?
+    width = Int(640).tag(sync=True)
+    height = Int(480).tag(sync=True)
+
+    position = List([0, -1, 0]).tag(sync=True)
+    scale = Float(1.0).tag(sync=True)
+    model_url = Unicode().tag(sync=True)
+    show_stage = Bool(True).tag(sync=True)
+    stage_color = Unicode("#11111B").tag(sync=True)
+    show_edges = Bool(True).tag(sync=True)
+    fps_limit = Int(60).tag(sync=True)
+
+    # TODO: remove?
+    bg = Unicode().tag(sync=True)
+
+
 # add all help strings to the __doc__ for the api docstrings
 for name, cls in list(vars().items()):
     try:

js/css/webrtc.css

@@ -0,0 +1,25 @@
+.a-scene-holder {
+  width: 640px;
+  height: 480px;
+  position: relative;
+  display: block;
+}
+
+.jl-vid {
+  width: 640px;
+  height: 480px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  /* z-index: -2; */
+}
+
+.jl-canvas {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+.ar-container {
+  min-height: 480px;
+}