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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值