Creating Persisting Unique IDs in Node.js

I’m working on a Node.js API sync project that involves assigning and persisting unique IDs to data objects. The idea is to have a item_id that gets assigned on first run and never changes. I also want a custom_id that is based on the properties of the object, it would only change if the properties change.

I started with an example I found on GitHub.
It handles this for a single item, but I’m trying to expand it to work with multiple items.

Here is my current code for assigning the IDs to the objects:

// Initialize the storage file if it doesn't exist
const initializeStorage = () => {
  if (!fs.existsSync(storageFilePath)) {
    fs.writeFileSync(storageFilePath, JSON.stringify({ counter: 1, mappings: {} }, null, 2));
  }
};

// Get the next counter value and update the storage
const getNextCounter = (storage) => {
  const newId = storage.counter;
  storage.counter += 1;
  fs.writeFileSync(storageFilePath, JSON.stringify(storage, null, 2));
  return newId;
};

// Generate a unique key based on item properties
const generateKey = (item, props = []) => {
  return props.map(prop => item[prop] ?? "??").join("_");
};

// Create a custom ID based on the properties
const makeCustomID = (props = []) => {
  return Buffer.from(props.join("_")).toString('base64');
};

// Assign item IDs and custom IDs to items
export const assignIDs = (items = [], props = []) => {
  const storage = JSON.parse(fs.readFileSync(storageFilePath, "utf8"));

  return items.map((item) => {
    const key = generateKey(item, props);

    if (!storage.mappings[key]) {
      const id = getNextCounter(storage);
      const customID = makeCustomID(props.map(prop => item[prop]));
      storage.mappings[key] = { id, custom_id: customID };
    }

    const { id, custom_id } = storage.mappings[key];

    
// Persist the updated mappings to the file
    fs.writeFileSync(storageFilePath, JSON.stringify(storage, null, 2));

    return { item_id: id, custom_id, ...item };
  });
};

// Initialize the storage file
initializeStorage();

It works for creating a persistent item_id across runs and a custom_id, which does change based on the properties. But, when the properties change, the item_id unexpectedly also changes.

Any advice on how to adjust my approach so that the item_id remains consistent even if properties are modified would be greatly appreciated!

Thanks!

Syntax for Expo and React

