function initialize() {
// Check if getUserMedia is supported on the device
if (!hasMediaDevicesApi()) {
btnOpenCameraModal.hidden = true;
}
if (isAndroidOS()) {
// use rear camera for android
btnRotateCamera.hidden = false;
isFrontCamera = false;
} else {
// use front camera for browser/electron
btnRotateCamera.hidden = true;
isFrontCamera = true;
}
...
}
function hasMediaDevicesApi() {
return !!(navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia);
}
カメラのオン/オフ
var promise = navigator.mediaDevices.getUserMedia(constraints);
function turnOnCamera(frontCamera) {
const facingModeOption = frontCamera ? FRONT_CAMERA : REAR_CAMERA;
const constraints = {
video: {
width: {
exact: 250
},
height: {
exact: 250
},
facingMode: facingModeOption
}
};
// Access to the camera and turn it own
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
function handleSuccess(stream) {
videoContainer.srcObject = stream;
}
function handleError(error) {
alert('Could not get user media API' + JSON.stringify(error));
}
}
カメラをオンにするには、トラックに関連付けられているすべてのソースを停止する必要があります。
function turnOfCamera() {
if (videoContainer && videoContainer.srcObject) {
videoContainer.srcObject.getTracks().forEach(function(track) {
track.stop();
});
videoContainer.srcObject = null;
}
}
次の機能は、カメラを前面と背面に切り替えます。
function rotateCamera(e) {
isFrontCamera = !isFrontCamera;
turnOfCamera();
turnOnCamera(isFrontCamera);
}
function takePicture(e) {
const canvas = document.createElement('canvas');
// Saving current image
canvas.width = videoContainer.videoWidth;
canvas.height = videoContainer.videoHeight;
canvas.getContext('2d').drawImage(videoContainer, 0, 0);
// If the video source Object is set, stop all tracks
if (videoContainer.srcObject) {
videoContainer.srcObject.getTracks().forEach(function(track) {
track.stop();
try {
// Other browsers will fall back to image/png
todoItemImage.src = canvas.toDataURL('image/webp');
} catch (error) {
alert('Could not get the picture.' + JSON.stringify(error));
}
});
}
}
