MediaRecoder 人脸录制

最新推荐文章于 2023-12-14 19:38:47 发布
最新推荐文章于 2023-12-14 19:38:47 发布
阅读量509 收藏
点赞数 1
分类专栏： 编码示例 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_tian/article/details/104412369
版权

最近研究通过h5+的API录制视频用作人脸识别，编写了一个demo，附上源码，分享一下。

<!DOCTYPE html>
<!-- saved from url=(0075)https://wendychengc.github.io/media-recorder-video-canvas/cameracanvas.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>MediaRecorder使用示例</title>
<style>
canvas {
    box-shadow: 0 0 10px gray;
    display: block;
}
.rect-box{
  width: 460px;
  height: 460px;
  /*border: 1px solid #ccc;*/
  box-sizing: border-box;
  position: relative;
}
.rect{
  width: 230px;
  height: 460px;
  box-sizing: border-box;
  position: absolute;
  overflow:hidden;
  top: 0;
}
.left{
  left: 0;
}
.right{
  right: 0;
}
.rect > div{
  width: 460px;   
  height: 460px;   
  border:20px solid transparent;   
  border-radius: 50%;   
  box-sizing: border-box;
  position: absolute;   
  top:0;  
  z-index: 3;
  transform: rotate(45deg);
}
.right .circle{   
  border-top:20px solid #999;   
  border-right:20px solid #999;  
  border-left:20px solid rgb(81, 197, 81);   
  border-bottom:20px solid rgb(81, 197, 81);    
  right:0;   
  -webkit-animation: right 12s linear 1;   
}   
.left .circle{   
   border-bottom:20px solid #999;   
   border-left:20px solid #999;      
   left:0;   
  -webkit-animation: left 12s linear 1;  
}   
@-webkit-keyframes right{   
  0%{   
    border-left:20px solid rgb(182, 239, 182);
    border-bottom:20px solid rgb(182, 239, 182);
    -webkit-transform: rotate(45deg);   
  }   
  50%{   
   
    border-left:20px solid rgb(81, 197, 81);   
    border-bottom:20px solid rgb(81, 197, 81);   
    -webkit-transform: rotate(45deg);   
  }   
  84%{   
    border-left:20px solid green;   
    border-bottom:20px solid green;   
    -webkit-transform: rotate(225deg);   
  }
  100%{   
    border-left:20px solid green;   
    border-bottom:20px solid green;   
    -webkit-transform: rotate(225deg);   
  }  
}   
@-webkit-keyframes left{   
  0%{   
    border-top:20px solid rgb(81, 197, 81);   
    border-right:20px solid rgb(81, 197, 81);  
    -webkit-transform: rotate(45deg);   
  }  
  16%{   
    border-top:20px solid rgb(81, 197, 81);   
    border-right:20px solid rgb(81, 197, 81);  
    -webkit-transform: rotate(45deg);   
  }   
  50%{   
         
    border-top:20px solid rgb(81, 197, 81);   
    border-right:20px solid rgb(81, 197, 81);   
    -webkit-transform: rotate(225deg);   
  }   
  100%{   
    border-top:20px solid green;   
    border-right:20px solid green;   
    -webkit-transform: rotate(225deg);   
  }   
}
.tip{
   font-size: 60px;
   min-height: 300px;
   display: flex;
   align-items: center;
   justify-content: center; 
}
.face-box{
   text-align: center; 
   margin:10px auto;
   border-radius: 50%;
   height:460px; 
   width:460px; 
   overflow:hidden; 
   position:relative 
}
</style></head>
<body>
    <div style="text-align: center;">
        <div class="tip" id="tip"></div>
        <div class="face-box">
            <div class="rect-box">
                <div class="rect left">
                  <div class="circle"></div>  
                </div>
                <div class="rect right">
                  <div class="circle"></div>  
            </div>
            <canvas id="canvas" height="460" width="460" style="margin:auto;"></canvas>
            <video src="" id="srcvideo" style="display:none;"></video>
        </div>
    </div>
