This project was bootstrapped with Create React App.

Webcam Photo (WebComponents)

This a web component to make webcam photos.

Develop

To start a local version of the webcam-photo component you need to execute the following commands:

First, make sure you have the latest version of the used libraries by executing:

yarn

Then, start the project with:

yarn start

This command should open a page in the browser with the url http://localhost:3000

Deployment

This component is deployed in a Gitlab Pages repository

Usage

To be able to use this repository in other projects you must add the script (JavaScript) and link (Styles) of the project.

To do so you just simply add the following lines of code to your index.html like so:

<link
  rel="stylesheet"
  href="https://alvarium-c.gitlab.io/webcam-photo/static/css/main.css"
/>

<script 
  type="text/javascript"
  src="https://alvarium-c.gitlab.io/webcam-photo/static/js/bundle.js"
/>

Then simply add the component wherever you want as so:

<webcam-photo
  locale='es'
  endpoint='https://localhost'
  id="4gt53gg433hy5323gg"
  client="develop"
  scope="members"
/>

endpoint (string|required): The endpoint of the webcam-photo service.

locale (string): The language in which the webcam-photo should be displayed.

id (string|required): The member id of the user to display and assign webcam-photo.

client (string): The name of the client where the photo will be saved in storage. (Default is 'develop')

scope (string): The name of the type of photo it's being stored. (Default is 'members')

onUpload (function): The function to execute if the upload went successfully, you could add anything but I recomend to add an image refresh, below I explain how.

• Example:

You have to add an event listener to the webcomponent with the name onUpload that updates the image src link to refresh the image.

   <script>
     const reactEl = document.querySelector('webcam-photo')
     reactEl.onUpload = (event) => {
       img = document.getElementById('user-img')
       img.src =
         'https://storage.gw2.alvarium.io/api/storage/develop/members/89513/?placeholderUrl=https://www.claror.cat/alvarium/avatar180x180.png&rand_number=' +
         Math.random()
     }
   </script>