php h5视频录制上传,基于koa的h5视频录制异步上传

# 需求

1. h5 录制视频，

2. 异步上传到 node 服务器端

3. 文件保存在服务器端。

# 技术选型

## 前端

- jquery

## 后端

- koa

# 技术坑点

## h5 录制视频

```html

```

主要依赖 `accept` 属性 和 `capture` 属性

### accept(限制可用文件类型)

accept 属性：可以直接打开系统文件目录。当元素的 type 属性的值是 file，该属性表明服务器端可接受的文件类型，其它文件类型会将被忽略。

如果希望用户上传指定、类型的文件, 可以使用 input 的 accept 属性。

结合需求是上传视频录制，所以设置 `accept="video/*"` 就可以满足需求了。

#### 扩展

audio/* 表示所有音频文件 HTML5(支持)

video/* 表示视频文件 HTML5(支持)

image/* 表示图片文件 HTML5(支持)

### capture(调用设备媒体)

capture 属性：在webapp上使用 input 的 file 属性，指定 capture 属性可以调用系统默认相机、摄像和录音功能。

#### 扩展

capture="camera" 相机

capture="camcorder" 摄像机

capture="microphone" 录音

## 异步上传

主要利用 FormData 和 ajax 来实现文件的异步上传。

核心代码：

```

$input.on('change', function (event) {

const files = event.target.files;

if (files && files.length > 0) {

let file = files[0];

if (file.size > 100 * 1024 * 1024) {

alert('视频大于100M，请重新上传');

return;

}

// $form.submit();

let formData = new FormData();

formData.append('file', file);

$uploading.show();

$.ajax({

url: '/upload',

type: 'POST',

data: formData,

cache: false,

processData: false,

contentType: false

}).then(function (data) {

console.log(data);

// success

}).catch(function (e) {

console.error(e);

// error

});

} else {

alert('请重新上传视频');

}

})

```

## 文件保存在服务器端

主要依赖 `koa-body` 库来帮助我们读取上传的文件

具体实现：

```

const koaBody = require('koa-body')({

multipart: true,

formLimit: 2000 * 1024 * 1024,

formidable: {

uploadDir: __dirname + '/temps'

}

});

router.post('/upload', koaBody,

(ctx) => {

const file = ctx.request.files && ctx.request.files.file;

if (file) {

const reader = fs.createReadStream(file.path);

const ext = file.name.split('.').pop();

const dir = path.join(__dirname, `/uploads/${(new Date()).getTime()}.${ext}`);

const upStream = fs.createWriteStream(dir);

reader.pipe(upStream);

return ctx.body = 'success';

} else {

return ctx.body = 'error';

}

}

);

```

# demo

github: https://github.com/bosscheng/koa-h5-video-async-upload