HTML Media Capture

1. 最终效果图展示

linear

2. CSS 样式文件：

    label.cameraButton {
        display: block;
        margin: 1em auto;
        width: 120px;
        padding: 0.5em;
        border: 2px solid #666;
        border-color: #fec #eca #eca #fec;
        background-color: #DDD;
    }
    
    /* Look like a clicked/depressed button */
    label.cameraButton:active {
        border-color: #eca #fec #fec #eca;
    }
    
    label.cameraButton input[accept*="image"] {
        display: none;
    }

3. HTML markup:

<label class="cameraButton">Take a picture
    <input type="file" accept="image/*">
</label>

4. 参考文档

HTML Media Capture

https://www.w3.org/TR/html-media-capture/
HTML Media Capture Demo

https://addpipe.com/html-media-capture-demo/

Published by wkylin 12 August 2017