Skip to content

Commit

Permalink
demo添加局域网WebRTC P2P语音聊天
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiangyuecn
xiangyuecn committed Aug 27, 2019
1 parent 097ee84 commit a685b07
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

录音默认输出mp3格式，另外可选wav格式（raw pcm format此格式录音文件超大）；有限支持ogg(beta)、webm(beta)、amr(beta)格式；支持任意格式扩展（前提有相应编码器）。

mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）。主要用于语音录制，双声道语音没有意义，特意仅对单声道进行支持。mp3和wav格式支持边录边转码，录音结束时转码速度极快，支持实时转码成小片段文件和实时传输，demo中已实现一个语音聊天，下面有介绍；其他格式录音结束时可能需要花费比较长的时间进行转码。
mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）。主要用于语音录制，双声道语音没有意义，特意仅对单声道进行支持。mp3和wav格式支持边录边转码，录音结束时转码速度极快，支持实时转码成小片段文件和实时传输，demo中已实现一个语音通话聊天，下面有介绍；其他格式录音结束时可能需要花费比较长的时间进行转码。

mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav(raw pcm format)编码器，压缩后的recorder.wav.min.js不足5kb。

Expand Down Expand Up @@ -490,8 +490,8 @@ public void onPermissionRequest(PermissionRequest request) {



# :open_book:语音聊天demo：实时编码、传输与播放验证
在[线测试Demo](https://xiangyuecn.github.io/Recorder/)中包含了一个语音聊天的测试功能，没有服务器支持所以仅支持局域网内一对一语音。用两个设备（浏览器打开两个标签也可以）打开demo，勾选H5版语音聊天，按提示交换两个设备的信息即可成功进行P2P连接，然后进行语音聊天。
# :open_book:语音通话聊天demo：实时编码、传输与播放验证
在[线测试Demo](https://xiangyuecn.github.io/Recorder/)中包含了一个语音通话聊天的测试功能，没有服务器支持所以仅支持局域网内一对一语音。用两个设备（浏览器打开两个标签也可以）打开demo，勾选H5版语音通话聊天，按提示交换两个设备的信息即可成功进行P2P连接，然后进行语音。

编写本语音测试的目的在于验证H5录音实时转码、传输的可行性，并验证实时转码mp3格式小片段文件接收后的可播放性。经测试发现：除了移动端可能存在设备性能低下的问题以外，录音后实时转码mp3并传输给对方是可行的，对方接收后播放也能连贯的播放（效果还是要看播放代码写的怎么样，目前没有比较完美的播放代码）。另外（16kbps,16khz）MP3开语音15分钟大概3M的流量，wav 15分钟要37M多流量。

Expand Down
2 changes: 1 addition & 1 deletion assets/zdemo.index.webrtc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Recorder.Support();//激活Recorder.Ctx
var i=0;
reclog([
'<div style="color:#06c">**************'
,'如果需要模拟语音聊天，开启步骤：'
,'如果需要模拟语音通话聊天，开启步骤：'
,(++i)+'. 准备局域网内两台设备(设备A、设备B)用最新版本浏览器(demo未适配低版本)分别打开本页面（也可以是同一台设备打开两个网页）'
,(++i)+'. 在设备A上点击"新建连接"'
,(++i)+'. 复制设备A"本机信息"到设备B的"远程信息"中，设备B中点击确定连接'
Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

<script>
//兼容环境
var PageLM="2019-8-17 12:12:22";
var PageLM="2019-8-27 23:43:57";

function BuildHtml(html,o,notEncode,loop){return o||(o={}),html=(null==html?"":html+"").replace(/\{(fn:)?(:)?(.+?)\}/gi,function(a,b,c,code){try{var v=eval(b?code:"o."+code);return v=void 0===v?"":v+"",c||notEncode?v:v}catch(e){return console.log("BuildHtml Fail",a+"\n"+e.stack),""}}),loop&&/\{(fn:)?(.+?)\}/.test(html)&&(html=BuildHtml(html,o,notEncode,loop)),html};
function RandomKey(){
Expand Down Expand Up @@ -141,10 +141,10 @@
<input type="checkbox" class="recwaveSet" checked>
</div>
<div class="pd">
<label><input type="checkbox" class="realTimeSendSet">模拟准实时编码传输（H5版语音聊天）</label>
<label><input type="checkbox" class="realTimeSendSet">模拟准实时编码传输（H5版语音通话聊天）</label>
，发送间隔<input type="text" class="realTimeSend" value="996" style="width:60px">ms
<div class="webrtcSend" style="display:none;border:1px solid #ddd">
<div style="color:#06c">（可选）开启H5语音聊天（局域网WebRTC P2P）：</div>
<div style="color:#06c">（可选）开启H5语音通话聊天（局域网WebRTC P2P）：</div>
<div>
接收端播放模式：
<label><input type="radio" name="webrtcPlayMode" class="webrtcPlayModeDecode" value="decode" checked>解码播放</label>
Expand Down

0 comments on commit a685b07

Please sign in to comment.