Vue.js应用程序的网络摄像头组件。
安装和下载：
# Yarn
$ yarn add vue-web-cam
# NPM
$ npm install vue-web-cam --save
使用：
import Vue from 'vue'
import WebCam from "../../src";
Vue.use(WebCam);
<vue-web-cam ... />
// or
import { WebCam } from "vue-web-cam";
components: {
WebCam
}
<web-cam ... />
components: {
'vue-web-cam': WebCam
}
<vue-web-cam ... />
Nuxt.js
添加vue-web-cam/nuxt到模块”部分nuxt.config.js
{
modules: ['vue-web-cam/nuxt']
}
Props
| 支柱 | 类型 | 默认 | 笔记 |
|---|
| height | number | 500 | 视频元素的高度 |
| width | number | 500 | 视频元素的宽度 |
| autoplay | boolean | true | 自动播放属性 |
| screenshotFormat | string | ‘image/jpeg’ | 屏幕截图格式 |
| selectFirstDevice | boolean | false | 可用时选择第一个设备 |
| deviceId | string | null | 当前选择的相机 |
| playsinline | boolean | true | 视频元素的内联 |
| resolution | object | null | 具有宽度和高度的对象，用于相机分辨率 |
事件
| 名称 | 参数 | 笔记 |
|---|
| started | stream | 流开始后发出 |
| stopped | stream | 流停止后发出 |
| error | error | 如果流无法启动并返回错误，则发出 |
| notsupported | error | 当浏览器不支持此功能时发出 |
| cameras | cameras | 加载所有可用摄像机的列表时发出 |
| camera-change | deviceId | 发生相机更换时发出 |
| video-live | stream | 视频开始播放时发出 |
方法
| 名称 | 参数 | 笔记 |
|---|
| capture | void | 通过网络摄像头将当前图像捕获为base64编码的dataUri |
| changeCamera | deviceId | 更改当前选择的摄像机。必须输入设备ID |
| start | void | 在停止相机后以编程方式启动相机（取决于传递给组件的deviceId属性） |
| stop | void | 以编程方式停止相机 |
| pause | void | 以编程方式暂停相机 |
| resume | void | 暂停后以编程方式恢复相机 |
