あなたのビデオのスクリーンショットをsnipするためにHTMLキャンバスを使うこと

ソーシャルメディア、テキスト認識、および他の画像処理のためのあなたのブラウザとデスクトップアプリケーションのスニペットを作成します.

ビデオキャプチャ画面

もちろん、MP 4ファイルからビデオをロードすることができますが、このポストでは、私はあなたのブラウザーまたはデスクトップ・アプリケーションを記録することからつくられるビデオ・オブジェクトに集中したいです.そのためには、クライアントがスクリーンやアプリケーションを選択するよう要求するネイティブのJavaScriptのAsync関数であるGetDisplayMediaを使用します.

<style>
  #videoElement {
    height: 500px;
    position: absolute;
  }
</style>

<video id="videoElement" autoplay></video>

<script>
async function startCapture(){
  try {
    videoElement.srcObject = await navigator.mediaDevices.getDisplayMedia({  video: { cursor: 'always'},audio: false})
  } catch(err) {
    console.error("Error" + err)
  }
}
startCapture();
</script>

ページを起動すると、ブラウザを共有する画面を選択するように指示されます.

ビデオにキャンバスを重ねる

部分的なスクリーンキャストのためにビデオに長方形を描くために、我々は同じサイズのキャンバス要素でビデオをオーバーレイすることができました.私たちのビデオディメンションは、クライアントが選択したウィンドウによって決定されるので、ビデオがロードされると、我々はOnPlayイベントでResizeRoundキャンバスを実行してキャンバスをサイズ変更します.

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color:rgba(255,0,0,0.5);
}

<video id="videoElement" autoplay onplay="resize_canvas(this)"></video>
<canvas class="canvas" id="cv1"></canvas>
<script>
  function resize_canvas(element)
{
  cv1.width = element.offsetWidth;
  cv1.height = element.offsetHeight;
}
</script>

あなたが今までコードに従ったならば、あなたは我々が赤でキャンバスをハイライトしたと気がつきました.ブラウザで実行すると、このようになります.

キャンバスがビデオ要素の上できちんと重なっているならば、我々はこの線を取り除くことによって我々の赤いキャンバスを隠すことができます.

background-color:rgba(255,0,0,0.5);

スナイピング領域を選択する矩形の描画

snipする領域を描画するには、キャンバスのマウスイベントを聞き、マウス座標を保存し、キャンバスコンテクストCTXで描画するためにこれらの座標を使用します.

let last_mousex = last_mousey = 0;
let mousex = mousey = 0;
let mousedown = false;
let rect = {};
const ctx = cv1.getContext("2d");

cv1.addEventListener("mouseup", function (e) {
  mousedown = false;
}, false);

cv1.addEventListener("mousedown", function (e) {
  last_mousex = parseInt(e.clientX-cv1.offsetLeft);
  last_mousey = parseInt(e.clientY-cv1.offsetTop);
  mousedown = true;
}, false);

cv1.addEventListener("mousemove", function (e) {
  mousex = parseInt(e.clientX-cv1.offsetLeft);
  mousey = parseInt(e.clientY-cv1.offsetTop);
  if(mousedown) {
      ctx.clearRect(0,0,cv1.width,cv1.height); //clear canvas
      ctx.beginPath();
      var width = mousex-last_mousex;
      var height = mousey-last_mousey;
      ctx.rect(last_mousex,last_mousey,width,height);
      rect = {x: last_mousex, y: last_mousey, width, height};
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      ctx.stroke();
  }
}, false);

次の部分については、オブジェクトの幅、高さ、および四角形の開始座標を格納するrectも宣言しました.

ビデオをキャンバスに変換する

まず、変換アクションを制御するためのボタンのスニップを追加します.トリミング画像を表示するには、イメージ要素CroppediMGを追加します.我々の前の要素が絶対的な位置を持っているので、我々は容器部にそれらをラップします.

<div class="container">
  <video id="videoElement" autoplay onplay="resize_canvas(this)"></video>
  <canvas class="canvas" id="cv1"></canvas>
