chroma/index.html at main · Coding-EG/chroma · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" conten="width=device-width, initial-scale=1.0">
    <title>liveVideoManipulation</title>
    <link rel="stylesheet" href="./style.css">
    <style type="text/css">
    @import url(/style.css);
    </style>
	<script>
	function defaultValue() {
		document.getElementById("reset").reset();
		edit();
	}
</script>

</head>
<body>
       <div id="main">
       <video id="canvas-reference"autoplay></video>
       <canvas id="canvas"></canvas>
	   </div>
       <!--video editing function-->

			<div id="editor"class="box1">
				<div id="function">
					<button class="button"onclick="defaultValue()">Reset To Default</button>
					<button class="button">Start Recording</button>
					<button class="button">Download Video</button>
					<input type = "file"accept = "image/*"id = "background-image">

			    </div>
		      <div id="editor-value">
			   <form id="reset">
				<p>GreenValue</p>
				<input type="range"id="greenValue"class="chroma"max="100"min="-10"value="0"step="1">
			<span id="green">00</span>
		<p>Blur</p>
			<input type="range"id="blur1"class="data"max="10"min="0"value="0"step="0.1"onchange="edit()">
		<span class="dataValue"id="blu"></span>

				<p>Brightness</p>
			<input type="range"id="brig"class="data"max="2"min="0"value="1"step="0.01"onchange="edit()">
		<span class="dataValue"id="bri"></span>

				<p>Contrast</p>
			<input type="range"id="cont"class="data"max="2"min="0"value="1"step="0.01"onchange="edit()">
		<span class="dataValue"id="con"></span>

				<p>Saturation</p>
			<input type="range"id="satu"class="data"max="2"min="0"value="1"step="0.01"onchange="edit()">
		<span class="dataValue"id="sat"></span>

				<p>DropShadow</p>
			<input type="range"id="drop"class="data"max="10"min="0"value="0"step="0.1"onchange="edit()">
		<span class="dataValue"id="dro"></span>

				<p>GreyScale</p>
			<input type="range"id="grey"class="data"max="1"min="0"value="0"step="0.01"onchange="edit()">
		<span class="dataValue"id="gre"></span>

				<p>HueRotate</p>
			<input type="range"id="huer"class="data"max="180"min="-180"value="0"step="1"onchange="edit()">
		<span class="dataValue"id="hue"></span>

				<p>Invert</p>
			<input type="range"id="inve"class="data"max="1"min="0"value="0"step="0.01"onchange="edit()">
		<span class="dataValue"id="inv"></span>


				<p>Sepia</p>
			<input type="range"id="sepi"class="data"max="1"min="0"value="0"step="0.01"onchange="edit()">
		<span class="dataValue"id="sep"></span>

				<p>Opacity</p>
			<input type="range"id="opac"class="data"max="1"min="0"value="1"step="0.01"onchange="edit()">
		   <span class="dataValue"id="opa"></span>

            </form>
			  </div>
        </div>
</body>
<script src="./script.js">

</script>
</html>