91 lines
2.2 KiB
HTML
91 lines
2.2 KiB
HTML
<p>
|
|
<button onClick="openCamera()">Camera</button>
|
|
<button onClick="openScreensharing()">Screensharing</button>
|
|
<!--
|
|
<input type="number" id="x" />
|
|
<input type="number" id="y" />
|
|
<input type="number" id="width" />
|
|
<input type="number" id="height" />
|
|
-->
|
|
<button onClick="startStream()">Start stream</button>
|
|
</p>
|
|
|
|
<p>
|
|
<video autoplay style=""></video>
|
|
<canvas style="display: none; transform: scale(1000%); image-rendering: crisp-edges;"></canvas>
|
|
</p>
|
|
|
|
<script>
|
|
const video = document.querySelector('video');
|
|
const canvas = document.querySelector('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
async function openCamera() {
|
|
const media = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
|
|
video.srcObject = media;
|
|
}
|
|
|
|
async function openScreensharing() {
|
|
const media = await navigator.mediaDevices.getDisplayMedia();
|
|
video.srcObject = media;
|
|
}
|
|
|
|
async function startStream() {
|
|
const width = 12;
|
|
const height = 10;
|
|
|
|
const buffer = new ArrayBuffer(width * height * 3 + 2);
|
|
const fb = new Uint8Array(buffer);
|
|
fb[0] = 2;
|
|
fb[1] = 1;
|
|
const offset = 2;
|
|
let skip = 0;
|
|
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
|
|
const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/stream`);
|
|
|
|
ws.onmessage = (ev) => {
|
|
console.info('onmessage', ev);
|
|
};
|
|
ws.onopen = (ev) => {
|
|
console.info('onopen');
|
|
// fb[0] = 97;
|
|
ws.send(buffer);
|
|
ws.send('dupa!');
|
|
};
|
|
ws.onclose = (ev) => {
|
|
console.info('onclose');
|
|
};
|
|
|
|
const interval = 1000/30.0;
|
|
const blob = new Blob([`setInterval(() => postMessage(0), ${interval});`]);
|
|
const workerScript = URL.createObjectURL(blob);
|
|
const worker = new Worker(workerScript);
|
|
worker.onmessage = () => {
|
|
render();
|
|
};
|
|
|
|
function render() {
|
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
ctx.filter = 'contrast(300%)';
|
|
const pixel = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
|
for (var i = 0; i < width * height; i++) {
|
|
fb[offset+3*i] = pixel.data[4*i];
|
|
fb[offset+3*i+1] = pixel.data[4*i+1];
|
|
fb[offset+3*i+2] = pixel.data[4*i+2];
|
|
}
|
|
|
|
if (ws.readyState === 1) {
|
|
ws.send(fb);
|
|
}
|
|
}
|
|
|
|
//render();
|
|
|
|
}
|
|
|
|
</script>
|