react call camera

react call camera method

import React, {
    
     useEffect } from "react";
import {
    
     useRef } from "react";

/*
    这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
    这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
    返回的是一个Promise对象。
    如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
    如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
    */

// 获取当前帧
//  var captureImage = function() {
    
    
//     var canvas = document.createElement("canvas");
//     canvas.width = video.videoWidth * scale;
//     canvas.height = video.videoHeight * scale;
//     canvas.getContext('2d')
//         .drawImage(video, 0, 0, canvas.width, canvas.height);
//     var img = document.createElement("img");
//     img.src = canvas.toDataURL('image/png');
//     $output.prepend(img);
// };

export let UseCamera = () => {
    
    
  let video_ref: any = useRef();

  async function getMedia() {
    
    
    let video = video_ref.current;
    let constraints = {
    
    
      video: {
    
     width: 500, height: 500 },
      audio: true,
    };

    try {
    
    
      let MediaStream = await navigator.mediaDevices.getUserMedia(constraints);
      video.srcObject = MediaStream;
      video.play();
    } catch (e) {
    
    
      alert(e);
    }
  }

  let captureImage = () => {
    
    
    let video = video_ref.current;
    let canvas: any = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);

    let a_down:a = document.createElement("a");
    a_down.src=""
    return canvas.toDataURL("image/jpeg");
  };

  useEffect(() => {
    
    
    // let video = video_ref.current;
    // getMedia(video);
  }, []);

  return (
    <div style={
    
    {
    
     display: "flex", flexDirection: "column" }}>
      <video
        ref={
    
    video_ref}
        width="500px"
        height="500px"
        autoPlay={
    
    true}
      ></video>
      <br />
      <button
        onClick={
    
    () => {
    
    
          getMedia();
        }}
      >
        打开摄像头
      </button>
      <br />
      <button
        onClick={
    
    () => {
    
    
          captureImage();
        }}
      >
        截取当前帧
      </button>
    </div>
  );
};

canvas 生成 dataurl

canvas.toDataURL(down_img, "image/jpeg");

Canvas generates blob

    let down_img = (blob: any) => {
    
    
      let a_down: any = document.createElement("a");
      a_down.href = URL.createObjectURL(blob);
      console.log("blob对象", blob);
      a_down.download = "截图" + new Date().toLocaleString();
      a_down.click();
    };

    canvas.toBlob(down_img, "image/jpeg");

blob generates url

URL.createObjectURL(blob);

    let down_img = (blob: any) => {
    
    
      let a_down: any = document.createElement("a");
      a_down.href = URL.createObjectURL(blob);
      let file1 = new File([blob], "图片", {
    
     type: "image/jpeg" });
      console.log("file对象", file1);

      a_down.download = "截图" + new Date().toLocaleString();
      a_down.click();
    };

blob generates file

      let file1 = new File([blob], "图片.jpg", {
    
     type: "image/jpeg" });

    let down_img = (blob: any) => {
    
    
      let a_down: any = document.createElement("a");
      a_down.href = URL.createObjectURL(blob);
      console.log("blob对象", blob);
      let file1 = new File([blob], "图片", {
    
     type: "image/jpeg" });
      console.log("file对象", file1);

      a_down.download = "截图" + new Date().toLocaleString();
      a_down.click();
    };

Tutorial website

https://developer.mozilla.org/zh-CN/docs