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" }}><videoref={video_ref}width="500px"height="500px"autoPlay={true}></video><br /><buttononClick={() => {getMedia();}}>打开摄像头</button><br /><buttononClick={() => {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

react 调用摄像头相关推荐

react调用摄像头拍照
React调用摄像头拍照场景在一些移动app的个人登陆页面往往有头像的地方,我们可以根据自己的喜好随意的更换我们的头像.那么在react-native的项目中如果轻松的实现这一功能,下面有一些简单的 ...
React 调用手机，电脑摄像头扫描识别二维码
1. 调用摄像头通过mediaDevices.getUserMedia方法调起录像功能 // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象if (naviga ...
JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
前端使用navigator.mediaDevices.getUserMedia和window.MediaRecorder实现调用摄像头录制视屏
前端使用navigator.mediaDevices.getUserMedia和window.MediaRecorder实现调用摄像头录制视屏一.navigator.mediaDevices.get ...
摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...
python打开摄像头获取图片_Python基于opencv调用摄像头获取个人图片的实现方法
接触图像领域的应该对于opencv都不会感到陌生,这个应该算是功能十分强劲的一个算法库了,当然了,使用起来也是很方便的,之前使用Windows7的时候出现多该库难以安装成功的情况,现在这个问题就不存在 ...
调用摄像头_摄像头 | 浏览器调用摄像头并实现截图保存的效果
为了在QT上实现打开摄像头,拍照等操作.就写了这个. 1. 写一个vue组件先写一个vue的组件,其内容基本如下: <el-button type="primary" @ ...
CV：基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array)
CV:基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array) 目录输出结果设计思路核 ...

react 调用摄像头

文章目录

react 调用摄像头方法

canvas 生成 dataurl

canvas 生成 blob

blob 生成 url

blob 生成 file

教程网站

react 调用摄像头相关推荐

最新文章

热门文章