</div>
<button id="snip">Snip</button>
<img id="croppedImg"></img>

変換のために、キャンバスの作り付けられた機能drawimageでビデオ要素をイメージに翻訳するために、新しいキャンバスCv 2を作成します.パラメータでは、rectオブジェクトから渡された開始座標と幅/高さを使用します.我々は、aspectratio(その大きさに対するビデオの実次元の比率)をキャンバスに表示して、これらの値を乗算しなければならない.最後に、データをキャンバスに変換し、結果をHTMLイメージ要素に出力します.

snip.addEventListener("click", function(e) {
  VideoToCroppedImage(rect);
})
function VideoToCroppedImage({width, height, x, y}) {
  const aspectRatioY = videoElement.videoHeight / cv1.height;
  const aspectRatioX = videoElement.videoWidth / cv1.width;

  const cv2 = document.createElement('canvas');
  cv2.width = width*aspectRatioX;
  cv2.height = height*aspectRatioY;
  const ctx2 = cv2.getContext('2d');
  ctx2.drawImage(videoElement, x*aspectRatioX, y*aspectRatioY, width*aspectRatioX, height*aspectRatioY, 0, 0, cv2.width, cv2.height);
  const dataURI = cv2.toDataURL('image/jpeg');
  croppedImg.src = dataURI; 
}

DrawImageのパラメータ: DrawImage ( image , sx , sy , sw , sh , dx , dy , dw , dh )

キャンバスの寸法をビデオのaspectratioに乗算することによって、最終的に取られた像は、その自国の解像度である.

今、あなたはソーシャルメディアのエンドポイント、処理、およびOCRにこのイメージを渡すことができます.

ボーナス：TesseractによるOCR。js

テッセラクトを追加します.我々のプロジェクトへのJS CDN.

<script src='https://unpkg.com/[email protected]/dist/tesseract.min.js'></script>

画像データを受信し、TesserActを使ってテキストに変換する関数RegiizeErrorイメージを宣言します.そして、結果をDOVに挿入します.
テッセラクトで.JSは、異なる言語のためにその労働者を構成することができます.ここでは日本語を初期化します.

const { createWorker } = Tesseract;

function recognize_image(img) {
  (async () => {
    const worker = createWorker();
    await worker.load();
    await worker.loadLanguage('jpn');
    await worker.initialize('jpn');
    await worker.setParameters({preserve_interword_spaces: '1'})
      const {
        data: { text },
      } = await worker.recognize(img);
      insertTextToDom(text);
      await worker.terminate();
  })();
}
function insertTextToDom(text) {
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = text;
  document.body.append(div);
}

我々は、我々が我々の第2のキャンバスでイメージを取っているとき、videotocroppedimageで我々のRecogizeCountイメージ機能を呼びます.

function VideoToCroppedImage({width, height, x, y}) {
  ..
  const dataURI = cv2.toDataURL('image/jpeg');
  recognize_image(dataURI)
}

プレビューが必要ないので、イメージ要素を削除し、直接イメージデータURIを関数に渡すことができます.
OCRの精度は、画質、フォント、および我々の訓練されたデータを含む多くの要因に依存するでしょう.

上記の例のOCR結果は完璧ですが、それはあなたのアプリケーションで乱暴に変化することができます.

物を包む

この記事では、JavaScriptでブラウザとデスクトップアプリケーションを記録する方法について話しました.そして、ビデオと対話するためにキャンバス要素を重ね合わせて、TesseractでOCRを実行します.jsここでは完全なソースコードを見つけることができます.
< div >

次世代OCRのための前処理画像

ここでは,我々の画像を前処理することによりocrの精度を向上させることができる.興味があるなら、以下のポストをチェックしてください
<> P >
< div class ="Lagagchen - chen link "

OCRのための前処理画像へのJavaScriptの使用

マシューチャン・ 11月12日・ 7分読む

#javascript #webdev #machinelearning #tutorial

< div >
< tt > Tesseract用のトレーニングデータを作成することもできますが、別のポストのために残します.p >
<堀田>p >