record html

最新推荐文章于 2022-09-22 13:25:07 发布
最新推荐文章于 2022-09-22 13:25:07 发布
阅读量586 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42135156/article/details/80221553
版权 
<!DOCTYPE HTML> 
<html> 
<head runat="server">  
    <title></title>
<meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .booth {
            width:800px;
            background:#ccc;
            border: 10px solid #ddd;
            margin: 0 auto;
        }
        #result_video{
            width:400px;
            height:300px;
            margin:0 auto;
        }
        div#triangle  
        {  
            height: 0;  
            width: 0;  
            background-color: transparent;  
            border-bottom: 40px solid blue;  
            border-left: 15px solid transparent;  
            border-right: 15px solid transparent;  
            -webkit-transform: rotate(0deg);  
            position:absolute;
            top: 120px;
            left:215px; 
        }  
    </style>

<!--     <script type="text/javascript">

        var remaining_time = document.getElementById('remain');  
        var t = 6;  
        function changeTime(){  
            t--;  
            remaining_time.innerHTML=" "+t+" ";  
            if(t==0){  
                    window.location.href = 'http://www.jquerycn.cn';  
                    return;  
            }  
            setTimeout('changeTime()', 1000);  
        }  
        changeTime();  
    </script>   -->



</head>  
     <body>

     <div class="container">
         <div class="page-header">
             <h1>身份注册
                 <small>请尽量保持头部位于划定区域内</small>
             </h1>
         </div>
         <div class="row">
             <div class="col-xs-5">
                 <div width="400" height="300" style="position:relative">
                     <video id="video" width="100%" height="300"></video>

                     <img id="img2" src="border.png" style="position:absolute;top:0;left:50%;width:50%;height:100%;transform: translate(-50%,0);">
                 </div>
             </div>
             <div class="col-xs-2">
                     <button id='tack' class="col-xs-12">拍照</button>
             </div>
             <div class="col-xs-5">
                 <div>
                     <canvas id='canvas' width='400' height='300'></canvas>
                 </div>
             </div>
         </div>
         <hr>
         <div class="row">
             <div class="col-xs-3"></div>
             <div class="input-group col-xs-6">
                 <span class="input-group-addon">姓名</span>
                 <input type="text" class="form-control" placeholder="请输入姓名" id="name">
             </div>
             <div class="col-xs-3"></div>
         </div>
         <div class="row">
             <div class="col-xs-5"></div>
             <button id="submit_p1" οnclick="ssss()" class="col-xs-2">提交</button>
             <div class="col-xs-5"></div>
         </div>

     </div>
     <hr>


     <div class="container">
         <div class="page-header">
             <h1>视频校验<br>
                 <small>请尽量保持头部位于划定区域内<br></small>
                 <small>1) 点击开始录制，2) 在6秒时间内匀速读出如下四个随机数字,  3) 提交视频，如果成功自动刷新页面</small>
             </h1>
         </div>

        
        <div class="row"  align="middle">
            <script type="text/javascript"> 
                function getRandomNumber(){
                    var rand_num_str = (Math.random() * 10).toFixed(0)
                    return rand_num_str
                }

                var digitsArray = 
                        [[0, 2, 8, 9], [2, 4, 3, 8], [4, 0, 9, 2], [9, 6, 0, 3], [6, 8, 3, 4],
                        [6, 2, 5, 0],  [8, 9, 3, 6], [5, 4, 6, 2], [3, 2, 0, 4], [8, 5, 9, 3]]

                var digits_str_array = 
                    [ '0  2  8  9', '2  4  3  8', '4  0  9  2', '9  6  0  3', '6  8  3  4',
                      '6  2  5  0', '8  9  3  6', '5  4  6  2', '3  2  0  4', '8  5  9  3'   ]

                var digits_str_array_shrank = 
                    [ '0289', '2438', '4092', '9603', '6834', '6250', '8936', '5462', '3204', '8593' ]
    
                random_num = Math.floor(getRandomNumber())
                random_num_str = random_num.toString()
                random_text = digits_str_array[random_num] ;
                window.random_serial  = digits_str_array_shrank[random_num] ;

                document.write(random_text.fontsize(30))


            </script>
        </div>


         <div class="row">
             <div class="col-xs-2"></div>
             <button  class="col-xs-2" id="btn_start" οnclick="getVideo()">开始录制</button>
             <div class="col-xs-1"></div>


             <div class="col-xs-2"></div>

