Asynchronous upload of h5 video recording based on koa

demand

1. h5 recording video,
2. Asynchronous upload to the node server
3. The file is saved on the server side.

Technology selection

front end

• jquery

rear end

• also

Technical pits

h5 record video

<input type="file" name="file" accept="video/*" id="takeVideo" capture="camcorder"/>

It relies mainly on acceptproperty and captureproperty

accept (restrict available file types)

Accept attribute: you can directly open the system file directory. When the value of the type attribute of the element is file, this attribute indicates the file type acceptable on the server side, and other file types will be ignored.

If you want users to upload files of a specified type, you can use the accept attribute of input.

Combined with demand is uploaded video recording, so set up accept="video/*"to meet the demand.

Expand

audio/* means all audio files HTML5 (supported)

video/* means the video file HTML5 (supported)

image/* means image file HTML5 (supported)

capture (call device media)

Capture attribute: Use the file attribute of input on the webapp, and specify the capture attribute to call the system's default camera, video and recording functions.

Expand

capture="camera" camera

capture="camcorder" camera

capture="microphone" recording

Asynchronous upload

Mainly use FormData and ajax to realize the asynchronous upload of files.

Core code:

$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('请重新上传视频');
        }
    })

The file is saved on the server

Mainly dependent koa-bodylibraries to help us read the uploaded files

Implementation:

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