我想记录从Angular Web App到Asp Core Api的音频流。
I would like to record the Audio stream from my Angular Web App to my Asp Core Api.
我认为,使用SignalR及其websockets效果很好
I think, using SignalR and its websockets it a good way to do that.
使用此打字稿代码,我就能获得MediaStream:
With this typescript code, I m able to get a MediaStream:
import { HubConnection } from '@aspnet/signalr'; [...] private stream: MediaStream; private connection: webkitRTCPeerConnection; @ViewChild('video') video; [...] navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { console.trace('Received local stream'); this.video.srcObject = stream; this.stream = stream; var _hubConnection = new HubConnection('[MY_API_URL]/webrtc'); this._hubConnection.send("SendStream", stream); }) .catch(function (e) { console.error('getUserMedia() error: ' + e.message); });然后我用
public class MyHub: Hub{ public void SendStream(object o) { } }但是当我将o强制转换为System.IO.Stream时,我得到了空值。
But when I cast o to System.IO.Stream, I got a null.
当我阅读WebRTC文档时,看到了有关RTCPeerConnection的信息。 IceConnection ...我需要吗?
When I read the documentation of WebRTC, I saw information about RTCPeerConnection. IceConnection ... Do I need that?
如何使用SignalR将音频从WebClient流式传输到AspCore API?文档? GitHub?
How can I stream the audio from a WebClient to AspCore API using SignalR? Documentation? GitHub?
感谢您的帮助
推荐答案我找到了方法要访问麦克风流并将其传输到服务器,请使用以下代码:
I found the way to get access to the microphone stream and transmit it to the server, here is the code:
private audioCtx: AudioContext; private stream: MediaStream; convertFloat32ToInt16(buffer:Float32Array) { let l = buffer.length; let buf = new Int16Array(l); while (l--) { buf[l] = Math.min(1, buffer[l]) * 0x7FFF; } return buf.buffer; } startRecording() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { this.audioCtx = new AudioContext(); this.audioCtx.createMediaStreamSource(stream); this.audioCtx.onstatechange = (state) => { console.log(state); } var scriptNode = this.audioCtx.createScriptProcessor(4096, 1, 1); scriptNode.onaudioprocess = (audioProcessingEvent) => { var buffer = []; // The input buffer is the song we loaded earlier var inputBuffer = audioProcessingEvent.inputBuffer; // Loop through the output channels (in this case there is only one) for (var channel = 0; channel < inputBuffer.numberOfChannels; channel++) { console.log("inputBuffer:" + audioProcessingEvent.inputBuffer.getChannelData(channel)); var chunk = audioProcessingEvent.inputBuffer.getChannelData(channel); //because endianness does matter this.MySignalRService.send("SendStream", this.convertFloat32ToInt16(chunk)); } } var source = this.audioCtx.createMediaStreamSource(stream); source.connect(scriptNode); scriptNode.connect(this.audioCtx.destination); this.stream = stream; }) .catch(function (e) { console.error('getUserMedia() error: ' + e.message); }); } stopRecording() { try { let stream = this.stream; stream.getAudioTracks().forEach(track => track.stop()); stream.getVideoTracks().forEach(track => track.stop()); this.audioCtx.close(); } catch (error) { console.error('stopRecording() error: ' + error); } }下一步是将int32Array转换为wav文件。
Next step will be to convert my int32Array to a wav file.
对我有帮助的来源:
- subvisual.co/ blog / posts / 39-tutorial-html-audio-capture-streaming-to-node-js-no-browser-extensions /
- medium/@yushulx/learning-how- to-capture-and-record-audio-in-html5-6fe68a769bf9
- subvisual.co/blog/posts/39-tutorial-html-audio-capture-streaming-to-node-js-no-browser-extensions/
- medium/@yushulx/learning-how-to-capture-and-record-audio-in-html5-6fe68a769bf9
注意:我没有添加有关如何配置SignalR的代码,这不是这里的目的。
Note: I didnt add the code on how to configure SignalR, it was not the purpose here.
更多推荐
WebRTC和Asp.NetCore
发布评论