vue 记录

media Record API 的自定义组件

检查 演示 让它行动起来.

安装

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

npm install @codekraft-studio/vue-record

装入您的项目并使用它 :

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

Vue.use(VueRecord)

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

<VueRecordAudio />
<VueRecordVideo />

使用量

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

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

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

模式

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

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

活动

• 流线: 当用户介质设备流被捕获并包含原始时, 流出事件 媒体结构 对象.
• 结果:一旦记录完成并包含 块 记录的数据.

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

实例

录音音频

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

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

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

我们用 此多填充 为萨法里.

录制视频

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

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

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

这对Safari没有用 我们应该考虑一下 此多填充。 。 。 .

许可证

释放 MIT 许可证 © 代码- studio