I am currently trying to time alerts to appear 3 seconds after the viewer grants permission of the webcam. The alerts are supposed to also have audio with them, as they're supposed to be triggered at the same time.
The webcam has a face tracking feature with it, so there is a lot of extra code.
Previously, I asked this question, and it was answered here; why are these alerts not appearing?.
Though I had to move some files around in its folder, to collect particular audio files. Which was stupid of me, because now this isn't producing the same outcome as my previous question had answered.
As the previous answer was to move attach the delayedAlert() to the window.onload, now is making the webcam video not appear.
Any suggests to fix this? I don't know javascript, so please visuals help a lot more than statements.
This is the current code I am working with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eve_</title>
<link rel="stylesheet" href="assets/demo.css">
<link rel="icon" rel="preload" href="../images/evecircle.png" />
<script src="../build/tracking-min.js"></script>
<script src="../build/data/face-min.js"></script>
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
video, canvas {
margin-left: 70px;
margin-top: 50px;
position: absolute;
}
</style>
<script>
var timeoutID;
function delayedAlert() {
timeoutID = window.setTimeout(slowAlert, 3000);
}
function slowAlert() {
var audio= document.getElementsByTagName('audio')[0];
const audio2 = document.getElementsByTagName('audio')[1];
var audio3 = document.getElementsByTagName('audio')[2];
var audio4 = document.getElementsByTagName('audio')[3];
audio.play();
var myvar1;alert('Oh, there is more of you.');
audio2.play();
var myvar1;alert('Why are there multiple yous?');
audio3.play();
const name = prompt('What is your name?')
const sentence = 'Hello,' + name +'.I am Eve. ....'+name+name+name+'.'+name+'is human...Ive never seen a. human....What does' +name +' look like?';
responsiveVoice.speak(sentence, "US English Female", {
rate: 0.7}
</script>
<script>
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
});
});
var gui = new dat.GUI();
gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
gui.add(tracker, 'stepSize', 1, 5).step(0.1);
};
</script>
</head>
<body>
<div class="demo-container">
<video id="video" width="920" height="540" preload autoplay loop muted></video>
<canvas id="canvas" width="920" height="540"></canvas>
</div>
</div>
<audio>
<source src="../audio/multiple_yous.wav" type="audio/wav" preload=true>
</audio>
<audio>
<source src="../audio/is_something_here.wav" type="audio/wav" preload=true>
</audio>
<audio>
<source src="../audio/oh_something_is_here.wav" type="audio/wav" preload=true>
</audio>
</body>
</html>
Related
i am building a video hosting site. my video player generates video player screenshots by the onclick() function. i am also not sure if these images are deleted or stored after generating.
i have tried surfing around here trying to find a definitive assistance as i lack in javascript knowledge and it's so frustrating. please help me. ask me if you need any more info. :)
here is my html:
<body>
<div id="videoPanel">
<div id="instructions">
<video id="my_video_1" class="video-js vjs-default-skin" width="720px" height="400px" controls preload="none" poster='' autoplay data-setup='{ "aspectRatio":"640:500", "playbackRates": [1, 1.5, 2] }'>
<source src="/Custom-Video-Player/Masamune kun no Revenge - 07.mp4" type='video/mp4' />
</video>
</div>
<button id="clicker" onclick="shoot()">Capture</button><br />
<button id="download" onclick=""> download</button> <br/>
<div id="output" style="display: inline-block; top: 4px; position: relative; border: dotted 1px #ccc; padding: 2px;"></div>
</div>
</body>
this is the javascript for the screenshot generation:
var videoId = 'my_video_1';
var scaleFactor = 0.25;
var snapshots = [];
var w = 720 * scaleFactor;
var h = 400 * scaleFactor;
function capture(video, scaleFactor) {
if (scaleFactor == null) {
scaleFactor = 1;
}
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}
function shoot() {
var video = document.getElementById(videoId);
var output = document.getElementById('output');
var canvas = capture(video, scaleFactor);
canvas.onclick = function () {
window.open(this.toDataURL());
};
snapshots.unshift(canvas);
output.innerHTML = '';
for (var i = 0; i < 4; i++) {
output.appendChild(snapshots[i]);
}
}
theres also a download button that i want to be able to function as such:
it will number all images in accordance to their generation in regard to the 'capture' button, put them all in a zip file and download when download is pressed.
I have a HTML5 video banner at the top of my page. It has the autoplay and loop attributes added. When I begin to scroll down the page the video stops and never restarts when I scroll back upwards. I'd like the video to carry on playing no matter if the user scrolls or not.
There doesn't seem to be any attributes listed in the W3C spec that suggests a solution, so is there another way of disabling this functionality?
The HTML and CSS is very simple so I'm wondering if I need some JS to help along the way:
HTML:
<video preload="none" autoplay loop>
<source src="/media/test.mp4" type="video/mp4">
</video>
CSS:
video {
width: 100%;
height: auto;
}
Any help would be much appreciated.
You can use isInViewport jQuery plugin as below:
$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})
it works fine for me,, if you want to change yiur viewport then change fraction = 0.5; in my code
var videos = document.getElementsByTagName("video"),
fraction = 0.5;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
b = y + h, //bottom
visibleX, visibleY, visible;
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
}
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
div {padding-top:300px; width:320px;}
video {
padding-bottom:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video id="video1" preload="auto" loop="loop">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">>
bgvideo
</video>
</div>
This can be disabled by using the attribute data-keepplaying.
<video preload="none" autoplay loop>
<source src="/media/test.mp4" type="video/mp4">
</video>
if using fullpage.js
<video autoplay muted loop data-keepplaying>
<source src="myvide.mp4" type="video/mp4">
</video>
works
<!-- with thanks to http://stackoverflow.com/questions/25407926/spawn-random-images-
in-canvas-in-javascript-->
<!--http://www.freesfx.co.uk/download/?type=mp3&id=11028
--audio loader--
http://stackoverflow.com/questions/18826147/javascript-audio-play-on-
click-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Street</title>
<script type="text/javascript">
var can, ctx;
var sprite = new Array();
var counter = 0;
var rot = 0;
var centerX = -320;
var centerY = -170;
var sprite = new Array(id); // Array to hold the filenames
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
// get images into array
sprite[0] = document.getElementById("b1");
sprite[1] = document.getElementById("b2");
sprite[2] = document.getElementById("b3");
sprite[3] = document.getElementById("b4");
// draw lights out
draw();
// wait 3 sec, then begin animation
var t = setTimeout(light, 30);
}
function light() {
var wait = 600;
counter++;
if (counter == 4) {
counter = 0;
wait += (Math.random() * 1500);
rot += .01;
}
draw();
setTimeout(light, wait);
}
function draw() {
ctx.clearRect(0, 0, can.width, can.height);
ctx.save();
ctx.translate(can.width / 2, can.height / 2);
ctx.drawImage(sprite[counter], centerX, centerY);
ctx.restore();
}
function choseRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
var choice = choseRandom(id);
</script>
</head>
<body onload="init()">
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="au1.mp3">
<source src="au1.ogg">
</audio>
<img id="b1" style="display:none" src="1.png" >
<img id="b2" style="display:none" src="2.png" >
<img id="b3" style="display:none" src="3.png" >
<img id="b4" style="display:none" src="4.png" >
<canvas class="canvas" id="can" width="640" height="350" style=" border:1px solid #6F2E0D; ">
</canvas>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="door.mp3" ></audio>
<div id="container"></div>
<script language="JavaScript">
document.writeln('<td' + '><img src="'
+ ranimage[choice] + '" height="180" width="160" border="0" ><' +
'/td>');
</script>
<div id='container'>
<img id = "image2" src='door.png' />
</body>
</html>
The above code works with thanks to stack overflow.
Basically at the moment this code displays images in sequence non randomly, it uses the array to fetch them, and show them. The code then regulates the speed of the image display. There is also a sound player, and a button with a sound.
I managed after some considerable searching to animate a simple sequence of png files. However I have been trying to ad start stop button and a math random function (preferably the music on-click would start everything going).
I want to add a random function to the array,so that it displays images randomly. however the best I could do was, not to brake the code, or to get is to speed up the animation. Can some one please modify my code to add these functions or please point me to some place that would help.
The randomized array would be really useful.
Demo: http://jsfiddle.net/techsin/dtz0yj4y/
Code
function shuffle (arr) {
arr.forEach(function(e,i){
var rand = ~~(Math.random()*(arr.length-1));
arr[i] = arr[rand];
arr[rand] = e;
});
}
var myArr = [1,2,3,4,5];
shuffle(myArr); //myArr is now shuffled!
Example...
(there was a mistake, updated)
For example,
var array = [1,2,3,4,5]
for(i=0; i<array.length;i++){
var dist = Math.floor( Math.random() * array.length )
var swp = array[i]
array[i] = array[dist]
array[dist] = swp
}
console.log(array) //=> shuffled
I have the following code:
<!DOCTYPE html>
<title>Video/Canvas Gray Effect</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var cw,ch;
v.addEventListener('play', function(){
cw = v.clientWidth;
ch = v.clientHeight;
canvas.width = cw;
canvas.height = ch;
back.width = cw;
back.height = ch;
draw(v,context,backcontext,cw,ch);
},false);
},false);
function draw(v,c,bc,w,h) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvas
bc.drawImage(v,0,0,w,h);
// Grab the pixel data from the backing canvas
var idata = bc.getImageData(0,0,w,h);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4) {
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var brightness = (3*r+4*g+b)>>>3;
data[i] = brightness;
data[i+1] = brightness;
data[i+2] = brightness;
}
idata.data = data;
// Draw the pixels onto the visible canvas
c.putImageData(idata,0,0);
// Start over!
setTimeout(draw,20,v,c,bc,w,h);
}
</script>
<video id=v controls loop>
<source src=video.webm type=video/webm>
</video>
<canvas id=c></canvas>
<style>
#c {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 20px;
}
#v {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -500px;
}
</style>
The canvas work only if the video hosted in my site, but if a external video the canvas not working only work if make a proxy using the same domain, for example:
Working if a hosted the video on my site:
<video id=v controls loop>
<source src=video.webm type=video/webm>
</video>
Working if a use a proxy, but I will not use a proxy:
<video id=v controls loop>
<source src=./proxy.php?url_toexternal_video=http://host.com/video.webm type=video/webm>
</video>
Not working if a use the direct link to the video:
<video id=v controls loop>
<source src=http://host.com/video.webm type=video/webm>
</video>
any way to make it work if it is from an external video? Thanks! ;)
Nope, there's no way to use getImageData on a canvas that has been tainted by cross-origin content.
I have a page which uses the HTML5 getUserMedia functionality to capture an image from the user's webcam. I am having serious inconsistencies in the scaling of the captured image when it is rendered to the canvas. Only the top corner of the image is actually rendered, as if rather than capturing the video element, it is slicing a piece from the underlying stream. Oddly enough, when I go to most other sites using this technology, I do not have this problem. I am running Chrome 29.0.1547.76 m on Windows 7, running on a 2011 MacBook Pro.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var openCameraButton;
var takePictureButton;
var mediaStream;
var video;
var canvas;
var context;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
function onLoad(){
video = document.querySelector('video');
canvas = document.querySelector('canvas');
context = canvas.getContext('2d');
context.imageSmoothingEnabled = true;
context.webkitImageSmoothingEnabled = true;
context.mozImageSmoothingEnabled = true;
};
function openCamera(){
navigator.getMedia(
{ video:true, audio: false },
function(localMediaStream){
mediaStream = localMediaStream;
video.src=window.URL.createObjectURL(localMediaStream);
},
function(err){
alert('Unable to support live capture.');
}
);
}
function takePicture(){
var w = video.videoWidth;
var h = video.videoHeight;
context.drawImage(video,0,0,w,h);
canvas.style.display='block';
video.style.display='none';
}
</script>
</head>
<body onload="onLoad();">
<div>
<video autoplay style="width:640px; height:480px;"></video>
<canvas style="width:640px; height:480px; display:none;"></canvas>
</div>
<div>
<button id="openCameraButton" type="button" onclick="openCamera();" >Open Camera</button>
<button id="takePictureButton" type="button" onclick="takePicture();" >Take Picture</button>
</div>
</body>
</html>
Any ideas?
please try this:
function takePicture(){
var w = video.videoWidth;
var h = video.videoHeight;
canvas.width = w;
canvas.height = h;
context.drawImage(video,0,0,w,h);
canvas.style.display='block';
video.style.display='none';
}