最近做項(xiàng)目，遇到一個(gè)需求需要使用MediaReCorder api對(duì)直播流視頻進(jìn)行錄制。
MediaRecorder使用語(yǔ)法new MediaRecorder(stream,options);
stream
MediaStream 將要錄制的流. 它可以是來(lái)自于使用 navigator.mediaDevices.getUserMedia() 創(chuàng)建的流或者來(lái)自于 <audio>, <video> 以及 <canvas> DOM元素.
options 可選
-
mimeType: 為新構(gòu)建的MediaRecorder指定錄制容器的MIME類(lèi)型. 在應(yīng)用中通過(guò)調(diào)用MediaRecorder.isTypeSupported()來(lái)檢查瀏覽器是否支持此種mimeType. -
audioBitsPerSecond: 指定音頻的比特率. -
videoBitsPerSecond: 指定視頻的比特率. -
bitsPerSecond: 指定音頻和視頻的比特率. 此屬性可以用來(lái)指定上面兩個(gè)屬性. 如果上面兩個(gè)屬性只有其中之一和此屬性被指定, 則此屬性可以用于設(shè)定另外一個(gè)屬性.
示例一：通過(guò)攝像頭錄制（navigator.mediaDevices.getUserMedia目前支持的url:localhost、file、https，http下navigator.mediaDevices.getUserMedia為undefined）
啟動(dòng)錄制或停止:
recorder.start();//開(kāi)始錄制
recorder.stop();//錄制結(jié)束
navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
.then((stream) => {
const options = {mimeType:'video/webm;codecs=vp8,opus'};//mimeType設(shè)置很重要，我在開(kāi)發(fā)遇到錄制視頻完成后播放黑屏和mineType設(shè)置有關(guān)系
recorder = new MediaRecorder(stream，options);
videoTarget.srcObject = stream;
videoTarget = (...arg) => {
console.log(arg);
}
recorder.ondataavailable = (event) => {
let url = URL.createObjectURL(event.data);
let link = document.createElement("a");
link.href = url;
link.click();
}
recorder.start();//開(kāi)始錄制
});
recorder.stop();//錄制結(jié)束
示例二：video錄制
//captureStream該方法用于獲取媒體流，有兩個(gè)對(duì)象實(shí)現(xiàn)了這個(gè)API，分別是HTMLMediaElement和HTMLCanvasElement
const stream = video.captureStream?video.captureStream():video.mozCaptureStream();//瀏覽器兼容處理
const options = {mimeType:'video/webm;codecs=vp8,opus'};
recorder = new MediaRecorder(stream);
recorder.ondataavailable =function(e){
allchunks.push(e.data);
}
示例三：canvas錄制
video//視頻播放video
video.oncanplay = function(){
width=this.videoWidth;
height=this.videoHeight;
}
const canvas=document.createElement('canvas');
canvas.width = width;
canvas.height= height;
const ctx = canvas.getContext('2d');
const options = {mimeType:'video/webm;codecs=vp8,opus'};
const stream = canvas.captureStream?canvas.captureStream():canvas.mozCaptureStream();//瀏覽器兼容處理
recorder = new MediaRecorder(stream);
recorder.ondataavailable =function(e){
allchunks.push(e.data);
}
function dramImage(){
ctx.drawImage(video,0,0,width,height);
requestAnimationFrame(dramImage);//
}
最后，錄制完成通過(guò)recorder.ondataavailable事件的e.data就是接受到的媒體
//通過(guò)a標(biāo)簽下載到本地
const tmpBlob = new Blob(allchunks);
videoUrl = window.URL.createObjectURL(tmpBlob);
const a=document.createElement('a');
a.href = videoUrl;
a.download = 'media'+new Date().getTime();
a.click();
chrome瀏覽器錄制黑屏，但是有聲音；現(xiàn)在發(fā)現(xiàn)主要是mimeType的設(shè)置造成的。將mimeType設(shè)置成'video/webm;codecs=vp8,opus'，黑屏問(wèn)題解決
