【實例簡介】該示例必須在 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")

}

總結

以上是生活随笔為你收集整理的html5视频页面的源码,html5 网页录制视频示例源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。