融雲は音声メッセージを送信する
最近はクラウド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コード断片
最後に、融雲送信メッセージの送信方法と組み合わせてメッセージを送信し、ドキュメントを参照します.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/
主なコアコードはすべて上にあります
録音ツールは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/
主なコアコードはすべて上にあります