Узнайте, как реализовать функцию веб-камеры для создания снимков гибридного приложения с помощью веб-камер и платформы Electron.
Подготовка камеры
Для решения задачи камеры мы будем использовать webcamjs. WebcamJS — это небольшая (~ 3K миниатюрная и сжатая) отдельная библиотека JavaScript для захвата неподвижных изображений с камеры вашего компьютера и передачи их вам в виде URI-файлов JPEG или PNG. WebcamJS использует HTML5 getUserMedia.
Чтобы начать работу с этим плагином, добавьте его в наш электронный проект, используя:
npm install webcamjs --saveТогда мы сможем потребовать это с помощью javascript, но перед этим создадим базовую html-структуру в вашем основном html-файле (div для камеры и кнопку для запуска или остановки):
Затем заставьте его работать с javascript, создайте прослушиватель событий для кнопки и используйте плагин для запуска или включения камеры:
// A flag to know when start or stop the camera
var enabled = false;
// Use require to add webcamjs
var WebCamera = require("webcamjs");
document.getElementById("start").addEventListener('click',function(){
if(!enabled){ // Start the camera !
enabled = true;
WebCamera.attach('#camdemo');
console.log("The camera has been started");
}else{ // Disable the camera !
enabled = false;
WebCamera.reset();
console.log("The camera has been disabled");
}
},false);Наконец использовать npm start в командной строке запустить проект и протестировать камеру!
Если вам нужно, Вы можете увидеть больше демо веб-камер здесь.
Сохранение изображения на рабочий стол
Благодаря плагину, снимок будет легко обрабатывать, но плагин будет возвращать только строку base64 изображения. Для генерации строки base64 используйте snap функция веб-камеры (прочитайте, как использовать это здесь).
Теперь для сохранения изображения нам нужно обработать строку base64 и сохранить ее в файл. Добавьте кнопку, чтобы сохранить ее.
Добавьте зависимость от диалога, чтобы создать диалог для простого сохранения файла, сделайте снимок камеры и запишите его в файл:
var remote = require('remote'); // Load remote component that contains the dialog dependency
var dialog = remote.require('dialog'); // Load the dialogs component of the OS
var fs = require('fs'); // Load the File System to execute our common tasks (CRUD)
// return an object with the processed base64image
function processBase64Image(dataString) {
var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),response = {};
if (matches.length !== 3) {
return new Error('Invalid input string');
}
response.type = matches[1];
response.data = new Buffer(matches[2], 'base64');
return response;
}
document.getElementById("savefile").addEventListener('click',function(){
if(enabled){
WebCamera.snap(function(data_uri) {
// Save the image in a variable
var imageBuffer = processBase64Image(data_uri);
// Start the save dialog to give a name to the file
dialog.showSaveDialog({
filters: [
{ name: 'Images', extensions: ['png'] },
]
},function (fileName) {
if (fileName === undefined){
console.log("You didn't save the file because you exit or didn't give a name");
return;
}
// If the user gave a name to the file, then save it
// using filesystem writeFile function
fs.writeFile(fileName, imageBuffer.data, function(err) {
if(err){
console.log("Cannot save the file :'( time to cry !");
}else{
alert("Image saved succesfully");
}
});
});
});
}else{
console.log("Please enable the camera first to take the snapshot !");
}
},false);
Диалог должен работать как шарм, и вы сможете сохранить изображение с помощью диалогового окна сохранения системы:
И изображение сохраняется на рабочем столе:
Заметки
- Вы можете изменить формат изображения, изменив свойство image_format при инициализации webcamjs
- Если камера используется другой программой, вы увидите черный экран. До даты невозможно определить, используется ли камера другой программой.
- Посетите примеры репозитория электронов нашего мира кода, чтобы увидеть этот пример
Повеселись
