融雲は音声メッセージを送信する


最近はクラウドIM SDKを統合していますが、公式に提供されている音声には録音能力が含まれていないので、自分でブラウザで録音して再生するDemoを作って、必要な仲間が持って行って遊ぶことができます~~~
録音ツールはHTML 5のgetUserMediaなので、頑固派ブラウザは自然にサポートする方法があります.はい、くだらない話が多すぎて、getUserMeidaの録音の物語はすぐに始まります.
実現構想.
1、getUserMediaを使用するには、各ブラウザの違いを考慮する必要があります.具体的な違いは、次の手順に従います.https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia
2、WebWorkerを使用して録音と音声変換を処理する.
3、Base 64形式のWAVに移行し、ブラウザ再生に使用する(ここでは、Blobを変換して直接再生することができることに注意し、ここではオーディオを変換するインタフェースを説明するため、Base 64に移行する).
具体的な実装
1、録音開始:RongRecorder.record();
このメソッドを呼び出して録音を開始します.
2、録音停止:RongRecorder.stop();
このメソッドを呼び出して録音を停止します.
3、停止とエクスポート:RongRecorder.stopAndExport(type,callback);
このメソッドを呼び出してオーディオを指定したtypeタイプに停止し、エクスポートします(現在はWaveのみサポートされていますが、後続の拡張のためですか~~~).
4、書き出し:RongRecorder.exportRecord(type);
指定したtypeタイプのオーディオストリームをエクスポートします.
5、ローカルオーディオストリームをクリアする:RongRecorder.clear();
デモ
1、互換getUserMediaコード断片
navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia; 2、WebWorkerコード断片
this.onmessage = function(e){
     
  switch(e.data.command){
     
    case 'init':
      init(e.data.config);
      break;
    case 'record':
      record(e.data.buffer);
      break;
    case 'exportRecord':
      exportRecord(e.data.type);
      break;
    case 'clearRecord':
      clearRecord();
      break;
  }
};

function init(config){
     
  sampleRate = config.sampleRate;
}

function clearRecord(){
     
  recBuffersL.length = 0;
  recLength = 0;
}

function record(inputBuffer){
     
  recBuffersL.push(inputBuffer[0]);
  //recBuffersR.push(inputBuffer[1]);
  recLength += inputBuffer[0].length;
}

function exportRecord(type){
     
  var bufferL = mergeBuffers(recBuffersL, recLength);
  var interleaved = interleave(bufferL);
  var dataview = encodeWAV(interleaved);
  var audioBlob = new Blob([dataview], {
      type: type });
  this.postMessage(audioBlob);
}

最後に、融雲送信メッセージの送信方法と組み合わせてメッセージを送信し、ドキュメントを参照します.https://docs.rongcloud.cn/v4-platform/views/im/noui/guide/platform-web/message/msgsend/private-p.html?match=imlib-web#HQVCMsg
融雲公式ドキュメント:https://www.rongcloud.cn/
主なコアコードはすべて上にあります