音视频混流_玖富娱乐主管发布


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

音视频混流

之前讲过一篇怎样经由过程摄像头猎取音视频流并导出的文章。此次要讲的是怎样将多个音视频流夹杂后导出。

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

不外我发明有的电脑开启收罗麦克声响时,配景音不克不及分解进去。

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。