I want use image-filters to video. ()
but It's stops video. How to effect to video in fabric.js?
For example, how do I change the color of a video?
↑I do not use CSS filter. Can someone explain please?
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="SHIFT-JIS">
<title>sample</title>
<script src=".min.js" type="text/javascript"></script>
<script src=".js/2.2.3/fabric.min.js"></script>
<script>
$(document).ready(function() {
canvas = new fabric.Canvas('c');
canvas.setWidth(480);
canvas.setHeight(360);
var video1El = document.getElementById('video1');
var video1 = new fabric.Image(video1El, {
left: 0,
top: 0
});
canvas.add(video1);
video1.getElement().load();
$(document.body).on('click', '#play' ,function(){
video1.getElement().play();
//↓It's stops video.
/*
var filter = new fabric.Image.filters.BlendColor({
color:'red',
mode: 'tint',
alpha: 0.5
});
canvas.item(0).filters.push(filter);
canvas.item(0).applyFilters();
*/
});
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
});
</script>
</head>
<body>
<button id="play">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video id="video1" style="display: none" class="canvas-img" width="480" height="360">
<source id="video_src1" src=".mp4" type="video/mp4">
</video>
</body>
</html>
I want use image-filters to video. (http://fabricjs./image-filters)
but It's stops video. How to effect to video in fabric.js?
For example, how do I change the color of a video?
https://codepen.io/html5andblog/pen/dmKJH
↑I do not use CSS filter. Can someone explain please?
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="SHIFT-JIS">
<title>sample</title>
<script src="http://code.jquery./jquery-latest.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<script>
$(document).ready(function() {
canvas = new fabric.Canvas('c');
canvas.setWidth(480);
canvas.setHeight(360);
var video1El = document.getElementById('video1');
var video1 = new fabric.Image(video1El, {
left: 0,
top: 0
});
canvas.add(video1);
video1.getElement().load();
$(document.body).on('click', '#play' ,function(){
video1.getElement().play();
//↓It's stops video.
/*
var filter = new fabric.Image.filters.BlendColor({
color:'red',
mode: 'tint',
alpha: 0.5
});
canvas.item(0).filters.push(filter);
canvas.item(0).applyFilters();
*/
});
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
});
</script>
</head>
<body>
<button id="play">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video id="video1" style="display: none" class="canvas-img" width="480" height="360">
<source id="video_src1" src="https://html5demos./assets/dizzy.mp4" type="video/mp4">
</video>
</body>
</html>
- If webgl is not available it wil be terribly slow, just that you know it. – AndreaBogazzi Commented Apr 29, 2018 at 9:28
1 Answer
Reset to default 6Ok so it can be done, the problem is that fabricJS to be faster cache textures and avoid pulling them in the video card every applyfilters to save time.
In this case i had to modify your code n 2 places:
1) applyFilters need to be run each animation frame
2) the cache for the texture must be deleted each time
The hardest part was finding a video with cors enabled.
$(document).ready(function() {
canvas = new fabric.Canvas('c');
canvas.setWidth(480);
canvas.setHeight(360);
var video1El = document.getElementById('video1');
var video1 = new fabric.Image(video1El, {
left: 0,
top: 0
});
canvas.add(video1);
video1El.load();
$(document.body).on('click', '#play' ,function(){
video1El.play();
var filter = new fabric.Image.filters.BlendColor({
color:'red',
mode: 'tint',
alpha: 0.5
});
video1.filters = [filter];
});
fabric.util.requestAnimFrame(function render() {
var image = canvas.item(0);
var backend = fabric.filterBackend;
if (backend && backend.evictCachesForKey) {
backend.evictCachesForKey(image.cacheKey);
backend.evictCachesForKey(image.cacheKey + '_filtered');
}
canvas.item(0).applyFilters();
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<button id="play">play</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
<source id="video_src1" src="http://mondatastorage.googleapis./gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>