mediarecorder_MediaRecorder API的VueJs组件

mediarecorder

记录 (vue-record)

custom components for MediaRecorder API.

MediaRecorder API的自定义组件。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

Download the project using your favourite package manager:

使用您最喜欢的包管理器下载项目：

npm install @codekraft-studio/vue-record

Load it inside your project and use it:

将其加载到项目中并使用：

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

Vue.use(VueRecord)

Now you have access to the global defined components, here an example:

现在，您可以访问全局定义的组件，下面是一个示例：

<vue-record-audio />
<vue-record-video />

用法 (Usage)

Use the components in your template with different modes and properties to customize the behavior and the recording output.

将模板中的组件与不同的模式和属性一起使用，以自定义行为和录制输出。

模式 (Modes)

The are only two usage modes and can be selected with the mode property:

仅有两种使用模式，可以通过mode属性进行选择：

• hold: Hold is the default mode and it means the recording start when the button is clicked or pressed and stops when is released, basically it record only when holding the button.

  保持 ：保持是默认模式，它表示单击或按下按钮时开始记录，释放时停止，基本上仅在按住按钮时才记录 。

• press: Press will start the recording once the button is pressed and it will stop the recording when the button is pressed again, so it will record until stopped.

  按下 ：按下按钮后将开始录制，再次按下按钮将停止录制，因此它将录制直到停止 。

大事记 (Events)

• stream: The stream event is emitted when the user media device stream is captured and contains the original MediaStream object.

  stream ：捕获用户媒体设备流并包含原始MediaStream对象时，将发射stream事件。

• result: The result event is emitted once a recording has been completed and contains the Blob data of the recording.

  result ：记录完成后将发出result事件，其中包含记录的Blob数据。

By default it's on hold mode, so the recording start when the button is pressed and stops when the button is released. But you can change this behaviour using a different mode, the available modes are: hold and press.

默认情况下，它处于保持模式，因此在按下按钮时开始录制，而在释放按钮时停止录制。 但是您可以使用其他模式更改此行为，可用模式为： hold press 。

---

---

例子 (Examples)

录音 (Recording Audio)

It's simple as adding the component and listening for the result event:

添加组件并监听结果事件很简单：

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

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

录制影片 (Recording Video)

It's simple as adding the component and listening for the result event:

添加组件并监听结果事件很简单：

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

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

翻译自: https://vuejsexamples.com/vuejs-components-for-mediarecorder-api/

mediarecorder