docs/tinywan-demo-03/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Use getUserMedia with canvas</title>
    <link rel="stylesheet" href="../main.css">
    <style>
        .none {
            -webkit-filter: none;
            filter: none;
        }

        .blur {
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }

        .grayscale {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
        }

        .invert {
            -webkit-filter: invert(1);
            filter: invert(1);
        }

        .sepia {
            -webkit-filter: sepia(1);
            filter: sepia(1);
        }

        button#snapshot {
            margin: 0 10px 25px 0;
            width: 110px;
        }

        video {
            object-fit: cover;
        }
    </style>
</head>
<body>
<div id="container">

    <h1>修改媒体流，添加CSS样式滤镜</h1>

    <video autoplay></video>

    <label for="select">选择滤镜: </label>
    <select id="filter">
        <option value="none">None</option>
        <option value="blur">Blur</option>
        <option value="grayscale">Grayscale</option>
        <option value="invert">Invert</option>
        <option value="sepia">Sepia</option>
    </select>

    <button id="snapshot">开始捕捉</button>

    <canvas></canvas>

    <p>Draw a frame from the getUserMedia video stream onto the canvas element, then apply CSS filters.</p>
</div>
<script src="../adapter.js"></script>
<script src="main.js"></script>
</body>
</html>