最近做項目，遇到一個需求需要使用MediaReCorder api對直播流視頻進行錄制。
MediaRecorder使用語法new MediaRecorder(stream,options);
stream
MediaStream 將要錄制的流. 它可以是來自于使用 navigator.mediaDevices.getUserMedia() 創(chuàng)建的流或者來自于 <audio>, <video> 以及 <canvas> DOM元素.
options 可選
-
mimeType: 為新構(gòu)建的MediaRecorder指定錄制容器的MIME類型. 在應(yīng)用中通過調(diào)用MediaRecorder.isTypeSupported()來檢查瀏覽器是否支持此種mimeType. -
audioBitsPerSecond: 指定音頻的比特率. -
videoBitsPerSecond: 指定視頻的比特率. -
bitsPerSecond: 指定音頻和視頻的比特率. 此屬性可以用來指定上面兩個屬性. 如果上面兩個屬性只有其中之一和此屬性被指定, 則此屬性可以用于設(shè)定另外一個屬性.
示例一：通過攝像頭錄制（navigator.mediaDevices.getUserMedia目前支持的url:localhost韧衣、file、https购桑，http下navigator.mediaDevices.getUserMedia為undefined）
啟動錄制或停止:
recorder.start();//開始錄制
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è)置很重要畅铭，我在開發(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();//開始錄制
});
recorder.stop();//錄制結(jié)束
示例二：video錄制
//captureStream該方法用于獲取媒體流勃蜘，有兩個對象實現(xiàn)了這個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);//
}
最后，錄制完成通過recorder.ondataavailable事件的e.data就是接受到的媒體
//通過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'谍失，黑屏問題解決
