多个音频轨道合并成一个

最新推荐文章于 2023-10-16 16:42:38 发布

996 前端小伙子

最新推荐文章于 2023-10-16 16:42:38 发布

阅读量842

点赞数 2

分类专栏： webRtc 文章标签： webrtc tracks 合并录制屏幕

本文链接：https://blog.csdn.net/weixin_41854372/article/details/130005895

版权

webRtc 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用AudioContext进行音频tracks的合并，以及结合MediaRecorder实现屏幕录制并保存为本地文件。首先，展示了将多个tracks合并到一个AudioContext中，然后详细阐述了获取屏幕stream，添加音频轨道，以及如何开始和停止录制屏幕的过程。

摘要由CSDN通过智能技术生成

AudioContext 文档

一、音频 tracks 合并

const audioContext = new AudioContext()
const dest = audioContext.createMediaStreamDestination()


// 多个tracks 创建 多个 stream

const tracksList = [tracks, tracks, tracks]


tracksList.forEach((tracks) => {
   const stream= new MediaStream()
         stream.addTrack(tracks)
         // 轨道合并到 dest
         audioContext.createMediaStreamSource(stream).connect(dest)
})



// 输出合并完成的 tracks

console.log('tracks',  dest.stream.getTracks()[0])

二、录制屏幕保持到本地

步骤解析

获取屏幕 stream，选择整个屏幕录制，“ stream没有浏览器内的声音 ”
获取 audio 标签的 stream 的轨道加入到屏幕 stream
使用 MediaRecorder 开始录制

/*
      * 共享屏幕 获取屏幕 stream
      * video 屏幕画面
      * audio 麦克风声音 （没有麦克风也不会导致失败）
      * */
      navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(success, error);

      const success = (stream) => {

        // 先声明 一个 屏幕的轨道，后面用于监听关闭共享屏幕
        const  screenTracks = stream.getTracks()[0]

        // 获取浏览器标签的声音 (如果不需要可以不使用)
        const audioEl = document.getElementById('audio标签')
        if (!audioEl) return
        const audiotracksList = audioEl.captureStream().getTracks()
        if (audiotracksList.length) {
          // stream 加入 标签轨道
          audiotracksList.forEach((tracks) => {
            stream.addTrack(tracks)
          })
        }


        // 录制并且保存至本地文件
        var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
        var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});
        var chunks = [];
        mediaRecorder.addEventListener('dataavailable', function(e) {
          chunks.push(e.data)
        })
        //停止
        mediaRecorder.addEventListener('stop', function(){
          var blob = new Blob(chunks, {type: chunks[0].type});
          var url = URL.createObjectURL(blob);
          var a = document.createElement('a');
          a.href = url;
          // 保存的文件和文件后缀
          a.download = 'video.mp4';
          a.click();
        })
        //手动启动
        mediaRecorder.start(1000)

        // 监听用户是否点击了，系统的关闭共享
        screenTracks.addEventListener("ended", () => {
          // 关闭录制
          mediaRecorder.stop()
        });
        // 十秒关闭录制
        setTimeout(() => {
          // 关闭录制
          mediaRecorder.stop()
        }, 10000)
      }
      const error = (err) => {
        console.log(`获取失败: ${err}`)
      }

三、其他内容

1、获取标签内的所有指定标签

      const canvasBox = document.getElementById('标签')

      const dataList = canvasBox.getElementsByTagName('指定标签')

     
     // 如果需要循环dataList，使用 for 不要使用 forEach