Vue.js的网络摄像头组件

Vue.js的网络摄像头组件
插件名称 vue-web-cam
发布时间 2020年6月8日
插件作者 VinceG

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 暂停后以编程方式恢复相机