@liuyi_npm/media

基于 HTML5 在 web 端实现摄像、视频录制及重播以及拍照。

1.兼容性

1. 需要支持且开启摄像头权限

2. 需要支持视频录制 MediaRecorder

1-1.摄像头权限

可以通过 getMediaAuth 来获取摄像头权限：

getMediaAuth()
	.then(stream => {
		console.log(stream)
	})
	.catch(err => {
		console.error(err)
	})

上述 err 有以下几种情况：

• NOT_SUPPORT 不支持摄像头
• NOT_SECURE 执行环境不安全
• NOT_PERMISSION 未授权

1-2.支持视频录制

可以通过 getRecorderAuth() 来判断客户是否支持视频录制：

if (getRecorderAuth()) {
	// ...
} else {
	// ...
}

2.使用方式

通过 yarn 安装依赖：

yarn add @liuyi_npm/media

如果要使用基础类库的话：

import Media from '@liuyi_npm/media'

const media = new Media()

也可以在 vue 项目中当作插件使用：

import Vue from 'vue'
import { useMediaInVue } from '@liuyi_npm/media'

Vue.use(useMediaInVue)

利用上述 Vue.use 注册之后，会在 Vue.prototype 上挂载 $media 实例。

另外，为了方便查看和上手，该库还内置了可以在 vue 项目中开箱即用的组件（可作 Demo 使用，暂不推荐实际生产直接应用）：

import { MediaRecorder } from '@liuyi_npm/media'
import '@liuyi_npm/media/styles/index.css'

Vue.component('MediaRecorder', MediaRecorder)

useMediaInVue 与 MediaRecorder 的配置和实例是互相独立的。

2-1.自定义配置

可以在 new 实例化或者手动调用实例 create 方法传入 options：

const media = new Media(options)

// or

media.create(options)

options 支持参数如下：

1. mediaVideo: 视频 video 标签；

2. recordVideo: 视频重播 video 标签；

3. config

   • video: 是否支持视频，默认为 { aspectRatio: 4 / 3 }；移动端 IOS 设备上视频流比例存在兼容性问题，笔者在测试中发现设置为 4 / 3 有问题，1/ 1 正常。
   • audio: 是否支持音频，默认为 true；
   • mirror: 是否镜面成像，默认为 false。

2-2.初始化视窗

在日常经验中，我们在一些视频播放 APP 上会发现，是有可选画面尺寸的。譬如：

• 16:9
• 4:3
• 1:1

为了保证视频比例正常，我们一方面可以根据设置的 mediaVideo 宽高比来设置 aspectRatio。

另一方面也可以通过 getRectWithAspectRatio 方法来设置给定 aspectRatio 下对应的 mediaVideo 元素宽高。

3.摄像

在 HTML5 中，基于 navigator.mediaDevices.getUserMedia 来判断客户端是否支持摄像功能。

3-1.开启摄像

我们可以通过 media.open() 方法来开启摄像，该方法基于 getMediaAuth 来判断是否有摄像权限。

media.open()
	.then(stream => {
		console.log(stream)
	})
	.catch(err => {
		console.error(err)
	})

可以通过 err 异常来进行对应场景下的逻辑判断。具体异常见 getMediaAuth。

3-2.关闭摄像

可使用 media.close() 方法来关闭摄像。

4.视频录制及重播

在 HTML5 中，基于 MediaRecorder 来创建视频流录制。

4-1.开始录像

可使用 media.startRecorder() 来录制实时视频。

视频录制开始后，视频流会存储在 media.recordedBlobs 数组中。

4-2.停止录像

可使用 media.stopRecorder() 来中止实时视频的录制。

4-3.视频播放

视频重播功能需要在 options 中配置 recordVideo。

在调用 media.playVideo() 时，如果 media.recordedBlobs 存在视频流信息，则 recordVideo 会播放录制完成的视频。

4-4.视频暂停

可使用 media.pauseVideo() 来中止实时视频的播放。

4-5.视频下载

调用 media.downloadVideo() 方法，会将 media.recordedBlobs 以 video/webm 的视频格式下载下来。

5.拍照

在 HTML5 中，利用 canvas 以及 Blob 来实现视频图像的截取和转化。

5-1.图像截取

在视频录制的过程中，可以截取某个瞬间的视频照片。

const photo = media.takePhoto({
	filename: 'photo.png',
	ratio: 2
})

// photo中会包含File类型对象以及Base64图片地址
console.log(photo.file)
console.log(photo.dataUrl)