Troubleshooting ​

You might encounter the following warning in the console:

[Vue warn]: Unknown custom element: <hautai-liqa> - did you register the component correctly?

[Vue warn]: Unknown custom element: <hautai-liqa> - did you register the component correctly?

Reason ​

The warning is caused by the Vue component resolution algorithm.

Solution ​

To get rid of it, specify the compilerOptions.isCustomElement option:

// Only works if using in-browser compilation.
// If using build tools, see Vite Config and Vue CLI Config examples.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes("-")

// Only works if using in-browser compilation.
// If using build tools, see Vite Config and Vue CLI Config examples.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes("-")

// vite.config.js
import vue from "@vitejs/plugin-vue"

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      },
    }),
  ],
}

// vite.config.js
import vue from "@vitejs/plugin-vue"

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      },
    }),
  ],
}

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      }))
  },
}

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      }))
  },
}

You might encounter the following error in the console during the integration step:

Refused to load the stylesheet '.../index-dcb58452.css' because it violates the following Content Security Policy directive: "style-src ...". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Refused to load the stylesheet '.../index-dcb58452.css' because it violates the following Content Security Policy directive: "style-src ...". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Reason ​

The error is caused by the Content Security Policy directive, which restricts the loading of external stylesheets.

Solution ​

To fix the issue, follow the guideline for setting the Content Security CSP correctly

You may encounter an issue where the Live Video is paused or frozen upon LIQA startup when running on the Samsung Internet Browser.

Reason ​

This issue occurs due to a bug in certain versions of the Samsung Internet Browser.

Specifically, as most of the browsers, Samsung Internet requires user interaction with the page before it can play the web camera video. However, it does not recognize the browser's camera permissions dialog as sufficient interaction while all other browsers do. As a result, the live video remains paused or frozen.

Solution ​

Unfortunately, there is no direct solution for the issue but waiting for the Samsung Internet Browser team to fix it. Luckily, the likelihood of encountering this issue is relatively low because:

1. The issue occurs only in several versions of the Samsung Internet Browser.
2. The issue arises only if there is no prior interaction with the page (such as clicking an element, scrolling, or navigating) before displaying LIQA while most applications integrating LIQA include some form of user interaction before displaying it to users.

A similar Chromium (the browser Samsung Internet is built around) issue can be tracked in the Chromium issues tracker while waiting for a resolution.

Licensing issues ​