You're reading from Building Real-World Web Applications with Vue.js 3 Build a portfolio of Vue.js and TypeScript web applications to advance your career in web development

Product type Paperback

Published in Jan 2024

Publisher Packt

ISBN-13 9781837630394

Length 318 pages

Edition 1st Edition

Languages

JavaScript

Tools

Vue

Concepts

Front End Web Development

Author (1):

Joran Quinten

View More author details

Table of Contents (17) Chapters

Preface

1. Part 1: Getting Started with Vue.js Development

2. Chapter 1: Introduction to Vue.js FREE CHAPTER

3. Chapter 2: Creating a Todo List App

4. Chapter 3: Building a Local Weather App

5. Chapter 4: Creating the Marvel Explorer App

6. Part 2: Intermediate Projects

7. Chapter 5: Building a Recipe App with Vuetify

8. Chapter 6: Creating a Fitness Tracker with Data Visualization

9. Chapter 7: Building a Multiplatform Expense Tracker Using Quasar

10. Part 3: Advanced Applications

11. Chapter 8: Building an Interactive Quiz App

12. Chapter 9: Experimental Object Recognition with TensorFlow

13. Part 4: Wrapping Up

14. Chapter 10: Creating a Portfolio with Nuxt.js and Storyblok

15. Index

Why subscribe?

16. Other Books You May Enjoy

Object recognition from the camera

This will be a change that involves a couple of steps. First, we’ll introduce a component that can capture video from the browser. We’ll create a CameraDetect.vue component in the ./components folder: https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/blob/main/09.tensorflow/.notes/9.13-CameraDetect.vue.

The code in the CameraDetect.vue component uses composables from the @vueuse package to interact with the browsers’ Devices and userMedia APIs. We’re using useDevicesList to list the available cameras (lines 33–40) and populate a <v-select /> component (lines 4–14). This allows the user to switch between available cameras.

The user needs to manually activate a camera (also when switching between cameras) for security reasons. The button in the component toggles the camera stream (lines 44–46). To display the stream, we use watchEffect to pipe the stream...