最近碰到一个需求，需要在web中采集人脸和录音。没有摄像头麦克风的话可以用手机代替测试，网上搜DroidCam，检查是否连上摄像头和麦克风，可以在qq设置里试一下
1、人脸采集，js调用摄像头并且拍照，打开页面时要选择允许
效果：
代码：只有一个html
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>人脸采集</title>
<style>
.booth {
width:400px;
background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
<button id='tack'>拍照</button>
<canvas id='canvas' width='400' height='300' style="display:none"></canvas>
<img id='img' src=''>
<a id='down' href="#">下载</a>
</div>
<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
down = document.getElementById('down'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;
//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
//这个方法要报错：video.src = window.URL.createObjectURL(strem);
video.srcObject = strem;
video.onloadedmetadata = function(e) {
video.play();
};
}, function(error) {
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");
down.setAttribute("href", img.src);
down.setAttribute("download", "拍照.png")
})
</script>
</body>
</html>2、录音，使用recorder.js实现，需要运行在服务器上
效果：
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>recorder.js</title>
<style>
audio { display: block; margin-bottom: 10px; }
#audio-container { padding: 20px 0; }
.ui-btn { display: inline-block; padding: 5px 20px; font-size: 14px; line-height: 1.428571429; box-sizing:content-box; text-align: center; border: 1px solid #e8e8e8; border-radius: 3px; color: #555; background-color: #fff; border-color: #e8e8e8; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.ui-btn:hover, .ui-btn.hover { color: #333; text-decoration: none; background-color: #f8f8f8; border:1px solid #ddd; }
.ui-btn:focus, .ui-btn:active { color: #333; outline: 0; }
.ui-btn.disabled, .ui-btn.disabled:hover, .ui-btn.disabled:active, .ui-btn[disabled], .ui-btn[disabled]:hover, .ui-state-disabled .ui-btn { cursor: not-allowed; background-color: #eee; border-color: #eee; color: #aaa; }
.ui-btn-primary { color: #fff; background-color: #39b54a; border-color: #39b54a; }
.ui-btn-primary:hover, .ui-btn-primary.hover { color: #fff; background-color: #16a329; border-color: #16a329; }
.ui-btn-primary:focus, .ui-btn-primary:active { color: #fff; }
.ui-btn-primary.disabled:focus{ color: #aaa; }
</style>
<script src="js/lib.min.js"></script>
</head>
<body>
<h1>recorder.js</h1>
<h2>HTML5录音解决方案</h2>
<p>由于Chrome47以上以及QQ浏览器需要HTTPS的支持，所以烦请更换至360、FF、Edge进行体验，或下载项目至本地通过localhost访问。</p>
<p>另：IE和Safari全版本不支持录音功能</p>
<div id="js_recording" style="display: none;"><img src="images/recording.gif"></div>
<div id="js_record_time"></div>
<div id="audio-container"></div>
<button id="start" class="ui-btn ui-btn-primary" disabled>录音</button>
<button id="stop" class="ui-btn ui-btn-primary" disabled>停止</button>
<script src="js/recorder.js"></script>
<script>
var timer;
window.onload = function(){
var start = document.querySelector('#start');
var stop = document.querySelector('#stop');
var container = document.querySelector('#audio-container');
var recorder = new Recorder({
sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率)
bitRate: 128, //比特率，默认为128kbps(标准MP3质量)
success: function(){ //成功回调函数
start.disabled = false;
},
error: function(msg){ //失败回调函数
alert(msg);
},
fix: function(msg){ //不支持H5录音回调函数
alert(msg);
}
});
//开始录音
//recorder.start();
//停止录音
//recorder.stop();
//获取MP3编码的Blob格式音频文件
/* recorder.getBlob(function(blob){ //获取成功回调函数，blob即为音频文件
var formData = new FormData();
formData.append('assetID', 1);
formData.append('file', blob);
$.ajax({
type: 'POST'
, url: 'MyUploadAudioMethod.php'
, data: formData
, processData: false
, contentType: false
, dataType: 'json'
, cache: false
, success: function (json)
{
alert(json);
}
, error: function (jqXHR, textStatus, errorThrown)
{
alert('Error! '+ textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
// handle audio upload failure
}
});
},function(msg){ //获取失败回调函数，msg为错误信息
alert(msg);
});*/
//getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
start.addEventListener('click',function(){
this.disabled = true;
stop.disabled = false;
var audio = document.querySelectorAll('audio');
for(var i = 0; i < audio.length; i++){
if(!audio[i].paused){
audio[i].pause();
}
}
$('#js_recording').show();
//开始录音时计时器开始计时
var duration = 0;
//clearInterval(timer);//清除录音计时器
timer = setInterval(function(){
duration++;
$('#js_record_time').html(duration);
},1000);
recorder.start();
});
stop.addEventListener('click',function(){
$('#js_recording').hide();
clearInterval(timer);//清除录音计时器
this.disabled = true;
start.disabled = false;
recorder.stop();
recorder.getBlob(function(blob){
var audio = document.createElement('audio');
audio.src = URL.createObjectURL(blob);
audio.controls = true;
container.appendChild(audio);
//停止播放，保存文件---{{
var formData = new FormData();
formData.append('assetID', 1);
formData.append('audioData',blob, 'audioData.mp3');
/**提交保存录音
$.ajax({
type: 'POST'
, url: 'MyUploadAudioMethod.php'
, data: formData
, processData: false
, contentType: false
, dataType: 'json'
, cache: false
, success: function (json)
{
var obj=JSON.parse(json);
if(obj.code!=0){
alert(obj.message);
}
}
, error: function (jqXHR, textStatus, errorThrown)
{
alert('Error! '+ textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
// handle audio upload failure
}
});
*/
//停止播放，保存文件--end-}}
});
});
};
</script>
</body>
</html>
1084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
