【实例简介】该示例必须在 https环境下运行，否则会遇到意想不到的问题

【实例截图】

【核心代码】

MeidaRecorder

*{

box-sizing: border-box;

margin: 0;

padding: 0;

font-family:monospace;

}

html,body{

height: 100%;

}

html{

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-ms-touch-action: pan-y;

background: #fff;

}

body{

margin: 0;

font-family: Arial,微软雅黑,黑体;

word-break: break-word;

color: #000;

position: relative;

}

h1,h2,h3,h4,h5,p{

margin: 0;

}

pre{

padding: 24px 28px;

}

a{

cursor: pointer;

text-decoration: none;

color: $main-blue;

outline: none !important;

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

input, textarea{

outline: none !important;

-webkit-appearance: none;

border: 1px solid #ddd;

background: #fcfcfc;

color: #777;

&:focus{

border-color: #cfcfcf;

background: #fff;

color: #444;

}

&[readonly]{

border-color: #e0e0e0;

background: red;

color: #bbb;

}

}

input{

word-break: break-all;

}

label{

vertical-align: middle;

}

ul{

list-style: none;

margin: 0;

padding: 0;

}

hr{

margin: 0 auto;

border: none;

}

img{

border: none;

}

@media (max-width: 700px){

body:after{

content:"您的屏幕太小了";

position: absolute;

width: 100%;

text-align: center;

top: 20%;

font-size: 40px;

}

#app-main{

display: none;

}

}

录音设备:

录影设备:

视频宽　:

视频高　:

帧　率　:

开始预览

开始录制

停止录制

navigator.mediaDevices.enumerateDevices().then(function (data) {

data.forEach(function (item,index) {

if(item.kind=="audioinput"){

document.getElementById("audioDevice").innerHTML = "" (item.label||"设备" index) " "

}else if(item.kind=="videoinput"){

$("#videoDevice").append("" (item.label||"设备" index) " ")

}

})

console.log(data);

// body...

},function (error) {

alert("获取失败" error);

console.log(error);

})

var getUserMedia = navigator.webkitGetUserMedia;

var g_stream = null,g_recorder = null ;chunks = [];

function startPreview(){

getUserMedia.call(navigator, {

// "audio":true,

// "video":true

"audio":{"mandatory":{"sourceId":$("#audioDevice").val()}},

"video":{

"optional":[

{"minWidth":parseInt($("#videoWidth").val())},{"maxWidth":parseInt($("#videoWidth").val())},

{"minHeight":parseInt($("#videoHeight").val()) },{"maxHeight":parseInt($("#videoHeight").val())},

{"frameRate":parseInt($("#videoFrame").val()) }

],"mandatory":{

"sourceId":$("#videoDevice").val()

}

}

}, function(stream){

g_stream = stream;

//绑定本地媒体流到video标签用于输出

document.getElementById("video").src = URL.createObjectURL(stream);

$("#startPreview").attr("disabled","disabled");

$("#startRecording").removeAttr("disabled")

//向PeerConnection中加入需要发送的流

}, function(error){

//处理媒体流创建失败错误

});

}

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 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 = [];

}

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) {

var blob = new Blob(chunks, { 'type' : 'video/webm' });

var audioURL = URL.createObjectURL(blob);

saveFile(audioURL,"我的自拍.webm");

}

g_recorder.start();

$("#startRecording").attr("disabled","disabled");

$("#stopRecording").removeAttr("disabled")

}