I am trying to create a voice-controlled website. What I exactly plan to do is say 'hello' to trigger the button 'Open WebCam'. I am using Annyang for processing my voice commands and simple javascript selectors to open the webcam. But even though, these two work fine separately but every time I try to integrate these two for the final result, I get stuck.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Voice Control</title>
</head>
<style>
div {
width: 500px;
height: 400px;
border: 2px solid black;
position: relative;
}
video {
width: 500px;
height: 400px;
object-fit: cover;
}
</style>
<body>
<center>
<div>
<video id="vid"></video>
</div>
<br />
<button id="but" autoplay>
Open WebCam
</button>
</center>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
<script>
if(annyang) {
var commands = {
'hello': function() {
document.addEventListener("DOMContentLoaded", () => {
var but = document.getElementById("but");
var video = document.getElementById("vid");
var mediaDevices = navigator.mediaDevices;
vid.muted = true;
but.addEventListener("click", () => {
// Accessing the user camera and video.
mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {
// Changing the source of video to current stream.
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
});
})
.catch(alert);
});
});
}
};
annyang.addCommands(commands);
annyang.start();
}
</script>
</html>
Related
I have successfully moved this video camera that I have written in HTML to the right, so that it is in the center of the form, but would like to know how I can find the exact center of the form by finding the total width an dividing it by two in CSS. Any ideas on how I can get the full size of the width of the form?
The following is the source code:
<html>
<head>
<title>Webcam</title>
<style>
div.video-wrap
{
position: relative;
left: 450px;
}
</style>
</head>
<body>
<h2>Image Recognition Login</h2>
<div class="video-wrap">
<video id="video" playsinline autoplay></video>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the following <span class="glyphicon glyphicon-camera"></span>
button to take a facial image of yourself (be sure to look straight into the camera):</p>
<p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span> Camera
</a>
</p>
</div>
<div class="controller">
<button id="snap">Capture</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
'use strict';
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
const errorMsgElement = document.getElementById('spanErrorMsg');
const constraints =
{
audio: true,
video:
{
width: 1280, height: 550
}
};
async function init()
{
try
{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
}
catch(e)
{
errorMsgElement.innerHTML = `navigator.getUserMedia.error:${e.toString()}`;
}
}
function handleSuccess(stream)
{
window.stream = stream;
video.srcObject = stream;
}
init();
var context = canvas.getContext('2d');
snap.addEventListener("click", function()
{
// drawImage(image, xCoordinate, yCoordinate, recWidth, recHeight)
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>
</html>
You can assign a second class (or better, an id) to the div, then use css on that class/id to move it
I am a beginner in JavaScript, I want to play and pause the video whenever the user clicks the video element, but when in my code once user clicks again the video element the video gets paused and control gets enabled but when again user clicks the paused video after the controls being enabled the addEventListener() is not working at all it seems, can anyone please tell why this is happening, I saw that after I remove line videoelement.controls = true; then all works fine, but I want to know why this is happening and is there any way that with controls enabled it works fine enough
let videoelement = document.querySelector('.videos')
videoelement.addEventListener('click', function (e) {
console.log(videoelement.paused)
if (videoelement.paused) {
console.log("pause hai ")
videoelement.play();
videoelement.controls = null;
videoelement.firstChild.nodeValue = 'Play';
} else {
console.log("play ho gya")
videoelement.pause();
videoelement.controls = true;
videoelement.firstChild.nodeValue = 'Pause';
}
e.preventDefault();
})
body
{
background-color: blueviolet
}
.videos
{
width: 50%;
margin:10% 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<link rel="stylesheet" href="videplayercss.css">
</head>
<body>
<div class="videoplayer">
<video src="anyvideo.mp4" autoplay class="videos"> </video>
</div>
<script src="videoplayerjs.js"></script>
</body>
</html>
im trying to open camera on mobile version website. the code is working perfectly from pc but not when i access the website from my mobile. the website is published to firebase cloud.
here is the code:
script.js:
const video = document.getElementById('video')
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)
function startVideo() {
navigator.getUserMedia(
{ video: {} },
stream => video.srcObject = stream,
err => console.error(err)
)
}
video.addEventListener('play', () => {
const canvas = faceapi.createCanvasFromMedia(video)
document.body.append(canvas)
const displaySize = { width: video.width, height: video.height }
faceapi.matchDimensions(canvas, displaySize)
setInterval(async () => {
const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
const resizedDetections = faceapi.resizeResults(detections, displaySize)
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
faceapi.draw.drawDetections(canvas, resizedDetections)
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
}, 100)
})
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script defer src="face-api.min.js"></script>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<video id="video" width="720" height="560" autoplay muted></video>
</body>
</html>
what i did to try to solve this problem is to change navigator.getUserMedia to navigator.mediaDevices.getUserMedia , what happened is that the browser on pc or mobile version is asking for the permission to access the camera but not open anything, just white screen.
any help?
According to this the first parameter of navigator.getUserMedia function should be like {video: true}
So I wanted to make a webpage in which on button click, the background color changes.
Its showing TypeError on loading in browser but its working fine after pasting same JavaScript on console.
Code snippet
var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"];
var flag = 0,
blinkCount = 0;
function blink() {
if (blinkCount == 15) {
blinkCount = 0;
blink();
} else {
var h1 = document.querySelector("h1");
var body = document.querySelector("body");
h1.style.color = colors[blinkCount];
body.style.background = colors[blinkCount];
blinkCount++;
}
}
var button = document.querySelector("button");
button.addEventListener("click", blink);
button {
width: 50%;
height: 100px;
background: black;
margin-top: 300px;
margin-left: 300px;
}
h1 {
color: #0af5fa;
}
body {
background: #0af5fa;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="../JavaScript/ex153.js"></script>
<link href="../css/ex153.css" rel="stylesheet">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="">
<button><h1>Click Me</h1></button>
</div>
</body>
</html>
In Browser [Error]
TypeError: button is null[Learn More] ex153.js:25:1
You're running the script before the document has been fully parsed - see how the <script> is above the <body> and its <button>?
Either give the script tag the defer attribute:
<script defer src="..
Or move it to the bottom of the body:
</div>
<script src="../JavaScript/ex153.js"></script>
</body>
</html>
Or wrap the whole script in a DOMContentLoaded listener:
document.addEventListener('DOMContentLoaded', function() {
var colors;
// other code
});
I have a video element displaying a camera source being fed via navigator.getUserMedia (or relevant). How do I determine the codec being utilized to display the video source? I need this information to properly utilize MediaSource.isTypeSupported().
Here is a full-page source of what I'm tinkering with.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Display Webcam Stream & Capture Image</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
if (navigator.getUserMedia) {console.log('1, navigator.getUserMedia');navigator.getUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.mozGetUserMedia) {console.log('2, navigator.mozGetUserMedia');navigator.mozGetUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.webkitGetUserMedia) {console.log('3, navigator.webkitGetUserMedia');navigator.webkitGetUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.msGetUserMedia) {console.log('4, navigator.msGetUserMedia');navigator.msGetUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.oGetUserMedia) {console.log('5, navigator.oGetUserMedia');navigator.oGetUserMedia({video: true}, handleVideo, videoError);}
else {alert('Error: browser not supported?\n\n'+MediaDevices.getUserMedia());}
}
function handleVideo(stream)
{
document.querySelector('#video_example').src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
function capture_image()
{
var video = document.querySelector('#video_example');
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
document.getElementsByTagName('body')[0].appendChild(canvas);
}
//]]>
</script>
<style>
#container {height: 768px; margin: 0px auto; width: 1024px;}
#video_example {height: 768px; width: 1024px;}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="video_example"></video>
<input onclick="capture_image();" type="button" value="Capture Image" />
</div>
</body>
</html>
Mozilla's Developer Network (MDN) didn't seem to suggest anything of the likes exists?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement