音视频混流

2019-12-08

音视频混流

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

主要用的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>

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

评论(0条):