<!--              <button  class="col-xs-2" id="btn_end" οnclick="stopVideo()">结束录制</button>
             <div class="col-xs-1"></div>  -->
             <button  class="col-xs-2" id="submitt" οnclick="submitt()">提交视频</button>
             <div class="col-xs-2"></div>
         </div>


         <div class="row" style="text-align: center;">
              <span id='remain' style="font-size:40px" ></span> 
         </div>

         <div class="row">
             <div class="col-xs-5">
                 <div width="400" height="300" style="position:relative">
                     <video id="video2" width="100%" height="300"></video>
                     <!-- <div id = "triangle" class = "geom"></div>   -->

                     <img id="img3" src="border.png" style="position:absolute;top:0;left:50%;width:50%;height:100%;transform: translate(-50%,0);">
                 </div>
             </div>



             <div class="col-xs-5"></div>
             <div id="video_check" col-xs-5>
                 <video id="result_video" ></video>
             </div>
         </div>
     </div>


     <script>
         var video2 = document.getElementById('video2')
         var video = document.getElementById('video'),
                 canvas = document.getElementById('canvas'),
                 snap = document.getElementById('tack'),
                 img = document.getElementById('img'),
                 vendorUrl = window.URL || window.webkitURL;

         //媒体对象
         navigator.getMedia = navigator.getUserMedia ||
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia ||
                 navigator.msGetUserMedia;
         navigator.getMedia({
             video: true, //使用摄像头对象
             audio: false  //不适用音频
         }, function(strem){
             console.log(strem);
             video.src = vendorUrl.createObjectURL(strem);
             video.play();
             video2.src = vendorUrl.createObjectURL(strem);
             video2.play();
         }, function(error) {
             //error.code
             console.log(error);
         });
         snap.addEventListener('click', function(){

             //绘制canvas图形
             canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

             //把canvas图像转为img图片
             //img.src = canvas.toDataURL("image/png");
             console.log(canvas.toDataURL("image/png"));

         })
     </script>
     <script type="text/javascript">



         var MediaUtils = {
             /**
              * 获取用户媒体设备(处理兼容的问题)
              * @param videoEnable {boolean} - 是否启用摄像头
              * @param audioEnable {boolean} - 是否启用麦克风
              * @param callback {Function} - 处理回调
              */
             getUserMedia: function (videoEnable, audioEnable, callback) {
                 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
                         || navigator.msGetUserMedia || window.getUserMedia;
                 var constraints = {video: videoEnable, audio: audioEnable};
                 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                     navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                         callback(false, stream);
                     })['catch'](function(err) {
                         callback(err);
                     });
                 } else if (navigator.getUserMedia) {
                     navigator.getUserMedia(constraints, function (stream) {
                         callback(false, stream);
                     }, function (err) {
                         callback(err);
                     });
                 } else {
                     callback(new Error('Not support userMedia'));
                 }
             },

             /**
              * 关闭媒体流
              * @param stream {MediaStream} - 需要关闭的流
              */
             closeStream: function (stream) {
                 if (typeof stream.stop === 'function') {
                     stream.stop();
                 }
                 else {
                     var  trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

                     for (var i = 0; i < trackList.length; i++) {
                         var tracks = trackList[i];
                         if (tracks && tracks.length > 0) {
                             for (var j = 0; j < tracks.length; j++) {
                                 var track = tracks[j];
                                 if (typeof track.stop === 'function') {
                                     track.stop();
                                 }
                             }
                         }
                     }
                 }
             }
         };



         var recorder, mediaStream;

         // 用于存放录制后的音频文件对象和录制结束回调
         var recorderFile, stopRecordCallback;

         // 用于存放是否开启了视频录制
         var videoEnabled = false;

         // 录制短语音
         function startRecord(enableVideo) {
             videoEnabled = enableVideo;
             MediaUtils.getUserMedia(enableVideo, true, function (err, stream) {
                 if (err) {
                     throw err;
                 } else {
                     // 通过 MediaRecorder 记录获取到的媒体流
                     recorder = new MediaRecorder(stream);
                     console.log("创建"+recorder?"成功":"失败");
                     mediaStream = stream;
                     var chunks = [], startTime = 0;
                     recorder.ondataavailable = function(e) {
                         chunks.push(e.data);
                     };
                     recorder.onstop = function (e) {
                         recorderFile = new Blob(chunks, { 'type' : recorder.mimeType });
                         chunks = [];
                         if (null != stopRecordCallback) {
                             stopRecordCallback();
                         }
                     };
                     recorder.start();
                 }
             });
         }

         // 停止录制
         function stopRecord(callback) {
             stopRecordCallback = callback;
             // 终止录制器
             recorder.stop();
             // 关闭媒体流
             MediaUtils.closeStream(mediaStream);
         }

         // 播放录制的音频
         function playRecord() {
             var url = URL.createObjectURL(recorderFile);
             var dom = document.getElementById("result_video");
             dom.autoplay = true;
             dom.src = url;
         }


        function runCount(t){
          if(t>0){
            document.getElementById('remain').innerHTML = t;
            t--;
            setTimeout(function(){runCount(t);},1000);
          }else{
            document.getElementById("btn_start").disabled = true;
            document.getElementById('remain').innerHTML = '0';
          }
        }



         function getVideo(){
             runCount(6);
             var btn_start = document.getElementById("btn_start");
             var btn_end = document.getElementById("btn_end");

             btn_start.innerHTML="六秒自动结束";

             startRecord(true);
             setTimeout(function(){
             // 结束
                 stopRecord(function() {
             // 播放
                     alert(window.random_serial + "录制完成，可以提交验证");
                     
                     playRecord();
                 });
             }, 6000);
         };


         function stopVideo(){
             stopRecord(function() {
                 // 播放
                 alert("录制完成，可以提交验证");
                 playRecord();
             });
         }



         function submitt(){
             var name = document.getElementById("name").value;
             name = encodeURIComponent(name);

             var random_serial_numbers = window.random_serial
             random_serial_numbers = encodeURIComponent(name)

             var data = new FormData();

             data.append("image", recorderFile);

             var req = new XMLHttpRequest();
             req.onreadystatechange= function () {
                 if(req.status==200 && req.readyState==4){
                     console.log(req.responseText);
                     //alert(req.responseText);
                     alert('提交成功,刷新页面')
                     window.history.go(0)
                 }
             };
             req.open("POST", "file_upload_batch_video_web2?name="+name+'&serial='+window.random_serial,true);
             req.send(data);
         };

         var submit_p1 = document.getElementById("submit_p1");
         function ssss(){
             var name = document.getElementById("name").value;
             name = encodeURIComponent(name);
             console.log("出发");
             var xhr = new XMLHttpRequest();
             var fd = new FormData();

             var data = canvas.toDataURL("image/png");
             data=data.split(',')[1];
             data=window.atob(data);
             var ia = new Uint8Array(data.length);
             for (var i = 0; i < data.length; i++) {
                 ia[i] = data.charCodeAt(i);
             }
             console.log("出发2");
             var blob=new Blob([ia],{type:"image/png",endings:'transparent'});
             fd.append('image',blob,'image.png');
             var httprequest=new XMLHttpRequest();
             console.log("出发3");
             httprequest.open('POST','file_upload_pic_name_web2?name='+name,true);
             httprequest.send(fd);
             httprequest.onreadystatechange= function () {
                 if(httprequest.status==200 && httprequest.readyState==4){
                     console.log(httprequest.responseText);
                     if(httprequest.responseText==="end"){
                         alert("验证标准提交成功");
                     }
                 }
             };
         };

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

