init

2026-06-21 03:53:06 +03:00
commit f1dd557c5d
147 changed files with 34363 additions and 0 deletions
@@ -0,0 +1,96 @@
+<video id="video" autoplay="true"></video>
+<canvas id="canvas"></canvas>
+<script>
+  var video = document.getElementById("video");
+
+  if (navigator.mediaDevices.getUserMedia) {
+    var successCallback = function (stream) {
+      video.srcObject = stream;
+      var canvas = document.querySelector("canvas");
+
+      // Optional frames per second argument.
+      var stream2 = canvas.captureStream(25);
+      var recordedChunks = [];
+
+      console.log(stream);
+      var options = { mimeType: "video/webm; codecs=vp9" };
+      mediaRecorder = new MediaRecorder(stream, options);
+
+      mediaRecorder.ondataavailable = handleDataAvailable;
+      mediaRecorder.start(1000);
+
+      async function handleDataAvailable(event) {
+        console.log(event.data, await event.data.arrayBuffer());
+        if (event.data.size > 0) {
+          // recordedChunks.push(event.data);
+          addVideoChunk({ data: event.data });
+        }
+      }
+    };
+    var errorCallback = function (error) {
+      console.log(error);
+    };
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: false,
+        video: { facingMode: { ideal: "environment" } }, // prefer rear-facing camera
+      })
+      .then(successCallback, errorCallback);
+  }
+
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext("2d");
+  requestAnimationFrame(renderFrame);
+
+  function renderFrame() {
+    // re-register callback
+    requestAnimationFrame(renderFrame);
+    // set internal canvas size to match HTML element size
+    canvas.width = canvas.scrollWidth;
+    canvas.height = canvas.scrollHeight;
+    if (video.readyState === video.HAVE_ENOUGH_DATA) {
+      // scale and horizontally center the camera image
+      var videoSize = { width: video.videoWidth, height: video.videoHeight };
+      var canvasSize = { width: canvas.width, height: canvas.height };
+      var renderSize = calculateSize(videoSize, canvasSize);
+      var xOffset = (canvasSize.width - renderSize.width) / 2;
+      context.drawImage(video, xOffset, 0, renderSize.width, renderSize.height);
+    }
+  }
+  function calculateSize(srcSize, dstSize) {
+    var srcRatio = srcSize.width / srcSize.height;
+    var dstRatio = dstSize.width / dstSize.height;
+    if (dstRatio > srcRatio) {
+      return {
+        width: dstSize.height * srcRatio,
+        height: dstSize.height,
+      };
+    } else {
+      return {
+        width: dstSize.width,
+        height: dstSize.width / srcRatio,
+      };
+    }
+  }
+
+  const videoRec = document.createElement("video");
+  const ms = new MediaSource();
+
+  videoRec.autoplay = true;
+  videoRec.width = 320;
+  videoRec.height = 240;
+  // console.log(MediaSource.isTypeSupported('video/webm; codecs=vp9'));
+  ms.onsourceopen = () => {
+    console.log("onsourceopen");
+    ms.addSourceBuffer("video/webm; codecs=vp9");
+  };
+  ms.onsourceclose = () => {
+    console.log("onsourceclose");
+  };
+  videoRec.src = window.URL.createObjectURL(ms);
+  document.body.appendChild(videoRec);
+
+  async function addVideoChunk(data) {
+    ms.sourceBuffers[0].appendBuffer(await data.data.arrayBuffer());
+  }
+</script>