HTML代码
<!DOCTYPE html><html lang="zh-CN"><head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta charset="UTF-8">
<title>MeidaRecorder</title>
<script src="jquery-3.2.1.js"></script>
<head>
</head>
<body>
<div style="display:none">
<div >
<label for="audioDevice"> 录音设备: </label>
<select id="audioDevice"></select>
<br>
<label for="videoDevice"> 录影设备: </label>
<select id="videoDevice">
</select>
<br>
</div>
<button id="startPreview" onclick="startPreview()">开启摄像头</button>
<button id="startRecording" onclick="startRecording()">开始录制</button>
<button id="stopRecording" onclick="stopRecording()">停止录制</button>
<button onclick="reRecording()">重新录制</button>
<br>
</div>
<video height="320px" id="video" autoplay="autoplay">
您的浏览器不支持Video
</video>
<audio id="music" >
<source src="REC007.mp3" type="audio/mp3">
</audio>
<script type="text/javascript" src="camera.js">
</script>
</body>
</html>
JS代码
var explorer =navigator.userAgent ;
var audio=document.getElementById('music');
//ie
if (explorer.indexOf("MSIE") >= 0) {
alert("您的浏览器不支持录像功能");
}
//firefox
else if (explorer.indexOf("Firefox")>= 0) {
alert("即将开始录像请做好准备.....");
audio.play();
}
//Chrome
else if(explorer.indexOf("Chrome")>= 0){
alert("即将开始录像请做好准备.....");
audio.play();
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("您的浏览器不支持录像功能");
}
//Netscape
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
navigator.mediaDevices.enumerateDevices().then(function (data) {
data.forEach(function (item,index) {
if(item.kind=="audioinput"){
document.getElementById("audioDevice").innerHTML += "<option value='"+ item.deviceId +"'>" + (item.label||"设备"+index) + " </option> "
}else if(item.kind=="videoinput"){
$("#videoDevice").append("<option value='"+ item.deviceId +"'>" + (item.label||"设备"+index) + " </option> ")
}
})
console.log(data);
// body...
},function (error) {
alert("获取失败" + error);
console.log(error);
});
var g_stream = null,g_recorder = null ;chunks = [];
var video=document.getElementById('video');
function startPreview(){
navigator.mediaDevices.getUserMedia({
audio: true, video: { width: 1280, height: 720 }
}).then(function(stream) {
g_stream = stream;
//绑定本地媒体流到video标签用于输出
video.src = URL.createObjectURL(stream);
//向PeerConnection中加入需要发送的流
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
}
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
}
var saveFile = function(url, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename;
var event=document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
function startRecording(){
g_recorder = new MediaRecorder(g_stream,{ mimeType:'video/webm' });
g_recorder.ondataavailable = function(e) {
chunks.push(e.data);
}
g_recorder.onstop = function(e) {
//使用formdata
var oMyForm = new FormData();
oMyForm.append("phone",'17858952135'); // 数字123456被立即转换成字符串"123456"
oMyForm.append("type",'web');
var oBlob = new Blob(chunks, { 'type' : 'video/webm' });
var audioURL = URL.createObjectURL(oBlob);
oMyForm.append("video", oBlob);
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert('发送成功!!!');
}
}
// xmlhttp.open("HEAD", "Access-Control-Allow-Origin");
xmlhttp.open("POST", "https://kaihu.yqjrgroup.com/index.php?r=openAccount/uploadVideo",true);
xmlhttp.send(oMyForm);
}
g_recorder.start();
$("#startRecording").attr("disabled","disabled");
$("#stopRecording").removeAttr("disabled")
}
function stopRecording(){
g_recorder.stop();
var blob = new Blob(chunks, { 'type' : 'video/webm' });
var audioURL = URL.createObjectURL(blob);
// window.open(audioURL);
$("#stopRecording").attr("disabled","disabled");
$("#startRecording").removeAttr("disabled");
chunks = [];
}
//自动触发录制并上传
$(document).ready(function(){
if(audio.play()){
setTimeout(function(){
startPreview();
setTimeout(function(){
startRecording();
setTimeout(function(){
stopRecording();
},10000);
},5000);
},30);
}
});