I am drawing a video to a canvas and then drawing another image on top of it with a blend mode. So far my video works on chrome but not on firefox or safari. When I open with Firefox I see the blended canvas for a second and then it disappears. When I look in safari it shows the top image (which is a face)
I have an mp4 and a webm video uploaded to my website and when I inspect the code and show the video I can see that it is actually playing in firefox, which is confusing because it is like it has found the image and video data?
Is there something I need to do to get the video to work on all browsers?
Below is the code I am using and here is a link to the website (only works as supposed to in chrome at the moment) - http://chrisgjones.com/category/double-exposure/
var img1 = document.getElementById('img1'),
bg = document.getElementById('img2'),
canvas = document.getElementById("canvas"),
video = document.getElementById('video');
context = canvas.getContext("2d"),
blendMode = "multiply";
context.globalCompositeOperation = "source-over"; // dont apply blending to bg image
video.addEventListener('play', function () {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
context.drawImage($this, 0, 0, canvas.width, canvas.height);
setTimeout(loop, 1000 / 30); // drawing at 30fps
context.globalCompositeOperation = blendMode;
context.drawImage(img1, 0, 0, canvas.width, canvas.height);
}
})();
}, 0);
$(window).load(function(){
video.play();
});
I guess you mean setInterval instead of setTimeout. But anyway, better use requestAnimationFrame.
Related
I built a webapp to capture an image using getUserMedia(),
but the quality of the image is not so good, it's a little blurry!. I tried to take the picture via my phone's camera and there is a big difference!
I like to know why taking the picture from browser is not as good as taking it from the phone's camera! and if it's possible, how can it be done to get the image captured via browser (getUserMedia()) with the best quality?
capture.addEventListener('click', () => {
c.style.display = "flex";
c.width = video.outerWidth();
c.height = video.outerHeight();
ctx.drawImage(video, 0, 0, c.width, c.height);
video.style.display = "none";
})
Thanks in advance.
Try using these lines
c.width = video.videoWidth;
c.height = video.videoHeight;
Then your canvas will have the same resolution as the captured video. You can use CSS to scale the canvas appropriately for display, and most browsers do a good job of making the scaled display look good.
I have a really strange issue and I can't tell if it's an Android issue or something else.
Basically I have a video that plays and everytime pause is selected, I want to take a screen shot of the video using the HTML5 canvas technique drawImage() and add it to the canvas. This works perfectly on the first pause but after I start the video again and on any subsequent pause, drawImage() draws the image from the first time I paused to the canvas. The code works fine in Chrome/Firefox, just not on my Android device.
I have included the code below, any advice would be great.
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('v').addEventListener('pause',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//i even remove the canvas from the stage
$( '#c' ).remove();
//and re add a canvas to the dom
$('#canvasdrawer').html('<canvas id="c"></canvas>');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 100);
var ch = Math.floor(canvas.clientHeight / 100);
canvas.width = cw;
canvas.height = ch;
setTimeout(function(){
alert("timeout running");
//i have even tried to put it in a timeout to almost force refresh but that doesnt help
context.drawImage(document.getElementById('v'),0,0,cw,ch);
}, 2000);
}
},false);
I'm having trouble finding an example of how to capture an image from a camera video feed that works.
I've found this great example and this great one that gets me most of the way, but the image capture part fails.
How can an image be grabbed from a webcam video feed and placed in a canvas element, a Context2D instance, or an instance of ImageData?
You can use the canvas element. Try the code below:
var video = document.getElementById('myVideo');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
This article might help.
In putting together a small canvas app I've stumbled across a weird behavior that only seems to occur in the default browser in Android.
When drawing to a canvas that has the globalCompositeOperation set to 'destination-out' to act as the 'eraser' tool, Android browser sometimes acts as expected, sometimes does not update the pixels in the canvas at all.
the setup:
context.clearRect(0,0, canvas.width, canvas.height);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'destination-out';
draw a circle to erase pixels from the canvas:
context.fillStyle = '#FFFFFF';
context.beginPath();
context.arc(x,y,25,0,TWO_PI,true);
context.fill();
context.closePath();
a small demo to illustrate the issue can be seen here:
http://gumbojuice.com/files/source-out/
and the javascript is here:
http://gumbojuice.com/files/source-out/js/main.js
this has been tested in multiple desktop and mobile browsers and behaves as expected. On Android native browser after refreshing the page sometimes it works, sometimes nothing happens.
I've seen other hacks that move the canvas by a pixel in order to force a redraw but this is not an ideal solution..
Thanks all.
I did something like this, which forces the detachment of the canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (isStockAndroid) {
canvas.style.display = "none";
canvas.offsetHeight;
canvas.style.display = "block";
}
That seems to be the most efficient as far as FPS is concerned. Otherwise it's the not-so-nice:
canvas.width = canvas.width;
...which seemed to also get it all working normally for me. Haven't tested to see if the first is essentially the same as the second and resets canvas settings, though, but it seems to be getting a higher frame rate? Anyway that definitely clears things. For the native detection stuff try here: How to detect only the native Android browser
I've just recently started dabbling in HTML5/Javascript, and am currently trying to put together a simple blackjack game. My main browser is Chrome, and I'd noticed my draw function for cards wasn't working. I simplified the code quite a bit, but the drawImage() function still didn't seem to put anything on the screen.
$(document).ready(function(){
init();
});
function init(){
setCanvas();
}
function setCanvas(){
var canvas = document.getElementById("game-canvas");
var context = canvas.getContext("2d");
canvas.width = 800
canvas.height = 600
context.fillStyle = "#004F10";
context.fillRect(0,0,800,600);
var back = new Image();
back.src = "testermed.png"
context.drawImage(back,54,83);
}
Now when I run this in Chrome, I get the box drawn by the context but NOT the image drawn. However when I run it in Firefox the image and box show up just fine. From what I can tell Firefox and Chrome both support HTML5 canvas equally; any ideas as to why it won't work on Chrome?
Try to write instead of context.drawImage(...) this:
back.onload = function() {
context.drawImage(back, 54, 83);
}