Shadow - Fabric.js
HTML
<video id='video1' style="display:none;" controls>
<source src="http://dev.myluxedo.com/static/content/projector/video/15V.mp4">
</video>
<canvas id="c" width="1200" height="700" style="border: 1px solid rgb(204, 204, 204); position: absolute; width: 1200px; height: 700px; left: 0px; top: 0px; touch-action: none; user-select: none;" class="lower-canvas"></canvas>
JavaScript
HomeDemosTutorialDocsCustom BuildSupportTests/BenchmarksTeam
Fabric.js demos · HTML5 <video> element
var canvas = new fabric.Canvas('c');
var video1El = document.getElementById('video1');
var video2El = document.getElementById('video2');
var webcamEl = document.getElementById('webcam');
var video1 = new fabric.Image(video1El, {
left: 200,
top: 300,
angle: -15,
originX: 'center',
originY: 'center',
objectCaching: false,
});
var video2 = new fabric.Image(video2El, {
left: 1000,
top: 350,
angle: 15,
originX: 'center',
originY: 'center',
objectCaching: false,
});
var webcam = new fabric.Image(webcamEl, {
left: 539,
top: 328,
angle: 94.5,
originX: 'center',
originY: 'center',
objectCaching: false,
});
canvas.add(video1);
video1.getElement().play();
canvas.add(video2);
video2.getElement().play();
// adding webcam video element
getUserMedia({video: true}, function getWebcamAllowed(localMediaStream) {
var video = document.getElementById('webcam');
video.src = window.URL.createObjectURL(localMediaStream);
canvas.add(webcam);
webcam.moveTo(0); // move webcam element to back of zIndex stack
webcam.getElement().play();
}, function getWebcamNotAllowed(e) {
// block will be hit if user selects "no" for browser "allow webcam access" prompt
});
// making navigator.getUserMedia cross-browser compatible
function getUserMedia() {
var userMediaFunc = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (userMediaFunc) userMediaFunc.apply(navigator, arguments);
}
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});