在两个客户端之间存在一个WebRTC PeerConnection,其中一个客户端试图向另一个客户端发送音频MediaStream。
如果这个MediaStream是440hz的振荡器,则一切正常。声音非常清晰,传输正确进行。
然而,如果音频是20000hz,声音会很嘈杂且有裂缝 - 我期望听不到任何声音,但实际上我却听到了很多噪音。
我认为这可能是连接中发送的采样率的问题,也许它没有像我期望的那样以48000个样本/秒发送音频。
有没有办法增加采样率?
这是一个可重现该问题的Fiddle: https://jsfiddle.net/mb3c5gw1/9/ 包括可视化器的最小复制代码:
如果这个MediaStream是440hz的振荡器,则一切正常。声音非常清晰,传输正确进行。
然而,如果音频是20000hz,声音会很嘈杂且有裂缝 - 我期望听不到任何声音,但实际上我却听到了很多噪音。
我认为这可能是连接中发送的采样率的问题,也许它没有像我期望的那样以48000个样本/秒发送音频。
有没有办法增加采样率?
这是一个可重现该问题的Fiddle: https://jsfiddle.net/mb3c5gw1/9/ 包括可视化器的最小复制代码:
<button id="btn">start</button>
<canvas id="canvas"></canvas>
<script>class OscilloMeter{constructor(a){this.ctx=a.getContext("2d")}listen(a,b){function c(){g.getByteTimeDomainData(j),d.clearRect(0,0,e,f),d.beginPath();let a=0;for(let c=0;c<h;c++){const e=j[c]/128;var b=e*f/2;d.lineTo(a,b),a+=k}d.lineTo(canvas.width,canvas.height/2),d.stroke(),requestAnimationFrame(c)}const d=this.ctx,e=d.canvas.width,f=d.canvas.height,g=b.createAnalyser(),h=g.fftSize=256,j=new Uint8Array(h),k=e/h;d.lineWidth=2,a.connect(g),c()}}</script>
btn.onclick = e => {
const ctx = new AudioContext();
const source = ctx.createMediaStreamDestination();
const oscillator = ctx.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(20000, ctx.currentTime); // value in hertz
oscillator.connect(source);
oscillator.start();
// a visual cue of AudioNode out (uses an AnalyserNode)
const meter = new OscilloMeter(canvas);
const pc1 = new RTCPeerConnection(),
pc2 = new RTCPeerConnection();
pc2.ontrack = ({
track
}) => {
const endStream = new MediaStream([track]);
const src = ctx.createMediaStreamSource(endStream);
const audio = new Audio();
audio.srcObject = endStream;
meter.listen(src, ctx);
audio.play()
};
pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc1.oniceconnectionstatechange = e => console.log(pc1.iceConnectionState);
pc1.onnegotiationneeded = async e => {
try {
await pc1.setLocalDescription(await pc1.createOffer());
await pc2.setRemoteDescription(pc1.localDescription);
await pc2.setLocalDescription(await pc2.createAnswer());
await pc1.setRemoteDescription(pc2.localDescription);
} catch (e) {
console.error(e);
}
}
const stream = source.stream;
pc1.addTrack(stream.getAudioTracks()[0], stream);
};