react 调用摄像头

简介: react 调用摄像头

react 调用摄像头方法

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 生成 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 生成 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 生成 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();
    };

教程网站

https://developer.mozilla.org/zh-CN/docs
目录
打赏
0
0
0
0
3
分享
相关文章
React音频播放控制组件开发深度解析
本文介绍了构建React音频控制组件时遇到的关键问题及优化方案。主要包括: 1. **状态同步难题**:解决播放按钮与音频状态不同步的问题,通过双向绑定机制确保一致。 2. **跨浏览器兼容性**:处理Safari和Chrome预加载策略差异,确保`duration`属性正确获取。 3. **进度控制优化**:避免使用`setInterval`,采用`requestAnimationFrame`提升性能;优化拖拽交互,防止音频卡顿。 4. **音量控制进阶**:实现渐变音量调节和静音状态同步。
50 15
React 中的合成事件
【8月更文挑战第30天】
75 6
Vue Camera组件的使用方法
Vue Camera组件的使用方法
312 0
React渲染流程
应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。
52 3
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
React合成事件的原理是什么
React合成事件的原理是什么
98 0
vue调用摄像头扫描二维码功能
在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能。可能一时间想到的解决方案就是调用微信的sdk,但是这个微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作。很麻烦。可以但没必要,万一你的h5和公众号没有任何关联,不久徒增烦恼吗?
497 0