# 需求
1. h5 录制视频，
2. 异步上传到 node 服务器端
3. 文件保存在服务器端。
# 技术选型
## 前端
- jquery
## 后端
- koa
# 技术坑点
## h5 录制视频
```html
<input type="file" name="file" accept="video/*" id="takeVideo" capture="camcorder"/>
```
主要依赖 `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 -->
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
