Это статья для всех этих больших братьев и сестер, которые пробирались на фонариках в их спальню, чтобы бросить страшные тени на стену, и для всех маленьких детей, или взрослых, которые по-прежнему дети в глубине души, которые были очень развлечены.
Вы когда-нибудь пытались бросить тени руку на стену? Это самая простая вещь в мире, и еще предстоит это хорошо, требует практики и просто правильной установки. Чтобы культивировать свою эстетику #cottagecore, попробуйте войти в совершенно темную комнату только с одной подсветкой, а литья теней рук на простой стене. Эффект поразительно драматичен. Как весело!
Даже чайный свет хватает, чтобы создать большой эффект
В 2020 году, и теперь в 2021 году многие люди возвращаются к основам, когда они оглядываются вокруг своих домов, открывая пыльные углы чертов и подвалов и вспоминают простые поделки, которые они раньше любят. Пасфон, кто-нибудь? Все, что вам нужно, это несколько инструментов и порвана, переработанная бумага. Нажав цветы? Все, что вам нужно, это газета, некоторые тяжелые книги и терпение. И рука теней? Просто свеча.
У этого Создателя Тикток есть тысячи просмотров для своих руководящих учебников
Но Что такое разработчик, чтобы сделать, пытаясь захватить, что #cottagecore Vibe в веб-приложении?
Высокая техника для коттеджа
Во время изучения искусства ручных теней, мне интересно ли некоторые из недавняя работа Я сделал для поз организма, может быть применимо к положениям рук. Что, если вы могли бы рассказать историю в Интернете, используя свои руки, и как-то сохранить видео шоу и повествования за ним, и отправить его кому-то особенным? В блоке, что может быть больше забавным, чем обмениваться историями теней между друзьями или родственниками, все практически?
Литье рук тень – это народное искусство, вероятно, происходящее в Китае; Если вы идете в чайные дома со сценой шоу, вам может быть достаточно, чтобы посмотреть подобное!
Шоу руки
Когда вы начинаете исследовать позы руки, он поражает, сколько содержания есть в Интернете по теме. Там работала по крайней мере 2014 года по созданию полностью сочлененных рук в рамках исследования, моделирования и игровой сферы:
MSR бросает руки
Есть десятки прилагаемых библиотек уже на Github:
Есть много приложений, где отслеживание руки – это полезная деятельность:
• Компьютерные игры • Симуляции/обучение • «Руки свободные» используют для удаленного взаимодействия с вещами, перемещая тело • вспомогательные технологии • Эффекты тикток 🏆 • полезные вещи, такие как Аккордеонные руки приложения
Один из более интересных новых библиотек, HandsFree.js, предлагает отличный массив демонстраций в своих усилиях для перехода в руки бесплатный веб-опыт:
HandsFree.js, очень многообещающий проект
Как оказывается, руки довольно сложные вещи. Они каждый Включите 21 клавиатуру (VS 17 клавиатуры поселен для всего тела). Создание модели для поддержки вывода для такой сложной группировки Keypoints имеет оформление оформления.
Для веб-разработчика доступна две основные библиотеки, доступные для включения рук в приложение: Обновники Tensorflow.js и MediaPipe’s. HandsFree.js использует оба, в той степени, в которой они выставляют API. Как оказывается, ни Tensorflow.js, ни вручения MediaPipe, не идеально подходят для нашего проекта. Нам придется компромисс.
Руководство Tensorflow.js Разрешить доступ к каждой руке Keypoint и возможность рисовать руку для холста по желанию. Тем не менее, он только в настоящее время поддерживает позы одиноких рук, которые не являются оптимальными для хороших сведений.
Модели моделей MediaPipe MediaPipe (которые используются TENSORFLOW.JS). Разрешить двойные руки, но его API не позволяет значительно уживать ключей, так что чертеж теней, используя его, не очевидно.
Одна другая библиотека, отпечатки пальцев , оптимизирован для написания пальца в контексте языка знака и стоит посмотреть.
Поскольку более важно использовать POLVAS API, чтобы нарисовать пользовательские тени, мы обязаны использовать Tensorflow.js, надеясь, что либо он скоро поддержит несколько рук или HandsFree.js помогает толкать конверт, чтобы разоблачить более стимулью.
Давайте приступим к работе, чтобы построить это приложение.
Scaffold статическое веб-приложение
Как разработчик Vue.js, я всегда использую Vue CLI, чтобы подкрепить приложение, используя Vue Создать мое приложение и создание стандартного приложения. Я настроил базовое приложение с двумя маршрутами: домой и шоу. Поскольку это будет развернуто как Azure Static Web App, я следую своей стандартной практике включения моих файлов приложений в папке с именем приложение и создание API Папка для включения функции Azure для хранения ключа (больше на этом через минуту).
В моем файле Package.json я импортирую важные пакеты для использования Tensorflow.js и речи когнитивных услуг SDK в этом приложении. Обратите внимание, что Tensorflow.js разделил свой импорт в отдельные пакеты:
"@tensorflow-models/handpose": "^0.0.6", "@tensorflow/tfjs": "^2.7.0", "@tensorflow/tfjs-backend-cpu": "^2.7.0", "@tensorflow/tfjs-backend-webgl": "^2.7.0", "@tensorflow/tfjs-converter": "^2.7.0", "@tensorflow/tfjs-core": "^2.7.0", ... "microsoft-cognitiveservices-speech-sdk": "^1.15.0",
Настроить вид
Мы будем нарисовать изображение руки, как обнаружено Tensorflow.js, на холсте, наложенном на видео, подаваемое веб-камерой. Кроме того, мы перерезаем руку к второму холсту (ShadowCanvas), в стиле как тени:
Загрузите модель, запустите ввод ключевого кадра
Работая асинхронно, загрузите прилагающую модель. После установки Backenc и модель загружена, загрузите видео через веб-камеру и начните просмотр ключевых кадров видео для позлов. Это важно для этих шагов, чтобы обеспечить обработку ошибок в случае не загрузки модели, или нет доступной веб-камеры.
async mounted() {
await tf.setBackend(this.backend);
//async load model, then load video, then pass it to start landmarking
this.model = await handpose.load();
this.message = "Model is loaded! Now loading video";
let webcam;
try {
webcam = await this.loadVideo();
} catch (e) {
this.message = e.message;
throw e;
}
this.landmarksRealTime(webcam);
},
Настройка веб-камеры
Все еще работают асинхронно, настроить камеру, чтобы обеспечить поток изображений
async setupCamera() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error(
"Browser API navigator.mediaDevices.getUserMedia not available"
);
}
this.video = this.$refs.video;
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: "user",
width: VIDEO_WIDTH,
height: VIDEO_HEIGHT,
},
});
return new Promise((resolve) => {
this.video.srcObject = stream;
this.video.onloadedmetadata = () => {
resolve(this.video);
};
});
},
Разработать руку, чтобы отразить веб-камеру
Теперь веселье начинается, так как вы можете получить творчество в рисовании руки на вершине видео. Эта функция надоматерии работает на каждом ключевом кадре, наблюдая за рукой, чтобы обнаружить и рисовать линии на холсте – красный на вершине видео, а также черный на вершине ShadowCanvas. Поскольку фон ShadowCanvas белый, рука нарисована как белый, а зритель видит только офсетную тень, в нечетко-черном с закругленными углами. Эффект довольно жуткий!
async landmarksRealTime(video) {
//start showing landmarks
this.videoWidth = video.videoWidth;
this.videoHeight = video.videoHeight;
//set up skeleton canvas
this.canvas = this.$refs.output;
...
//set up shadowCanvas
this.shadowCanvas = this.$refs.shadowCanvas;
...
this.ctx = this.canvas.getContext("2d");
this.sctx = this.shadowCanvas.getContext("2d");
...
//paint to main
this.ctx.clearRect(0, 0, this.videoWidth,
this.videoHeight);
this.ctx.strokeStyle = "red";
this.ctx.fillStyle = "red";
this.ctx.translate(this.shadowCanvas.width, 0);
this.ctx.scale(-1, 1);
//paint to shadow box
this.sctx.clearRect(0, 0, this.videoWidth, this.videoHeight);
this.sctx.shadowColor = "black";
this.sctx.shadowBlur = 20;
this.sctx.shadowOffsetX = 150;
this.sctx.shadowOffsetY = 150;
this.sctx.lineWidth = 20;
this.sctx.lineCap = "round";
this.sctx.fillStyle = "white";
this.sctx.strokeStyle = "white";
this.sctx.translate(this.shadowCanvas.width, 0);
this.sctx.scale(-1, 1);
//now you've set up the canvases, now you can frame its landmarks
this.frameLandmarks();
},
Для каждого кадра нарисовать клавиатуру
В качестве прогресса ключевых кадров модель предсказывает новые клавиатуры для каждой из элементов руки, и оба полотна очищены и перерабатывают.
const predictions = await this.model.estimateHands(this.video);
if (predictions.length > 0) {
const result = predictions[0].landmarks;
this.drawKeypoints(
this.ctx,
this.sctx,
result,
predictions[0].annotations
);
}
requestAnimationFrame(this.frameLandmarks);
Нарисуйте всю жизнь
Поскольку tensorflow.js позволяет вам прямой доступ к клавиатурам рук и координаты рук, вы можете манипулировать им, чтобы нарисовать более реалистичную руку. Таким образом, мы можем перерезать ладонь, чтобы быть многоугольником, а не напоминающим садовые грабли с точками, кульминацией которых в запястье.
Переоденьте пальцы и ладонь:
fingerLookupIndices: {
thumb: [0, 1, 2, 3, 4],
indexFinger: [0, 5, 6, 7, 8],
middleFinger: [0, 9, 10, 11, 12],
ringFinger: [0, 13, 14, 15, 16],
pinky: [0, 17, 18, 19, 20],
},
palmLookupIndices: {
palm: [0, 1, 5, 9, 13, 17, 0, 1],
},
… и нарисуйте их на экран:
const fingers = Object.keys(this.fingerLookupIndices);
for (let i = 0; i < fingers.length; i++) {
const finger = fingers[i];
const points = this.fingerLookupIndices[finger].map(
(idx) => keypoints[idx]
);
this.drawPath(ctx, sctx, points, false);
}
const palmArea = Object.keys(this.palmLookupIndices);
for (let i = 0; i < palmArea.length; i++) {
const palm = palmArea[i];
const points = this.palmLookupIndices[palm].map(
(idx) => keypoints[idx]
);
this.drawPath(ctx, sctx, points, true);
}
С помощью моделей и видео нагруженных, ключевые кадры отслеживаются, а руки и тени и тени, нарисованные в холсте, мы можем реализовать SDK речи к тексту, чтобы вы могли поверить и сохранить свою теневую историю.
Для этого получите ключ от портала Azure для Речевые услуги Создавая услугу:
Вы можете подключиться к этой услуге, импортируя SDK:
Импорт * как SDK от «Microsoft-Cognitiveservices-Speech-SDK»;
… и запустить аудио транскрипцию после получения ключа API, который хранится в функции Azure в /API папка. Эта функция получает ключ, сохраненный в Azure Portal в Azure Static Web App, где размещено приложение.
async startAudioTranscription() {
try {
//get the key
const response = await axios.get("/api/getKey");
this.subKey = response.data;
//sdk
let speechConfig = sdk.SpeechConfig.fromSubscription(
this.subKey,
"eastus"
);
let audioConfig = sdk.AudioConfig.fromDefaultMicrophoneInput();
this.recognizer = new sdk.SpeechRecognizer(speechConfig, audioConfig);
this.recognizer.recognized = (s, e) => {
this.text = e.result.text;
this.story.push(this.text);
};
this.recognizer.startContinuousRecognitionAsync();
} catch (error) {
this.message = error;
}
},
В этой функции PeopleReCognizer собирает текст в кусках, что он признает и организует в предложениях. Этот текст печатается в строку сообщения и отображается на переднем конце.
Показать историю
В этой последней части вывод выделяется на ShadowCANVAS, сохраняется как поток и записан с помощью API Mediarecorder:
const stream = this.shadowCanvas.captureStream(60); // 60 FPS recording
this.recorder = new MediaRecorder(stream, {
mimeType: "video/webm;codecs=vp9",
});
(this.recorder.ondataavailable = (e) => {
this.chunks.push(e.data);
}),
this.recorder.start(500);
… и показан ниже как видео с сюжетной линией в новом Div:
const video = document.createElement("video");
const fullBlob = new Blob(this.chunks);
const downloadUrl = window.URL.createObjectURL(fullBlob);
video.src = downloadUrl;
document.getElementById("story").appendChild(video);
video.autoplay = true;
video.controls = true;
Это приложение может быть развернуто как Azure Static Web App, используя отличные Azure Plugin для визуального студийного кода Отказ И как только это будет жить, вы можете сказать прочные теневые истории!
Попробуйте Омбромание здесь Отказ CodeBase доступен здесь
Посмотрите на Омбромание в действии:
Узнайте больше о AI на Azure Azure Ai Essentials Видео охватывающая речь и язык Azure Free Account.
Оригинал: “https://dev.to/azure/ombromanie-creating-hand-shadow-stories-with-azure-speech-and-tensorflow-js-handposes-3cln”