weixin_42135156
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Recorder.js 纯HTML5+JS网页录音
04-10
# recorder.js :microphone:基于HTML5的录音功能，输出格式为mp3文件。 ## 前言 完全依赖H5原生API 所涉及的API：`WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL` ## 兼容性 Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容) 其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持 请尝试使用FF、Edge、360等浏览器进行体验，或将项目下载到本地通过localhost的方式   ## 使用方式 ```js var recorder = new Recorder({ sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率) bitRate: 128, //比特率，默认为128kbps(标准MP3质量) success: function(){ //成功回调函数 }, error: function(msg){ //失败回调函数 }, fix: function(msg){ //不支持H5录音回调函数 } }); ``` ## API ```js //开始录音 recorder.start(); //停止录音 recorder.stop(); //获取MP3编码的Blob格式音频文件 recorder.getBlob(function(blob){ //获取成功回调函数，blob即为音频文件 // ... },function(msg){ //获取失败回调函数，msg为错误信息 // ... }); ```
html5家谱资源网,record.html
weixin_28748205的博客
05-31 179
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">记录首页新闻资讯家谱记录广场百家姓杨薇个人设置消息通知退出登录记录档案馆族谱动态| 热门记录 这一块的所有图片比例保持一致杨薇2313 ...
html5 record api,HTML5+ API Reference
weixin_39631755的博客
06-28 505
Audio模块用于提供音频的录制和播放功能，可调用系统的麦克风设备进行录音操作，也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。常量：方法：getRecorder: 获取当前设备的录音对象对象：回调方法：权限：5+功能模块(permissions){// ..."permissions":{// ..."Audio": {"description": "音频"}}}...
Record
weixin_30345055的博客
07-30 104
Recursive sequence矩阵快速幂 #include <bits/stdc++.h> #include<stdint.h> #define int long long #define scan(n) scanf("%lld", &(n)) #define scann(n, m) scanf("%lld%lld", &(n), &...
HTML5网页录音和压缩
热门推荐
Gabriel的专栏
05-11 4万+
转自：http://www.it165.net/design/html/201406/2651.html 宣传一下自己的qq群:5946699 (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以一起交流,共同进步 最近公司需要用到web
luxspace-record
05-25
"luxspace-record"项目似乎是一个基于HTML的网页记录或日志系统的基础模板，它为用户提供了无需深入配置就能快速开始创建和管理记录的便捷途径。这个项目可能包含了一系列的HTML文件和其他相关资源，如CSS样式表和...
Record_Learning
04-04
欢迎来到GitHub Pages 您可以使用的来维护和预览Markdown文件中网站的内容。 每当您提交到该存储库时，GitHub Pages都将运行从Markdown文件中的内容重建站点中的页面。降价促销Markdown是一种轻巧且易于使用的语法，...
Clients-Record
03-27
自述文件 项目-“客户记录”-项目是用于保存客户记录的业务应用程序。 内置Ruby on Rails 模型，视图，控制器（MVC）应用程序。 用户登录功能使用pgSearch进行搜索引导CSS Heroku-服务器PostgreSQL
video-record-demo_html5_DEMO_
10-02
"video-record-demo_html5_DEMO_"这个项目就是关于如何在HTML5环境下实现视频录制的一个示例。 首先，HTML5的MediaStream API允许访问用户的摄像头和麦克风。`<input type="file" capture>`元素或者`navigator....
RebateRecordEntry:回扣输入程序，提供一个干净的用户界面，用于添加，编辑，删除回扣记录并维护txt文件中的记录
05-05
RebateRecordEntry 回扣输入程序，提供一个干净的用户界面，用于添加，编辑，删除回扣记录并维护txt文件中的记录。
html5 record 录音实例 使用websocket
mengzhengjie的专栏
01-30 1271
http://www.jsjtt.com/webkaifa/html5/2013-08-28/34.html chrome 支持语言聊天 下面介绍一个chrome 的录音实例： Chat by Web Sockets
HTML标签大全
qq_46511838的博客
11-12 995
什么是 HTML 标签 HTML 文档和 HTML 元素是通过 HTML 标签进行标记的HTML 标签由开始标签和结束标签组成开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名某些 HTML 元素没有结束标签，比如 注释：开始标签的英文翻译是 start tag 或 opening tag，结束标签的英文翻译是 end tag 或 closing tag。 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(DTD)。 标签：a 说明：标明超链接的起始或目的
HTML5 Video
...
02-22 1248
自定义的HTML5视频控制,而不是使用默认控件 HTML5视频基本元素标记 Your browser does not support video 提示:由于ipad中有个bug,所以你必须要把MP4格式放在第一,视频才能在ipad中正常工作. 控制视频的播放和停止 $(function(){ var vid
list<record>根据某个属性去重_「Web前端开发进阶篇」CSS3 一些你不知道的高级属性...
weixin_39623671的博客
11-22 185
点击上方“Web前端进阶指南”关注我呦跟程序员小强一起学前端这一篇呢，我们来说说CSS3一些高级有趣的属性，帮助我们更好的，更高效的去开发我们的页面，不仅在效率上提高很多，而且页面效果上更炫酷，下面一起来看看吧。CSS3多列属性CSS3多列属性有很多，我们一一来介绍一下，包括以下几个属性：column-countcolumn-gapcolumn-rule-stylecolumn-rule-widt...
html的tr、td、th标签
weixin_33974433的博客
12-02 266
先看实例：<html> <body> <tableborder="1"> <tr> <th>Month</th> <th>Savings</th> <th>Name</th> </tr> <tr>...
excel多表合并
chiliu6883的博客
07-01 821
Sub 合并当前目录下所有工作簿的全部工作表() Dim MyPath, MyName, AWbName Dim Wb As Workbook, WbN As String Dim G As Long Dim Num As Long Dim BOX As String Application....
python xlrd读取文件报错_Python使用xlrd读Excel文件时报错
weixin_39989190的博客
11-28 2016
问题描述原始脚本报错信息XLRDError: Unsupported format, or corrupt file: Expected BOF record; found '\xef\xbb\xbf原因分析从这个错误提示看，不像是脚本问题，而是Excel文件本身的格式错误导致的。提示的意思就是期望的是BOF开头记录，但是读到的是'\xef\xbb\xbf果真，以右键文本方式打开该文件，内容全是标...
TypeScript 之 Record
包磊磊的博客
09-22 1393
在 TS 中，类似数组、字符串、数组、接口这些常见的类型都非常常见，但是如果要定义一个对象的 key 和 value 类型该怎么做呢？这时候就需要用到 TS 的 Record 了。很好理解，Record 后面的泛型就是对象键和值的类型。好吧，其实很简单。但是之前我真的不知道这个属性，都是这么写的[捂脸]。
cannot render error page for request [/record/templateslist.html] and except
最新发布
09-08
无法为请求[/record/templateslist.html]和异常渲染错误页面。 这个错误通常发生在网站后端处理请求时出现了问题，并且无法找到合适的模板来渲染所需的页面。可能的原因包括以下几种情况： 1. 模板文件缺失：服务器无法在指定的路径中找到名为templateslist.html的模板文件。可能这个文件被删除或者移动到了其他位置，或者根本就没有这个文件。 2. 模板文件错误：即使找到了模板文件，但它的内容或格式有问题，导致服务器无法正确地解析和渲染页面。这可能是由于编码错误、语法错误或者模板引擎版本不匹配等问题导致的。 3. 权限问题：模板文件所在的目录可能设置了权限限制，使得服务器无法访问或读取该目录中的文件。这种情况通常是由于文件或目录的所有者或权限设置不正确导致的。 为解决这个问题，你可以采取以下几个步骤： 1. 检查模板文件路径：确保路径和文件名正确，文件是否存在于指定的目录中。 2. 检查模板文件内容：打开模板文件并检查其内容，确保文件没有语法错误或其他问题。如果需要，可以与其他正确的模板文件进行对比以找出错误。 3. 检查文件权限：确保模板文件的所在目录的权限设置正确，让服务器能够访问和读取该目录中的文件。 如果以上方法都无法解决问题，你可以尝试重新安装或更新相关的模板引擎或框架，以确保其与程序的其他部分兼容。如果问题仍然存在，可能需要咨询开发人员或相关技术支持团队以获取更多帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值