通过javascript在通话期间流式传输音频文件答案

【问题标题】：Streaming audio file during call through javascript通过javascript在通话期间流式传输音频文件
【发布时间】：2018-12-08 14:37:24
【问题描述】：

我想做什么：

我通过浏览器点击任意号码拨打电话
通话已接通，无论接收器是什么，我都可以说话和听说话

我已经使用 WebRtc API 通过浏览器访问音频，

现在我想做更多的事情：

1) 当我打电话并到达答录机时，我想通过点击留下一个预先录制的语音邮件。

所以我想要那个，我只是通过麦克风流式传输该音频文件，但我不知道如何做到这一点，

this.audioTest = function() {
    console.log("Testing function");
    var a1 =  document.getElementById("remote");
    var pc = this.session.sessionDescriptionHandler.peerConnection;
    var backgroundMusic = audioContext.createMediaElementSource(document.getElementById("remoteMedia"));
    var mixedOutput = audioContext.createMediaStreamDestination();
    backgroundMusic.connect(mixedOutput);
    console.log(mixedOutput);
    var remoteStream = new MediaStream();
    pc.getSenders().forEach(function (sender) {
        var track = mixedOutput.stream;
        if (track) {
            remoteStream.addTrack(track);
        }
    });
    a1.srcObject = remoteStream;
}

这是我的代码，我先播放音频，然后尝试通过我的麦克风进行流式传输，但没有得到任何线索，如果有人可以帮助或建议我的任何事情，那就太好了。

【问题讨论】：

标签： javascript jquery webrtc web-audio-api

【解决方案1】：

您需要使用网络音频 API。在那里，您可以在麦克风和来自其他来源的音频之间无缝混合（或在您的情况下切换），同时仅向 WebRTC 对等方发送一个 MediaStream。

相关的方法是上下文中的createMediaStreamDestination。 https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamDestination

const rtcOutput = audioContext.createMediaStreamDestination();
yourMixOutput.conntect(rtcOutput);

然后，在发送给对等方的内容中使用rtcOutput.stream。

【讨论】：

感谢@Brad 的回答，我正在调查这个问题，将其标记为答案，如果可以的话。
你好，布拉德，我尝试了你的建议，但我无法让它工作，它给出以下错误：“无法在 'MediaStream' 上执行 'addTrack'：参数 1 不是输入‘MediaStreamTrack’。”我已经更新了上面的代码，请帮忙
@Unknown track 在您的代码中不是 MediaStreamTrack，它是 MediaStream 本身。您应该直接使用mixedOutput.stream，而不是为remoteStream 创建一个空的MediaStream。

【解决方案2】：

我认为您不需要通过麦克风流式传输音频文件（语音消息）。您可以将流（传递到 WebRTC）从麦克风切换到语音消息。

const micStream; // user MediaStream
const msgStream; // voice message MediaStream
const pc; //RTCPeerConnection
const destination = audioCtx.createMediaStreamDestination();
const micSource = audioCtx.createMediaStreamSource(micStream);
const micGainNode = audioCtx.createGain(); //with this you can change volume of stream
micSource.connect(micGainNode);
micGainNode.connect(destination);
// adding stream of destination to WebRTC.
// note that stream is taken from destination
destination.stream.getTracks().forEach(
   function (track) {
      pc.addTrack(track,destination.stream);
   }
);
// then on send voice message listener  
sendVoiceMessageListener = function(){
   //we need to disconnect microphone stream and connect voice message stream
    micGainNode.disconnect(destination);
    const msgSource = audioCtx.createMediaStreamSource(msgStream);
    const msgGainNode = audioCtx.createGain();
    micSource.connect(micGainNode);
    micGainNode.connect(destination);
}

【讨论】：