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}
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 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>
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>
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
in specification of FFOS GP PEAK is written, that it's got qHD display (it is 960*540), but when I run JavaScript code:
console.log(screen.width)
console.log(screen.height)
I get 640*360. Is it JavaScript bug? Or anything else?
Thank you.
I believe the Peak has a device pixel ratio of 1.5, which would be 640x360 logical pixels.
You may want to have a look at css - what exactly is device pixel ratio
and Bug 838505
If I use the following HTML and JS this draws a square around the entire screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name = "viewport" content="user-scalable = no"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/background.css">
<title>Test</title>
<script type="text/javascript" src="js/loop.js"></script>
<style type="text/css">
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body><canvas id="myCanvas"></canvas></body>
</html>
loop.js
//Main file for game logic
window.onload = init;
//Setup function to reset start location
function setup() {
canvas = document.getElementById('myCanvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
context = canvas.getContext('2d');
context.beginPath();
context.lineWidth="6";
context.strokeStyle="red";
context.rect(0,0,canvas.width,canvas.height);
context.stroke();
}
//Initialize game and event handlers
function init() {
setup();
}