# @codekraft-studio/vue-record 中文文档

规范地址：https://npmcn.com/package/%40codekraft-studio/vue-record/

版本：0\.0\.3
npm 元数据更新时间：2024-08-10T13:19:51.274Z
中文译文更新时间：2026-11-10T06:57:01.763Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40codekraft-studio/vue-record
原文对照：https://npmcn.com/package/%40codekraft-studio/vue-record/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.3 MB，10 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2019-09-07T05:57:40.109Z
- 最新版本发布：2020-01-26T20:37:00.254Z
- 近 30 天下载量：5420（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

> media Record API 的自定义组件

## 安装

```sh
npm install @codekraft-studio/vue-record
```

也可以使用：`pnpm add @codekraft-studio/vue-record`、`yarn add @codekraft-studio/vue-record`、`bun add @codekraft-studio/vue-record`

## README

# vue 记录

> media Record API 的自定义组件

[![NPM version](https://badge.fury.io/js/%40codekraft-studio%2Fvue-record.svg)](https://npmjs.org/package/@codekraft-studio/vue-record) [![Dependency Status](https://david-dm.org/codekraft-studio/vue-record.svg?theme=shields.io)](https://david-dm.org/codekraft-studio/vue-record) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/codekraft-studio/vue-record/blob/master/LICENSE)

检查 [演示](https://codekraft-studio.github.io/vue-record/) 让它行动起来.

## 安装

使用您最喜欢的软件包管理器下载工程 :

```
npm install @codekraft-studio/vue-record
```

装入您的项目并使用它 :

```js
import Vue from 'vue'
import VueRecord from '@codekraft-studio/vue-record'

Vue.use(VueRecord)
```

现在您可以访问全局定义的组件, 例如:

```html
<VueRecordAudio />
<VueRecordVideo />
```

## 使用量

使用模板中具有不同模式和属性的组件来自定义行为和记录输出.

两种提供的组件都可以用作以下伪码示例:

```html
<Component :mode="recMode" @stream="onStream" @result="onResult" />
```

#### 模式

只有两种使用模式,可以随 **模式** 属性 :

-   **拿着**: hold是默认模式,它意味着在按下或按下按钮时开始录制,在发布时停止,基本上就是它 _仅在按下按钮时才录入_。 。 。 .
-   **新闻**:按下按钮后会开始录制,再按下按钮后会停止录制,所以会 _记录直到停止_。 。 。 .

#### 活动

-   **流线**: 当用户介质设备流被捕获并包含原始时, 流出事件 [媒体结构](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) 对象.
-   **结果**:一旦记录完成并包含 [块](https://developer.mozilla.org/en-US/docs/Web/API/Blob) 记录的数据.

默认是开着的 **拿着** 模式,所以按下按钮后开始录制,放出按钮后停止录制. 但是,可以使用不同的模式改变这种行为,可用的模式是: `hold` 财务报告和审定财务报表 `press`。 。 。 .

* * *

## 实例

### 录音音频

很简单,添加组件 并听 **结果** 事件:

```html
<vue-record-audio @result="onResult" />
```

```js
export default {
  methods: {
    onResult (data) {
      console.log('The blob data:', data);
      console.log('Downloadable audio', window.URL.createObjectURL(data));
    }
  }
}
```

> 我们用 [此多填充](https://github.com/kbumsik/opus-media-recorder) 为萨法里.

### 录制视频

很简单,添加组件 并听 **结果** 事件:

```html
<vue-record-video @result="onResult" />
```

```js
export default {
  methods: {
    onResult (data) {
      console.log('The blob data:', data);
      console.log('Downloadable video', window.URL.createObjectURL(data));
    }
  }
}
```

> 这对Safari没有用 我们应该考虑一下 [此多填充](https://github.com/CameraKit/webm-media-recorder)。 。 。 .

* * *

## 许可证

释放 [MIT 许可证](https://npmcn.com/package/%40codekraft-studio/vue-record/LICENSE) © [代码- studio](https://github.com/codekraft-studio)

## 常见问题

### @codekraft-studio/vue-record 是什么？

media Record API 的自定义组件

### 如何安装 @codekraft-studio/vue-record？

在项目目录运行 npm install @codekraft-studio/vue-record，或使用 pnpm add / yarn add / bun add。

### @codekraft-studio/vue-record 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/codekraft-studio\_\_vue-record 是否存在。

### @codekraft-studio/vue-record 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @codekraft-studio/vue-record 可以商用吗？

@codekraft-studio/vue-record 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @codekraft-studio/vue-record 的下载量有多少？

根据 npm 官方下载统计，@codekraft-studio/vue-record 在 2026/10/10 – 2026/11/08 这 30 天内被下载 5,420 次，日均约 181 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @codekraft-studio/vue-record 还在维护吗？

最新版本 0\.0\.3 发布于 2020/01/27（6 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/09/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。