temberature/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file">
    <video src="" autoplay controls width=500></video>
    <canvas width="500" height="300"></canvas>
    <script>
        let input = document.querySelector('input');
        let reader = new FileReader()
        let video = document.querySelector('video')
        let canvas = document.querySelector('canvas').getContext('2d')
        let width, height, worker
        video.addEventListener('play', () => {
            console.log(1);
            width = video.clientWidth
            height = video.clientHeight
            setInterval(() => {
                canvas.drawImage(video, 0, 0, width, height)
            }, 0)
        })
        reader.onload = function () {
            console.log(reader.result);
            // video.setAttribute('src', reader.result)
            worker.postMessage({
                type: "command",
                arguments: parseArguments("-i input.webm -ss 10 -t 10 clip.mp4"),
                files: [
                    {
                        "name": "input.webm",
                        "data": new Uint8Array(reader.result)
                    }
                ]
            });
        }
        input.addEventListener('change', (e) => {
            console.log(e);
            console.log(input.files);
            // reader.readAsDataURL(input.files[0])
            let file = input.files[0]
            reader.readAsArrayBuffer(file)

        })
        function parseArguments(text) {
            text = text.replace(/\s+/g, ' ');
            var args = [];
            // Allow double quotes to not split args.
            text.split('"').forEach(function (t, i) {
                t = t.trim();
                if ((i % 2) === 1) {
                    args.push(t);
                } else {
                    args = args.concat(t.split(" "));
                }
            });
            return args;
        }
        function getDownloadLink(fileData, fileName) {
            if (fileName.match(/\.jpeg|\.gif|\.jpg|\.png/)) {
                var blob = new Blob([fileData]);
                var src = window.URL.createObjectURL(blob);
                var img = document.createElement('img');

                img.src = src;
                return img;
            }
            else {
                var a = document.createElement('a');
                a.download = fileName;
                var blob = new Blob([fileData]);
                var src = window.URL.createObjectURL(blob);
                a.href = src;
                a.textContent = 'Click here to download ' + fileName + "!";
                return a;
            }
        }
        function initWorker() {
            worker = new Worker("worker-asm.js");
            worker.onmessage = function (event) {
                console.log(event.data);
                var message = event.data;
                if (message.type == "ready") {
                    // isWorkerLoaded = true;
                    // worker.postMessage({
                    //     type: "command",
                    //     arguments: ["-help"]
                    // });

                } else if (message.type == "stdout") {
                    // outputElement.textContent += message.data + "\n";
                } else if (message.type == "start") {
                    // outputElement.textContent = "Worker has received command\n";
                } else if (message.type == "done") {
                    console.log(event.data);
                    var buffers = message.data;

                    buffers.forEach(function (file) {
                        document.body.appendChild(getDownloadLink(file.data, file.name));
                    });
                }
            };
        }
        initWorker();
    </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>

	<body>
	<input type="file">
	<video src="" autoplay controls width=500></video>
	<canvas width="500" height="300"></canvas>
	<script>
	let input = document.querySelector('input');
	let reader = new FileReader()
	let video = document.querySelector('video')
	let canvas = document.querySelector('canvas').getContext('2d')
	let width, height, worker
	video.addEventListener('play', () => {
	console.log(1);
	width = video.clientWidth
	height = video.clientHeight
	setInterval(() => {
	canvas.drawImage(video, 0, 0, width, height)
	}, 0)
	})
	reader.onload = function () {
	console.log(reader.result);
	// video.setAttribute('src', reader.result)
	worker.postMessage({
	type: "command",
	arguments: parseArguments("-i input.webm -ss 10 -t 10 clip.mp4"),
	files: [
	{
	"name": "input.webm",
	"data": new Uint8Array(reader.result)
	}
	]
	});
	}
	input.addEventListener('change', (e) => {
	console.log(e);
	console.log(input.files);
	// reader.readAsDataURL(input.files[0])
	let file = input.files[0]
	reader.readAsArrayBuffer(file)

	})
	function parseArguments(text) {
	text = text.replace(/\s+/g, ' ');
	var args = [];
	// Allow double quotes to not split args.
	text.split('"').forEach(function (t, i) {
	t = t.trim();
	if ((i % 2) === 1) {
	args.push(t);
	} else {
	args = args.concat(t.split(" "));
	}
	});
	return args;
	}
	function getDownloadLink(fileData, fileName) {
	if (fileName.match(/\.jpeg\|\.gif\|\.jpg\|\.png/)) {
	var blob = new Blob([fileData]);
	var src = window.URL.createObjectURL(blob);
	var img = document.createElement('img');

	img.src = src;
	return img;
	}
	else {
	var a = document.createElement('a');
	a.download = fileName;
	var blob = new Blob([fileData]);
	var src = window.URL.createObjectURL(blob);
	a.href = src;
	a.textContent = 'Click here to download ' + fileName + "!";
	return a;
	}
	}
	function initWorker() {
	worker = new Worker("worker-asm.js");
	worker.onmessage = function (event) {
	console.log(event.data);
	var message = event.data;
	if (message.type == "ready") {
	// isWorkerLoaded = true;
	// worker.postMessage({
	// type: "command",
	// arguments: ["-help"]
	// });

	} else if (message.type == "stdout") {
	// outputElement.textContent += message.data + "\n";
	} else if (message.type == "start") {
	// outputElement.textContent = "Worker has received command\n";
	} else if (message.type == "done") {
	console.log(event.data);
	var buffers = message.data;

	buffers.forEach(function (file) {
	document.body.appendChild(getDownloadLink(file.data, file.name));
	});
	}
	};
	}
	initWorker();
	</script>
	</body>

	</html>