<script>
    var allChunks = [];
    if(navigator.mediaDevices){
        init();
    }else{
        alert("请使用其他方式验证")
    }
    
    function init() {
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        navigator.mediaDevices.getUserMedia({
            video: true
        })
        .then(function(mediaStream) {
            var srcvideo = document.getElementById("srcvideo")
            srcvideo.srcObject = mediaStream;
            srcvideo.play()
            playCanvas(srcvideo, ctx)
        })
        setFormatSelect('video/webm;codecs=h264')
    }

    function playCanvas(srcvideo, ctx) {
        ctx.drawImage(srcvideo, 0, 0, 460, 460)
        requestAnimationFrame(() => {
            playCanvas(srcvideo, ctx)
        })
    }

    function setFormatSelect(format){
        if(!MediaRecorder.isTypeSupported(format)){
            alert(format)
            alert("当前浏览器不支持该编码类型");
            return;
        }
        allChunks = [];
        setRecorder(format)
    }
    function blobToBase64(blob){
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader()
            fileReader.onload = (e) => {
                resolve(e.target.result)
            }
            fileReader.readAsDataURL(blob)
            fileReader.onerror = () => {
                reject(new Error('blobToBase64 error'))
            }
        })
    }
    function setRecorder(format) {
        const stream = canvas.captureStream(40); // 60 FPS recording
        const recorder = new MediaRecorder(stream, {
            mimeType: format
        });
        recorder.ondataavailable = e => {
            allChunks.push(
                e.data
            );
        }
        recorder.start(10)
       tip.innerHTML="请将人脸放进方框内"
       setTimeout(function(){
            tip.innerHTML="开始录制..."
        },2000)
        setTimeout(function(){
            
            tip.innerHTML="笑一笑"
        },4000)
        setTimeout(function(){
            tip.innerHTML="眨一眨眼"
        },7000)
        setTimeout(function(){
            recorder.stop()
            tip.innerHTML="录制结束，正在验证..."
        },10000)
        setTimeout(function(){
            const fullBlob = new Blob(allChunks)
            blobToBase64(fullBlob).then((res) => {
                console.log('base64', res)
            })
        },12000)

    }
</script>
</body></html>

