Capture-pic NPM

Capture photo Util

Usage

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue</title>
  </head>
  <body>
    <div id="app">
      <div>
        <h2>直接抓拍</h2>
        <button id="capture">抓拍</button>
      </div>
      <div>
        <h2>video预览</h2>
        <button id="preview">预览</button>
        <button id="stop">停止</button>
      </div>
      <div>
        <video id="video"></video>
      </div>
      <div>
        <img id="img" />
      </div>
    </div>
  </body>
  </html>

typescript

import { CapturePic } from 'capture-pic';
export interface Options {
  videoId: string;
  width: number;
  height: number;
}

let capUtil: CapturePic;
const button = document.getElementById('capture');
if(button){
  button.onclick = async (): Promise<void> =>{
    if(!capUtil){
      capUtil = await new CapturePic().init();
    }
    if(!capUtil.isSuportTest()){
      console.error('不支持抓拍功能');
      capUtil = null
      return
    }
    const img: HTMLImageElement = document.getElementById('img') as HTMLImageElement;
    img.src = capUtil.capture().getBase64();
    capUtil.stop();
    capUtil = null;
  }
}

const preview = document.getElementById('preview');
if(preview){
  preview.onclick = async (): Promise<void> =>{
    if(!capUtil){
      capUtil = await new CapturePic({
        videoId:'video'
      } as Options).init();
    }
    if(!capUtil.isSuportTest()){
      console.error('不支持抓拍功能');
      capUtil = null
      return
    }
    const img: HTMLImageElement = document.getElementById('img') as HTMLImageElement;
    img.src = capUtil.capture().getBase64();
  }
}
const stop = document.getElementById('stop');
if(stop){
  stop.onclick = (): void =>{
    if(!capUtil){
      return;
    }
    capUtil.stop();
    capUtil = null;
  }
}