I am working through the Expo tutorial for the simple photo edit. I am about half way and now the syntax is starting to get confusing on why a particule format was used. Return (..code..) or <Pressable style={styles.button} onPress={() => alert(‘You pressed…I see commas a separators sometime and other times spaces.
const styles = StyleSheet.create({
buttonContainer: {
width: 320,
height: 68,

Looking for a guide on syntax help. I started ios back when you wrote in Squirrel, then a bit of swift, now trying to get React/Expo for cross platform.

Any insight on good syntax tutorials; Stanford CS193 does a great job for Swift and Squirrel… Written or video tutorial preferred. Searches turn up lot of ‘your first Expo app’.

Thankyou.

Searched the web…

Watched tutorials

What’s wrong on this cubic Bezier curve calculation?

Here’s my attempt to draw a cubic bezier curve and get the value at 170x (considering P1 and P2):

<canvas id="myCanvas" width="800" height="200" style="border: 1px solid black;"></canvas>
<div id="result" style="margin-top: 20px;">N/A</div>

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var resultDiv = document.getElementById('result');

    // Function to flip the y-coordinate
    function flipY(y) {
        return canvas.height - y;
    }

    // Class to represent a single Bézier curve block
    class BezierBlock {
        constructor(P0, P1, P2, P3) {
            this.P0 = { x: P0.x, y: flipY(P0.y) }; // Start point
            this.P1 = { x: P1.x, y: flipY(P1.y) }; // First control point
            this.P2 = { x: P2.x, y: flipY(P2.y) }; // Second control point
            this.P3 = { x: P3.x, y: flipY(P3.y) }; // End point

            this.minX = Math.min(this.P0.x, this.P3.x);
            this.maxX = Math.max(this.P0.x, this.P3.x);
        }

        draw() {
            // Draw the cubic Bézier curve
            ctx.setLineDash([]);
            ctx.beginPath();
            ctx.moveTo(this.P0.x, this.P0.y);
            ctx.bezierCurveTo(this.P1.x, this.P1.y, this.P2.x, this.P2.y, this.P3.x, this.P3.y);
            ctx.strokeStyle = 'black';
            ctx.stroke();
            
            // Draw the vertical cursor line at the current slider position
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(currentX, 0);
            ctx.lineTo(currentX, canvas.height);
            ctx.strokeStyle = 'blue';
            ctx.stroke();
            ctx.setLineDash([]);

            // Draw the control points
            ctx.fillStyle = 'red';
            ctx.fillRect(this.P0.x - 3, this.P0.y - 3, 6, 6);  // P0
            ctx.fillStyle = 'blue';
            ctx.fillRect(this.P1.x - 3, this.P1.y - 3, 6, 6);  // P1
            ctx.fillStyle = 'blue';
            ctx.fillRect(this.P2.x - 3, this.P2.y - 3, 6, 6);  // P2
            ctx.fillStyle = 'red';
            ctx.fillRect(this.P3.x - 3, this.P3.y - 3, 6, 6);  // P3
        }

        // Method to calculate the y value on the curve at a given x position
        getYByX(posX) {
            let t = (posX - this.P0.x) / (this.P3.x - this.P0.x);
            if (t < 0 || t > 1) return null;  // posX is out of bounds for this curve

            let y =
                Math.pow(1 - t, 3) * this.P0.y +
                3 * Math.pow(1 - t, 2) * t * this.P1.y +
                3 * (1 - t) * Math.pow(t, 2) * this.P2.y +
                Math.pow(t, 3) * this.P3.y;

            return flipY(y);
        }
    }

    // Define the points for each block
    const blocks = [
        new BezierBlock({x: 0, y: 0}, {x: 200, y: 0}, {x: 200, y: 0}, {x: 200, y: 180})
    ];

    // Draw all the Bezier blocks
    function drawAll() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        blocks.forEach(block => block.draw());
    }

    // Function to process a given x position and display the corresponding y value
    function process(posX) {
        for (let block of blocks) {
            if (posX >= block.P0.x && posX <= block.P3.x) {
                let posY = block.getYByX(posX);
                if (posY !== null) {
                    resultDiv.innerText = `X=${posX}: Y=${posY.toFixed(2)}`;
                    currentX = posX;
                    return;
                }
            }
        }
    }

    let currentX = 170; // Initialize currentX for the cursor
    drawAll();
    process(currentX); // Process initial position

</script>

Which display as:

enter image description here

But the value from getYByX should be somethings like 20 (as for the plot), not 110. Notice that Y-values are flip (so bottom is 0, top is 200).

Still wrong result.

Where am I wrong on cubic calculation?

authjs v5 error in signIn options returning type is never

'use server'
import { signIn } from "@/auth"

export const SignIn = async (data: any) => {
  const updatedData =  {...data, redirect: false}
  console.log(data)
  
  const signIndata = await signIn("credentials", updatedData)
  
  if(signIndata?.error){
    console.log(signIndata?.error)
  } else{
    return 'ok'
  }
}

and this is what i am doing on other side
i cant access the value signIndata?.error beause signIndata showing the type never
the data i am sending is { email: “[email protected]”, password: “password123”}
please help me how to solve this

i expected it to console the error if there is error and return “ok” if not error,
so i can do router.push(“/admin”)

Changing password with bcrypt [closed]

I have got some issues about bcrypt is that changing password.

Users.js

import Users from "../db/users";
import ApiError from "../errors/ApiError";
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";
import getUserIp from "../middlewares/getUserIP";
import Session from "../middlewares/Session";
import sendVerificationEmail from "../middlewares/VerificationEmail"; 

export default (router) => {
router.put("/user/change-password", Session, async (req, res) => {
    const { oldPassword, newPassword, confirmPassword } = req.body;
    const user = req.user;
    try {
      const existingUser = await Users.findById(user._id);
      if (!existingUser) {
        throw new ApiError("User Not Found", 404, "notFoundUser");
      }
     
      const isMatchPassword = await bcrypt.compare(
        oldPassword,
        existingUser.password
      );
      if (!isMatchPassword) {
        throw new ApiError(
          "Incorrect old password",
          404,
          "incorrectOldPassword"
        );
      }

      if (newPassword !== confirmPassword) {
        throw new ApiError(
          "New password and confirm password do not match",
          404,
          "passwordsDoNotMatch"
        );
      }

      const isSamePassword = await bcrypt.compare(
        newPassword,
        existingUser.password
      );
      if (isSamePassword) {
        throw new ApiError(
          "New Password cannot be the same as the old password",
          400,
          "sameAsOldPassword"
        );
      }

      const hashedPassword = await bcrypt.hash(newPassword, 10);

      existingUser.password = hashedPassword; 
      await existingUser.save();
      console.log("Old Password (unhashed):", oldPassword);
      console.log("New Password (unhashed):", newPassword);
      console.log("Old Password (hashed):", existingUser.password);
      console.log("New Password (hashed):", hashedPassword);

      return res
        .status(200)
        .json({ message: "Password has been changed successfully", user });
    } catch (error) {
      console.log(error);
      res.status(error.statusCode || 500).json({
        message: error.message || "Password change failed",
        code: error.code || "passwordChangeFailed",
      });
    }
  });
};

So my issue is that when i change password as you see it gets back a hashed password in log space. But it does not upload the hashed password what i logged. It uploads another hashed password, as you can see in the pictures.

enter image description here

This is my logged and it is also true hashed password.

enter image description here

so this is also my user hashed password after the change password.

Users Models.

import mongoose from "mongoose";
import bcrypt from "bcryptjs";
import generatedId from "../utils/uuid";

const Schema = mongoose.Schema;
const { ObjectId } = Schema.Types;
const randomColorGenerator = () => {
  return Math.floor(Math.random() * 16777215).toString(16);
};

const UserSchema = new Schema(
  {
    uuid: {
      type: String,
      default: generatedId(),
      unique: true,
      required: true,
    },
    locale: {
      type: String,
      required: true,
      default: "tr",
      enum: ["tr", "en"],
    },
    role: {
      type: String,
      required: true,
      default: "user",
      enum: ["user", "admin"],
    },
    name: {
      type: String,
      required: true,
    },
    surname: {
      type: String,
      required: true,
    },
    email: {
      type: String,
      required: true,
      unique: true,
    },
    phoneNumber: {
      type: String,
      required: true,
      unique: true,
    },
    identityNumber: {
      type: String,
      required: true,
      default: "00000000000",
    },
    password: {
      type: String,
      required: true,
    },
    avatarColor: {
      type: String,
      default: randomColorGenerator(),
      required: true,
    },
    address: {
      //fatura ve sipariş adresi diye ikiye ayrılabilir
      type: String,
      required: true,
    },
    city: {
      type: String,
      required: true,
    },
    country: {
      type: String,
      required: true,
      default: "Turkey",
    },
    zipCode: {
      type: String,
      required: true,
    },
    ip: {
      type: String,
      required: true,
      //default: "85.34.78.112", //cihazın ip'sini alır
    },
    isVerified: {
      type: Boolean,
      default: false,
    },
    cardUserKey: {
      type: String,
      required: false,
      unique: true,
    },
  },
  {
    _id: true,
    collection: "users",
    timestamps: true,
    toJSON: {
      transform: (doc, ret) => {
        delete ret.__v;
        delete ret.password;
        return {
          ...ret,
        };
      },
    },
  }
);

UserSchema.pre("save", async function (next) {
  try {
    // this.password = await bcrypt.hash(this.password, 10);
    if (this.isModified("password")) {
      //password incorrect hatasını böyle çözdük
      this.password = await bcrypt.hash(this.password, 10);
    }
    return next();
  } catch (err) {
    return next(err);
  }
  next();
});
const Users = mongoose.model("Users", UserSchema);

export default Users;

Login route.

router.post("/login", async (req, res) => {
    const { email, password } = req.body;
    const user = await Users.findOne({ email });

    if (!email || !password) {
      throw new ApiError(
        "Email and Password is required",
        401,
        "requiredEmailAndPassword"
      );
    }

    if (!user) {
      throw new ApiError(
        "Incorrect Password or email2",
        401,
        "userOrPasswordIncorrect"
      );
    }
    if (user.isVerified == false) {
      throw new ApiError(
        "You have to verificate your account.",
        401,
        "accountNotVerified"
      );
    }
    const passwordConfirmed = await bcrypt.compare(password, user.password);
    console.log("kullanıcı girdisi:", password);
    console.log("hashlenmiş hali:", user.password);

    if (passwordConfirmed) {
      const userJson = user.toJSON();
      const token = jwt.sign(userJson, process.env.JWT_SECRET);
      res.json({
        token: `Bearer ${token}`,
        user: userJson,
      });
    } else {
      throw new ApiError(
        "Incorrect Password or email",
        401,
        "userOrPasswordIncorrect"
      );
    }
  });

So there is a big problem is that when i copy logged hashed password and then ı paste it to manually in mongodb users data, ı can login. But as you see in second picture hashed password does not work. Instead of that logged password works.

Nuxt 3: Entire Project Rebuilds on Any Component Change – Configuration Issue?

Hello,

I’m working on a Nuxt 3 project, and I’ve encountered a problem where the entire project rebuilds whenever I make any change to a component, regardless of whether it’s a change in the TailwindCSS styling or a small update in the component’s logic. This behavior is causing significant delays in my development process.

Interestingly, I recall there being times when this did not happen, and only the affected parts of the project would rebuild, which was much faster and more efficient. I’m wondering what might be causing this issue and how I can prevent the entire project from rebuilding every time.

Additionally, in the console, I keep seeing repeated messages like this:

ℹ Directory components/ created

ℹ Restarting Nuxt...

Does anyone have any insights into what might be causing this, and how I can adjust my configuration to stop these full rebuilds?

Thank you in advance for your help!

I tried making small changes to individual components, expecting only the modified parts to rebuild. However, the entire project rebuilds every time, which is unexpected. I was hoping for faster build times with just the affected components being updated.

How do I remove the default value defined by the dto property in the @nestjs/swagger PartialType function?

CreateAdminDto.ts

export class CreateAdminDto {
  readonly username!: string;

  @IsOptional()
  readonly jurisdiction?: string | null = null;


  @IsOptional()
  readonly nickname?: string;
}

UpdateAdminDto.ts

export class UpdateAdminDto extends PartialType(OmitType(CreateAdminDto, ['username'])) {}

In CreateAdminDto, I defined a jurisdiction attribute and set the default value. In UpdateAdminDto, I used @nestjs/swagger PartialType function, and when I update, I don’t pass the jurisdiction attribute, but it does have a default value. How do I remove this default value?

Cannot redeclare block-scoped variable ‘styleConfig’ [closed]

const styleConfig = {
gridTemplateColumns: “repeat(3, 1fr)”, // Changes the grid to 3 columns
backgroundColor: “#FF5722”, // Changes the background color of grid items
gap: “15px” // Changes the gap between grid items
};

[{
“resource”: “/c:/Users/gedtswdertsdf/OneDrive/Documents/website Build/jsp Function.js”,
“owner”: “typescript”,
“code”: “2451”,
“severity”: 8,
“message”: “Cannot redeclare block-scoped variable ‘styleConfig’.”,
“source”: “ts”,
“startLineNumber”: 1,
“startColumn”: 7,
“endLineNumber”: 1,
“endColumn”: 18
}]

Prevent toggleBtn and menu from toggling on list item click in JavaScript

on Clicking the list items when the toggleBtn is active, then active class is removed from toggleBtn and menu class, I am not able to understand the reason for this behaviour, I have tried stopPropogation in js file, but its not working, I have also tried pointer-events in css file, but its of no use

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="menu">
        <div class="toggleBtn">
            <ion-icon name="close-outline"></ion-icon>
        </div>
        <li style="--x:0">
            <a href=""> <ion-icon name="settings-outline"></ion-icon></a>
        </li>
        <li style="--x:1">
            <a href=""> <ion-icon name="mail-outline"></ion-icon></a>
        </li>

        <li style="--x:2">
            <a href=""><ion-icon name="videocam-outline"></ion-icon></a>
        </li>

        <li style="--x:3">
            <a href=""><ion-icon name="build-outline"></ion-icon></a>
        </li>
        <li style="--x:4">
            <a href="">
                <ion-icon name="game-controller-outline"></ion-icon>
            </a>
        </li>
        <li style="--x:5"><a href="">
                <ion-icon name="camera-outline"></ion-icon>
            </a></li>
        <li style="--x:6">
            <a href=""><ion-icon name="home-outline"></ion-icon></a>
        </li>
        <li style="--x:7">
            <a href=""><ion-icon name="person-outline"></ion-icon></a>
        </li>
    </ul>

    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <script src="script.js"></script>
</body>

</html>
==================
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #222327;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.menu{
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .toggleBtn{
    position: absolute;
    width: 55px;
    height: 55px;
    color: #0f0;
    border: 2px solid #0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 3em;
    transition: 0.5s;
}

.menu .toggleBtn.active{
    transform: rotate(315deg);
    background: #0f0;
    color: #222327;
}

.menu li{
    position: absolute;
    left: 10px;
    list-style: none;
    transform-origin: 140px;
    border: 2px solid #0f0;
    border-radius: 50%;
    transform: rotate(calc(360deg / 8 * var(--x))) translateX(40px);
    z-index: 10;
    pointer-events: none;
    scale: 0;
    transition: 0.5s;
    transition-delay: calc(0.1s * var(--x))
}

.menu.active li{
    scale: 1;
    pointer-events: initials;
}

.menu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    font-size: 1.75em;
    color: #0f0;
    transition: 0.5s;
    transform: rotate(calc(360deg / -8 * var(--x)));
}

.menu li.active a{
    background: #0f0;
    color: #222327;
}
=============
let menuToggle = document.querySelector('.toggleBtn');
let menu = document.querySelector('.menu');
let list = document.querySelectorAll('li');

menuToggle.onclick = () => {
    menu.classList.toggle('active');
    menuToggle.classList.toggle('active');
}


list.forEach(item => item.addEventListener('click',
    function () {
        list.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
}))

I want that on clicking the list items, it should not toggle the toggleBtn and menu

Hello teams I am using asp.net application 2005 vs now we are upgrade to 2017 vs that time we got one issue to call code behind function in js [closed]

 <AjaxPro.AjaxMethod()>
    Public Function SetEmployeeProperties(ByVal EmployeeCode As String) As System.Data.DataRow
        Dim result As Data.DataRow = Nothing
        Dim dtTable As Data.DataTable = New DataAccessLayer.DataConnection(GB.PropertyManager(Session).ActiveConnectionString).ExecuteToDataSet("select DesigCode,DivCode,ReportTo,DeptCode,LocationID,JobGrade,Rank from employee_mst Where EmpCode = " + EmployeeCode).Tables(0)
        If (dtTable.Rows.Count > 0) Then
            result = dtTable.Rows(0)
        End If
        Return result
    End Function 

Javascript file

 <script type="text/javascript">
   function OnEmployeeChange(EmployeeList) {
     var empCode = EmployeeList.options[EmployeeList.selectedIndex].value

     EskanRyteHRMS.Personal_Transfer.SetEmployeeProperties(empCode, OnEmployeeChange_callback)
     // 
   }

   function OnEmployeeChange_callback(response) {
     if (response != null) {

       var DataRow = response.value;
       alert(response)


       var dlOldLocation = document.getElementById("<%=dlOldLocation.ClientID%>");
       var dlLocation = document.getElementById("<%=dlLocation.ClientID%>");
       dlOldLocation.value = dlLocation.value = DataRow[4];



       var dlOldDepartment = document.getElementById("<%=dlOldDepartment.ClientID%>");
       var dlDepartment = document.getElementById("<%=dlDepartment.ClientID%>");



       dlDepartment.value = dlOldDepartment.value = DataRow[3];


       var dlOldReportTo = document.getElementById("<%=dlOldReportTo.ClientID%>");
       var dlReportTo = document.getElementById("<%=dlReportTo.ClientID%>");

       dlOldReportTo.value = dlReportTo.value = DataRow[2];


       var dlOldDivision = document.getElementById("<%=dlOldDivision.ClientID%>");
       var dlDivision = document.getElementById("<%=dlDivision.ClientID%>");

       dlOldDivision.value = dlDivision.value = DataRow[1];


       var dlOldDesignation = document.getElementById("<%=dlOldDesignation.ClientID%>");
       var dlDesignation = document.getElementById("<%=dlDesignation.ClientID%>");

       dlOldDesignation.value = dlDesignation.value = DataRow[0];
     }
   }

 </script>

Button to switch the user’s dark mode browser preference?

I want to provide a “dark mode” switch on a website. That would be easy by using some CSS.

But then: Modern browsers can already tell the website that they want to use a dark mode (prefers-color-scheme). And I can also react to that via CSS.

@media (prefers-color-scheme: dark) {
    html {
        filter: grayscale(0.75) invert(1) contrast(1);
    }
}

My problem is: I do not want these mechanisms (button on the website and browser preference) to collide. And I need the button on the website, because many users don’t know that their browser can change the preference.

Is there any mechanism that would allow a website to provide a button that would change the browser preference?

I fully understand that you would usually not want to allow websites to do something like “change my preferences”, however, it seems like a good idea regarding the prefers-color-scheme.

Puppeteer el.executionContext is not a function error

I am trying to write Application Test for the project but i am getting an error when I try to get the background colour of the element

await I.seeCssPropertiesOnElements(schedulerSelector.flightLegSlotClass, { 'background-color': expectedColour});

or

let bgColor = await I.grabCssPropertyFrom(schedulerSelector.flightLegInnerSlot, 'background-color')
I.assertEqual(bgColor, 'red');

My selector is working correctly because I.seeElement or I waitElement is working. Not getting any error.

So the error I am getting is : el.executionContext is not a function

The code is working if use this code but i want to use 2 of the mention code above.

  const element = document.querySelector(selector);
  return window.getComputedStyle(element).getPropertyValue('background-color');
}, schedulerSelector.flightLegSlotClass);```


Could you please help me.

404 when I reload page [closed]

I have 404 when I reload the browser. Reading online I can use the solution of:

 1. providers: [
    {provide : LocationStrategy , useClass: HashLocationStrategy}
  ]
 2. RouterModule.forRoot(routes, { useHash: true })

 3. modify web config on the server

I want avoid the # in the url and I prefer a solution in the client and not in the server. Anyone can help me?

AR js studio project (image marker) working on glitch, but I want this to work without internet on my desktop

I’m encountering difficulties loading assets locally on my desktop without an internet connection. I’ve correctly placed them in the designated folder, but they are not rendering as expected.

I’m using [AR js studio] and attempting to load using [pattern].

I’ve reviewed the console logs for any relevant error messages but haven’t found any. I’ve also tried opening the assets directly in a web browser, and they display correctly.

Could you please assist me in resolving this issue?

<!DOCTYPE html>
<html>
<head>
  <title>AR Video Marker</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <script>   

    AFRAME.registerComponent('videohandler', {
      init()   
 {
        const marker = this.el;
        const video = document.querySelector('#vid');

        marker.addEventListener('markerFound', () => {
          video.play();
        });

        marker.addEventListener('markerLost', () => {
          video.pause();
        });
      }
    });
  </script>
</head>
<body style="margin: 0; overflow: hidden">
  <a-scene vr-mode-ui="false" loading-screen="false" arjs="sourceType: webcam">
    <a-assets>
      <video id="vid" src="path/to/your/video.mp4" preload="auto" loop crossorigin playsinline autoplay></video>
    </a-assets>
    <a-marker type="pattern" preset="custom" url="path/to/your/marker.patt" videohandler smooth>
      <a-video src="#vid" scale="1.9 2.5 0" position="0 0 0" rotation="-90 0 0"></a-video>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>