W_Tian
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
mediarecoder 安卓_Android 录音实现--MediaRecorder
weixin_30577815的博客
12-23 276
前言Android系统在实现录音以及录像的功能均是通过使用MediaRecorder实现的。本篇文章主要介绍如何借助MediaRecorder实现后台录音功能。MediaRecoderMediaRecoder主要方法介绍void prepar():准备录制void start():开始录制void stop():停止录制void reset():重置MediaRecordervoid releas...
MediaRecorder
itheimach的专栏
11-05 448
MediaRecorderUsed to record audio and video.用来音视频的录制与播放，状态图如下：A common case of using MediaRecorder to record audio works as follows，使用流程如下： // initial MediaRecorder recorder = new MediaRecorder(); //
视频录制（MediaRecorder）
snpmyn
08-18 1189
简介 参考
使用MediaRecoder录制视频
孤云博客
07-14 2881
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) MediaRecoder除了用于录制音频之外，还可用于录制视频，其步骤与录制音频基本相同，只是录制视频不仅要采集声音，还要采集图像，需要使用SurfaceView来预览显示图像，下面用一个简单示例来演示，代码如下：...
MediaRecorder视频录制
12-14
视频录制，后台视频录制源码，在AndroidStudio 下运行
人脸检测与识别
03-16
人脸检测与识别是计算机视觉领域中的重要技术，它主要涉及两个关键步骤：人脸检测和人脸识别。在本项目中，我们使用的环境是OpenCV 2.4.6.0，这是一种强大的开源计算机视觉库，提供了丰富的图像处理和机器学习功能。...
PCA人脸识别matlab代码
11-06
在人脸识别领域，PCA通过提取面部图像的主要特征，可以有效地减少数据的维度，同时保留最重要的信息，从而实现高效的人脸识别。以下是对PCA人脸识别及其在MATLAB中的实现进行的详细解释。 一、PCA的基本原理 PCA的...
python 人脸识别系统
03-12
自制的人脸识别系统，引用对应的模块，直接使用
人脸识别DEMO
08-23
在IT领域，人脸识别技术是一种基于人的面部特征信息进行身份识别的生物识别技术。这个"人脸识别DEMO"显然是一个示例程序，旨在帮助开发者理解和学习如何实现实时的人脸检测、识别以及比对功能。让我们深入探讨一下这...
人脸识别matlab代码
12-03
在本文中，我们将深入探讨基于MATLAB的人脸识别技术，这是一种广泛应用的计算机视觉领域的方法。MATLAB作为一种强大的数值计算和编程环境，非常适合进行图像处理和机器学习任务，包括人脸识别。 人脸识别的基本步骤...
MediaRecorder简介
weixin_43205520的博客
03-30 2537
1.Android系统实现录音功能 MediaRecorder初始化 private MediaRecorder mMediaRecorder; mMediaRecorder = new MediaRecorder(); MediaRecorder主要方法 void prepar():准备录制 void start():开始录制 void stop():停止录制 void reset():重置 void release():释放资源 void setAudioEncoder(int)：设置音频记录的
MediaRecorder 介绍和使用，结合Camera2录制视频实例（含完整项目）
阿飞的博客
12-14 3165
在中通过设定的宽高去修改view的宽高。@Override} else {} else {可以将相机的一些基础操作和实现都封装起来，并在CameraSurfaceView中完成相关操作。完整文件地址：// 封装相机的各种操作// 设置屏幕常亮@Override@Override// 将View的大小修改为和相机预览分辨率相同的比例@Override。
[Android][MediaRecorder] Android MediaRecorder框架简洁梳理
TaylorPotter的博客
03-15 5900
(Base on Android Q) 主要是为了梳理MediaRecorder模块代码,熟悉流程 本文的简化图由draw.io绘制,详细时序图由plantUml绘制 绘制原材料在百度云盘中 链接: https://pan.baidu.com/s/1IJ7Qo2Jl3o6GthPtAiD95Q 提取码: qu4w ,可以自行down下来修改添加 一.MediaRecorder整体架构 主要简单梳理...
关于人脸识别的视频图片处理
weixin_30559481的博客
07-23 678
这篇随笔记录一下最近做人脸识别遇到过的一些问题的解决办法，方便加强印象。以双目摄像头为例。 首先是封装： 视频处理在主窗体下操作比较简单，但是如果是将视频处理过程封装起来，就稍微有些麻烦了，会引起线程安全的问题。 首先将视频控件的对象或者是句柄传到接口里，然后对该对象进行操作。 1 private AForge.Controls.VideoSourcePlayer...
（人脸识别）在视频中截取图片js+html
weixin_45801225的博客
07-20 849
（人脸识别）在视频中截取图片 html代码： // //video录制视频 // //绘制一张canvas画布 //video录制视频 调通视频： var video = document.querySelector(“video”); //const streamVideo = document.querySelector(".stream"); //const playVideo = document.querySelector(".play"); navigator.mediaDevices.ge
基于 Web 端的人脸识别身份验证
LuckyWinty的博客
06-16 4176
效果展示人脸识别效果图前言近些年来，随着生物识别技术的逐渐成熟，基于深度学习的人脸识别技术取得了突破性进展，准确率显著提高。现阶段，人脸识别身份验证作为非常重要的身份验证方式，已被广泛的...
【face-api.js】前端实现，人脸捕获、表情识别、年龄性别识别、人脸比对、视频人脸追踪、摄像头人物识别
weixin_44240581的博客
07-27 5868
face-api.js，实现人脸捕获、人脸识别、表情识别、年龄性别识别、视频人脸追踪、摄像头人物识别
技术分享：人脸识别究竟是如何完成的？
TSINGSEE青犀视频官方技术博客
11-05 869
随着人工智能的高速发展，基于计算机视觉技术研究及应用也逐渐进入成熟阶段。其中，人脸识别是运用较多的一种技术，已经渗透到人类日常生活的方方面面。目前TSINGSEE青犀视频也正在积极研发人脸识别项目，将人脸识别技术融入到相关视频平台（如EasyCVR视频融合云服务），并投入到线下场景落地使用。 本文将和大家简单分享一下：人脸识别究竟是如何完成的？它的流程是什么？ 一、人脸识别系统的组成 前端图像采集 前端人脸图像采集系统通过抓拍采集人脸图像、实时视频流等，如视频监控摄像头、智能考勤机、智能门禁
毕业设计-人脸识别系统设计
最新发布
01-19
"本文档是广西工学院计算机工程系2005届毕业生张薇关于人脸识别系统的毕业设计论文。本文探讨了人脸识别技术的理论基础、研究意义、挑战与应用现状，以及其实现方法。" 人脸识别系统是一种基于生物统计学的识别技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

W_Tian

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值