安装 Web AR SDK

使用 NPM 安装 Web AR SDK

确保安装了最新版本的 Node.js，并且你的当前工作目录正是你项目的目录。在命令行中运行以下命令：
使用 NPM

npm install @volcengine/webar

或 使用 PNPM

pnpm install @volcengine/webar

注意事项

Vite 是一个轻量级的、速度极快的构建工具。我们推荐使用 Vite 来构建 Web AR SDK 项目。
如果你使用 Vite 构建项目，请把 @volcengine/webar 加入到 Vite 配置的 optimizeDeps.exclude 中。

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
    optimizeDeps: {
        // https://github.com/vitejs/vite/issues/11672#issuecomment-1402083204
        exclude: ["@volcengine/webar"],
    },
});

通过 CDN 使用 Web AR SDK

如果你不想使用任何构建工具，你可以借助 script 标签直接通过 CDN 来使用 Web AR SDK。
现代浏览器大多都已原生支持 ES 模块。你可以像这样通过 CDN 以及原生 ES 模块使用 Web AR SDK：

<canvas width="640" height="480" id="preview"></canvas>
<script type="module">
    import { ARSession, ARSDK } from "https://unpkg.com/@volcengine/webar@3.6.0/dist/index.js";
    const canvas = document.getElementById("preview");
    const session = ARSDK.createSession({
        canvas,
        authorization: ...,
    });
    await session.start();
</script>

我们使用了 <script type="module">，且导入的 CDN URL 中包含了 Web AR SDK 的版本号 @3.6.0。你可以替换这部分来指定要使用的 SDK 版本。
如要使用 3.6.0 ，则链接为 https://unpkg.com/@volcengine/webar@3.6.0/dist/index.js。
我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。如果你不想使用第三方 CDN，你也可以下载 dist 目录下的所有文件自行部署。你可以通过这个命令获取 SDK 的 npm 包下载地址 npm view @volcengine/webar@3.6.0 dist.tarball，这里的 @3.6.0 表示要获取的 SDK 的版本号。