音视频混流

音视频混流

之前讲过一篇如何通过摄像头获取音视频流并导出的文章。这次要讲的是如何将多个音视频流混合后导出。

主要用的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跑才能调用




  
  
  
  音视频混流


  
  
  


不过我发现有的电脑开启采集麦克声音时,背景音不能合成进去。

你可能感兴趣的:(音视频混流)