I`m dealing with a video communication based on canvas.
Today, I meet a weird bug when I try to capture the video into another canvas. It sometimes worked, but sometimes not.
Here`s the code.
$('#snap-button').on('click', function () {
var source = $('#video')[0];
var target = $('#photo')[0];
var context = target.getContext('2d');
context.drawImage(source, 0, 0, 800, 600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- video -->
<canvas id="video" width="800" height="600"></canvas>
<!-- snapshot -->
<canvas id="photo" width="800" height="600"></canvas>
<button id="snap-button"></button>
```
But when I test this bug, I replace the video canvas with static canvas, such as draw a retangle, it worked 100% correctly, but dynamic is almost not worked.
What should I do ? Thanks!
Edit this code below how you want. This is working example how you can make snapshot from video into canvas.
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$("#snap-button").click(function(){
ctx.drawImage(v,5,5,260,125)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Video to use:</p>
<video id="video1" controls width="270" autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type='video/ogg'>
<source src=http://www.w3schools.com/tags/"mov_bbb.webm" type='video/webm'>
</video>
<p>Snapshot:</p>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas>
<br><br>
<input type="button" id="snap-button" value="Snap shot">
Source: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage_video
Related
I'm trying to get multiple canvas images to appear with 1 button press. I can get one image to work perfect, but the second one I can't. I know that ID's have to be unique and that only the first canvas will have an image currently.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div class="bg">
<img src="Assets/Images/background.png" alt="background">
</div>
<section class="content">
<img id="taxi" src="Assets/Images/PV.png" width="106" height="53">
<canvas id="myCanvas" width="106" height="53"
style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas" width="106" height="53"
style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>
</body>
</html>
JS
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
}
I know that I can get it work by changing one the id="myCanvas" in the HTML and repeating the current lines in the script to get it to work. But the end web page will have lots of canvas' and I didn't want to keep repeating the javascript code.
Is there a simple way of doing what I am trying to achieve?
HTML elements cannot have the same id. You'll need to retrieve your elemnts some other way. There are many ways; getElementsByTagName, getElementsByClassName, querySelectorAll, ... etc.
Use querySelectorAll(".content > canvas"); This will select all direct children that are canvas elements in the element that has the class of "content" (which in this case is your section element).
function myCanvas() {
document.querySelectorAll(".content > canvas").forEach(c=>{
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
});
}
Basic example:
function myCanvas() {
document.querySelectorAll(".content > canvas").forEach(c=>{
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
});
}
<section class="content">
<img id="taxi" src="https://static-s.aa-cdn.net/img/ios/899287106/45820b5b6bba46c7fcd853a46d554a34?v=1" width="106" height="53">
<canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>
jQuery(document).ready(function($){
var image = new Array ();
image[0] = "/08/anek-ferry-traghetti-grecia.mp4";
image[1] = "/12/Composizione-2.mp4";
image[2] = "/11/Composizione-1.mp4";
var hasard = Math.floor(Math.random() * image.length);
$('#fond-aleatoire video').attr('src', 'http://neos.anekitalia.com/wp-
content/uploads/2018' + image[hasard]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id class="fond-aleatoire">
<mediaelementwrapper id="mejs_8947924178991862">
<video loop="loop" autoplay="" playsinline="" muted="" width="1920"
height="600" src="http://neos.anekitalia.com/wp-
content/uploads/2018/11/Composizione-1.mp4"
id="mejs_8947924178991862_html5"
preload="none" style="margin: 0px; width: 1903px; height: 594.688px;">
<source type="video/mp4" src="http://neos.anekitalia.com/wp-
content/uploads/2018/11/Composizione-1.mp4">
</video>
</mediaelementwrapper>
</div>
I have the following code that is working on all browsers but not in safari
this is simply changing randomly the default video background of my wordpress site when the background has ID #fond-aleatoire, any suggestion how to fix this on safari? many thanks.
My web page is saying that this page is accessing the camera, but I'm not able to see the Webcam on my page.
Please let me know If I need to change any settings.
//html code for video and canvas tag. Below is the code to display
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap">Snap Photo</button>
javascript script.js
//To Access Camera
var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
HTML
<body>
<div class="container">
<div class="top">
</div><br></br><br></br><br></br>
<div class="login-box animated fadeInUp">
<div class="box-header">
<h2>Face Detect</h2>
</div>
<button type="submit"><a onclick="onStream()">Start</a></button>
<br/>
</div>
<video id="video" width="10" height="10" autoplay></video>
<canvas style="float:right" id="canvas" width="640" height="480"></canvas>
</div>
</body>
and
var canvas, context, video, videoObj;
function onStream() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
video = document.getElementById("video");
var constraints = {
audio: true, video: { width: 1280, height: 720 }
};
navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream; video.onloadedmetadata = function(e) {
video.play();
};
})
}
Is it possible to set a video to full screen on page load?
So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.
var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I use Popcorn.js for playing the video on startup.
I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).
Using JavaScript, as suggested by Will, I also can't seem to get it to work properly
var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
Say i want to draw controls in canvas video without using video as parent attribute.With this code i am able to control canvas with video but somehow i want canvas without video as parent just simply controls canvas.Is it possible in any language?Or may be stupid question but pls help.
Code i am using but don't want to use:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load Video Onto The Canvas</title>
<script type="text/javascript">
var videoElement;
var videoDiv;
function eventWindowLoaded() {
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);
}
function videoLoaded(event) {
canvasApp();
}
function canvasApp() {
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
//video
context.drawImage(videoElement , 85, 30);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
setInterval(drawScreen, 33);
</script>
</head>
<body>
<div>
<video id="video" width="320" height="240">
<source src="video/browser.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="video/browser.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
If I understand you correctly: you want to draw only the video players controls (play, stop, pause etc.) to the canvas, not the video itself?
This can't be done. We have no access to the controls as these are supplied internally by the browser.
The only way around this is to disable the controls in the video element and manually create buttons using normal DOM elements, or by drawing and implement logic for them with the canvas (if you want the artistic freedom).
These buttons that you create manually, whether DOM/HTML buttons or canvas, simply triggers the commands on the video element itself from code (ie. play() etc.).
Here is an example I made a while back (although for a different purpose).