web audio api - Where can I find a simple PeerJS example using AudioNodes? - Stack Overflow

admin管理员组

文章数量:1122846

I don't see any examples on the PeerJS website for audio connections:

The documentation mentions that a stream is returned:

Which I think I should be able to use with createMediaStreamSource:

I have some simple visualizers that I wire up the the audio before it goes out and when it comes back. I clearly see the signal on the outbound side, but don't get anything on the inbound side.

// Caller

    callButton.addEventListener('click', () => {
        const outgoingStream = audioCtx.createMediaStreamDestination();
        inputSourceNode.connect(outgoingStream);
        const analyser = audioCtx.createAnalyser();
        inputSourceNode.connect(analyser);
        const canvas = document.getElementById('dupeSignal');
        const vu = new AudioVisualizer(canvas, analyser);
        vu.start();
        
        const call = peer.call(otherId, outgoingStream.stream);
        call.on('error', (err) => { 
          console.log(`Call error: ${err.message}`);
        });
        call.on('stream', (incomingStream) => {
            console.log('Call stream');
          if (!!peerSourceNode) {
              peerSourceNode.disconnect();
          }
          peerSourceNode = audioCtx.createMediaStreamSource(incomingStream);
          peerSourceNode.connect(peerAnalyser);
        });
    });

// Callee
    peer.on('call', function(call) {
        console.log('Peer call (call recieved)');
        const outgoingStream = audioCtx.createMediaStreamDestination();
        inputSourceNode.connect(outgoingStream);
        const analyser = audioCtx.createAnalyser();
        inputSourceNode.connect(analyser);
        const canvas = document.getElementById('dupeSignal');
        const vu = new AudioVisualizer(canvas, analyser);
        vu.start();
        call.answer(outgoingStream.stream);
        call.on('stream', function(incomingStream) {
            console.log('Stream Recieved');
            if (!!peerSourceNode) {
                peerSourceNode.disconnect();
            }
            peerSourceNode = audioCtx.createMediaStreamSource(incomingStream);
            peerSourceNode.connect(peerAnalyser);
        });
    });

I don't see any audio on either the Caller or Callee side. My implementation of a very simple text chat works fine over the same P2P connection.

I don't see any examples on the PeerJS website for audio connections: https://peerjs.com/examples

The documentation mentions that a stream is returned: https://peerjs.com/docs/#mediaconnection

Which I think I should be able to use with createMediaStreamSource:

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource

I have some simple visualizers that I wire up the the audio before it goes out and when it comes back. I clearly see the signal on the outbound side, but don't get anything on the inbound side.

// Caller

    callButton.addEventListener('click', () => {
        const outgoingStream = audioCtx.createMediaStreamDestination();
        inputSourceNode.connect(outgoingStream);
        const analyser = audioCtx.createAnalyser();
        inputSourceNode.connect(analyser);
        const canvas = document.getElementById('dupeSignal');
        const vu = new AudioVisualizer(canvas, analyser);
        vu.start();
        
        const call = peer.call(otherId, outgoingStream.stream);
        call.on('error', (err) => { 
          console.log(`Call error: ${err.message}`);
        });
        call.on('stream', (incomingStream) => {
            console.log('Call stream');
          if (!!peerSourceNode) {
              peerSourceNode.disconnect();
          }
          peerSourceNode = audioCtx.createMediaStreamSource(incomingStream);
          peerSourceNode.connect(peerAnalyser);
        });
    });

// Callee
    peer.on('call', function(call) {
        console.log('Peer call (call recieved)');
        const outgoingStream = audioCtx.createMediaStreamDestination();
        inputSourceNode.connect(outgoingStream);
        const analyser = audioCtx.createAnalyser();
        inputSourceNode.connect(analyser);
        const canvas = document.getElementById('dupeSignal');
        const vu = new AudioVisualizer(canvas, analyser);
        vu.start();
        call.answer(outgoingStream.stream);
        call.on('stream', function(incomingStream) {
            console.log('Stream Recieved');
            if (!!peerSourceNode) {
                peerSourceNode.disconnect();
            }
            peerSourceNode = audioCtx.createMediaStreamSource(incomingStream);
            peerSourceNode.connect(peerAnalyser);
        });
    });

I don't see any audio on either the Caller or Callee side. My implementation of a very simple text chat works fine over the same P2P connection.

• web-audio-api
• peerjs

Share Improve this question Follow asked Nov 22, 2024 at 21:24 MattDMattD 1,36455 gold badges1515 silver badges2828 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Based on this answer the problem here is limited to Chrome; Chrome won't send the audio unless there is an HTML element consuming it. The analyzer does not count as a consumer.

The fix is to simply create a muted node that consumes it. Add this code to both of your call.on('stream' ... handlers.

        call.on('stream', function(incomingStream) {
            // Ungodly hack to actually get the audio to flow
            const a = new Audio();
            a.muted = true;
            a.srcObject = incomingStream;
            a.addEventListener('canplaythrough', () => { console.log('ready to flow'); });
            // End ungodly hack.
 [ ... Remaining code unchanged .. ]

Answering the initial question directly, you might find this walk-through on Medium helpful.

本文标签： web audio apiWhere can I find a simple PeerJS example using AudioNodesStack Overflow