I am new on javascript
I need to open a mobile phone flash on a website.
I searched for this topic, but I just found this information and change little bit but still there is error a "ImageCapture is not defined"
I source this error too and couldn't find any thing, So I left code below
thank you for lookin at :)
//Test browser support
function doFunction() {
const SUPPORTS_MEDIA_DEVICES = 'mediaDevices' in navigator;
if (SUPPORTS_MEDIA_DEVICES) {
//Get the environment camera (usually the second one)
navigator.mediaDevices.enumerateDevices().then(devices => {
const cameras = devices.filter((device) => device.kind === 'videoinput');
if (cameras.length === 0) {
throw 'No camera found on this device.';
}
const camera = cameras[cameras.length - 1];
console.log("sad1");
// Create stream and get video track
navigator.mediaDevices.getUserMedia({
video: {
deviceId: camera.deviceId,
facingMode: ['user', 'environment'],
height: {ideal: 1080},
width: {ideal: 1920}
}
}).then(stream => {
const track = stream.getVideoTracks()[0];
console.log(track);
//Create image capture object and get camera capabilities
const imageCapture = new ImageCapture(track)
const photoCapabilities = imageCapture.getPhotoCapabilities().then(() => {
console.log("sad3");
//todo: check if camera has a torch
//let there be light!
const btn1 = document.querySelector('.switch1');
const btn2 = document.querySelector('.switch2');
btn1.addEventListener('click', function(){
console.log("dsfsdf");
track.applyConstraints({
advanced: [{torch: true}]
});
});
btn2.addEventListener('click', function(){
track.applyConstraints({
advanced: [{torch: false}]
});
});
});
});
});
//The light will be on as long the track exists
}
console.log("sddsf");
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>click ob/of to open/close flash</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="site.css">
<script src="site.js"></script>
</head>
<body>
<input id="switch1" type="button" value="On" onclick="doFunction();" />
<input id="switch2" type="button" value="Off" onclick="doFunction();" />
<h1>Hello World</h1>
</body>
</html>
but when I try it at localhost, I got this error:-
but it work properly at https://jsfiddle.net/Mustafagulsoy/7efsb0rk/ if anyone can help me, I will be grateful
I solve my problem it cause because my html code doesnt find javascript code I left the last version my code, if you dont understand somewhere you can ask me again
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<div class="video-wrap">
<video autoplay></video>
</div>
<div class="controler">
<button class="switch1">On </button>
<button class="switch2"> Off</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
}
})
.then((stream) => {
const video = document.querySelector('video');
video.srcObject = stream;
// get the active track of the stream
const track = stream.getVideoTracks()[0];
const btn1 = document.querySelector('.switch1');
const btn2 = document.querySelector('.switch2');
btn1.addEventListener('click', function(){
track.applyConstraints({
advanced: [{torch: true}]
});
});
btn2.addEventListener('click', function(){
track.applyConstraints({
advanced: [{torch: false}]
});
});
})
.catch(err => console.error('getUserMedia() failed: ', err));
</script>
<title>Title</title>
</head>
<body>
</body>
</html>