确保安装了最新版本的 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"], }, });
如果你不想使用任何构建工具,你可以借助 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 的版本号。