音視頻混流
之前講過一篇如何通過攝像頭獲取音視頻流並導出的文章。這次要講的是如何將多個音視頻流混合後導出。
主要用的API有：
- MediaRecorder(提供的用來進行媒體輕鬆錄製的接口)
- getUserMedia(捕獲攝像頭、麥克音視頻流)
- getAudioTracks（從stream流中獲取音頻流集合）
- addTrack（往stream流中增加媒體流）
- AudioContext（AudioContext對象，可對音頻進行處理）
- createBufferSource（該接口是一個音頻源，它由存儲在一個存儲器中的內存中音頻數據組成）
- createMediaStreamDestination（創建一個媒體流的節點）
- decodeAudioData（可用於異步解碼音頻文件中的 ArrayBuffer）
1、創建一個BGM音頻流
- 用的到接口：AudioContext、createBufferSource、createMediaStreamDestination、decodeAudioData
// 創建AudioContext實例
var audioCtx = new AudioContext()
// 創建一個音頻源
var source = audioCtx.createBufferSource()
// 創建一個媒體流節點
var track = audioCtx.createMediaStreamDestination()ok，到這裏爲止，我們BGM的關鍵對象都齊全了，不過這些只有容器，沒有最重要的內容。剛剛我們說了decodeAudioData這個api，這個api可以將數據解碼音頻中的ArrayBuffer。
// 獲取BGM的文件的arraybuffer
var request = new XMLHttpRequest();
request.open('GET', './music/test.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
// 這裏我們通過ajax請求將文件轉arraybuffer格式
var audioData = request.response;
audioCtx.decodeAudioData(audioData, function(buffer) {
// 這裏的buffer就是解碼過的arraybuffer
// 將buffer加入音頻源裏
source.buffer = buffer
// 將音頻輸出到一個媒體流節點上
source.connect(track)
// 重複播放BGM
source.loop = true;
// 播放緩衝區的音頻數據
source.start(0)
})
}
request.send();到這裏爲止，我們已經將BGM的音頻捕獲到了，接下來就是將其合進攝像頭和麥克捕獲的音視頻流內。
2、捕獲攝像頭音視頻流（這個在之前講過傳送）
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function(stream) {
// stream這裏就是我們捕獲的攝像頭音視頻流
// 將BGM內的音頻流提取出來
var bgmAudioTrack = track.stream.getAudioTracks()[0]
// 這裏track.stream是重媒體流節點裏的媒體流，getAudioTracks這纔是從流內獲取音頻流集合
// stream添加音頻流
stream.addTrack(bgmAudioTrack)
})現在我們獲取到的就是混音之後的音視頻了，之後就是將媒體導出本地了
3、下載多媒體（這個在之前講過傳送）
var start = document.getElementById('start')
var stop = document.getElementById('stop')
const chunks = null
// 創建MediaRecorder實例(這裏可以看之前的文章)
var mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond : 128000,
videoBitsPerSecond : 100000,
mimeType : 'video/webm;codecs=h264'
})
start.onclick = function () {
mediaRecorder.start()
console.log('開始採集')
}
stop.onclick = function () {
mediaRecorder.stop()
console.log('停止採集')
}
mediaRecorder.onstop = function (e) {
var blob = new Blob([chunks], { 'type' : 'video/mp4' })
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = `test.mp4`
a.click()
}
mediaRecorder.ondataavailable = function(e) {
chunks = e.data
}ok，這下就大功告成了。下面我是我的demo，不過因爲獲取攝像頭需要https，所以要本地用http://localhost跑才能調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音視頻混流</title>
</head>
<body>
<button id="button">開啓攝像頭</button>
<button id="start">開始採集</button>
<button id="stop">停止採集</button>
</body>
<script>
var button = document.getElementById('button')
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var audioDom2 = document.querySelector('#audio2')
var audioCtx = new AudioContext();
var source = audioCtx.createBufferSource()
var track = audioCtx.createMediaStreamDestination();
button.onclick = function () {
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(stream) {
stream.addTrack(track.stream.getAudioTracks()[0])
/* 使用這個stream stream */
var mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond : 128000,
videoBitsPerSecond : 100000,
mimeType : 'video/webm;codecs=h264'
})
start.onclick = function () {
mediaRecorder.start()
console.log('開始採集')
}
stop.onclick = function () {
mediaRecorder.stop()
console.log('停止採集')
}
mediaRecorder.onstop = function (e) {
var blob = new Blob([chunks], { 'type' : 'video/mp4' })
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = `test.mp4`
a.click()
}
mediaRecorder.ondataavailable = function(e) {
console.log(e)
chunks = e.data
}
})
.catch(function(err) {
console.log(err)
/* 處理error */
});
}
function getData() {
var request = new XMLHttpRequest();
request.open('GET', './music/test.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
var audioData = request.response;
audioCtx.decodeAudioData(audioData, function(buffer) {
source.buffer = buffer;
source.connect(track)
source.loop = true;
source.start(0)
},
function(e){"Error with decoding audio data" + e.err});
}
request.send();
}
getData()
</script>
</html>不過我發現有的電腦開啓採集麥克聲音時，背景音不能合成進去。