Skip to content

fix(demos): fix video-element webcam moveTo error on Fabric 6#357

Open
kiranparajuli589 wants to merge 1 commit into
fabricjs:gh-pagesfrom
kiranparajuli589:fix/video-element
Open

fix(demos): fix video-element webcam moveTo error on Fabric 6#357
kiranparajuli589 wants to merge 1 commit into
fabricjs:gh-pagesfrom
kiranparajuli589:fix/video-element

Conversation

@kiranparajuli589

Copy link
Copy Markdown

Problem

The video-element demo throws TypeError: webcam.moveTo is not a function
after the user grants camera permission, leaving the webcam preview black.

fabric.Object#moveTo(index) was removed in Fabric 6 (per-object stacking
moved to canvas methods). The demo runs under two Fabric versions:

  • v5.2.1 on the live demo page (_layouts/demo.html loads lib/fabric.js) — moveTo works.
  • v6 via the "Open in CodePen" button (_includes/codepen.html loads
    fabric@latest) and the new fabricjs.com — moveTo throws.

Fix

Feature-detect the API so the demo works under both versions: use
canvas.sendObjectToBack(webcam) when available (Fabric 6+), otherwise fall
back to webcam.moveTo(0) (Fabric 5). sendObjectToBack is the exact v6
equivalent of moveTo(0).

Only posts/demos/_posts/2014-10-16-video-element.html is touched.

Testing

  • Local (jekyll serve, v5.2.1): open /demos/video-element/, grant camera →
    no console error, webcam renders behind the sample video.
  • CodePen (v6 via unpkg): same demo, grant camera → no moveTo TypeError.

Signed-off-by: Kiran Parajuli 39373750+kiranparajuli589@users.noreply.github.com

Signed-off-by: Kiran Parajuli <39373750+kiranparajuli589@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant