Optimization Recorder H5 recording: recording side edge transcoding can upload server, supports micro-channel source to provide Android IOS Hybrid App

Recorder H5 GitHub open source libraries with the increase in support functions, audio transcoding process efficiency gradually keep up with demand, and the recent time to the audio transcoding section was upgraded optimized to support more useful features.
In addition the IOS Hybrid App also completed the transplant, Android and IOS have a Demo App.

Online testing , GitHub Address: https://github.com/xiangyuecn/Recorder

First, the characteristics Recorder H5 recording library

(1) browser support

1. PC: including, but not limited to Chrome,Firefox
2. Android: Chrome, , Firefox, Android WebView(UC腾讯Android X5内核(QQ、微信) Series is not supported browser, such as: UC, Alipay, most of the domestic mobile phone manufacturers browser)
3. IOS：Safari，微信(JsSDK)
4. Hybrid App: providing Android, IOS App end of JsBridgethe interface for docking to

(2) function support

1. Provided mp3 wav ogg(beta) webm(beta) amr(beta)format support, support any format extensions
2. Provide real-time feedback volume
3. Provide real-time waveform drawing of a beautiful extension
4. Recording permission requests and recording capabilities designed separately, may request permission first, start recording when needed
5. mp3The default size of the audio file format 2kb / s, is acceptable voice quality, sound quality can be further reduced to a small 1KB / sec
6. ^ ^ [New] mp3 wavformat transcoding "quickly", almost immediately at the end of the audio file recording, the other side can realize recorded side transcoding into small voice clip file upload server in real time
7. Provide rich functionality Demo, browser support online testing, provided ^ ^ [new] Android (15+) Hybrid App installation package and source code ^ [^] provide new IOS (9.0+) Hybrid App to compile the source code for

Second, use the preview screenshots

(1) moving end H5

（2）IOS Hybrid App

（3）Android Hybrid App

Third, the application scenarios

• Mobile terminal, PC terminal H5 recording
• Mobile terminal, PC terminal H5 send voice
• Mobile terminal, PC H5 end speech recognition
• Mobile terminal, PC terminal H5 voice chat

Fourth, the optimization process record

(1) Why should I upgrade optimization

Recorder began to write most of the time, only the pursuit of short voice recording, so the use of a one-time asynchronous (setTimeout slice) After recording transcoding, one minute voice transcoding MP3 spend 100-300ms at end pc, mobile end spending 600-1500ms, the experience is not a big delay, and the code logic is simple; if you use Web Worker (multi-threading), can be done almost no delay, but the code seems to be much more complicated, it is not used.

Behind the actual use found:

1. Slightly longer voice transcoding moving end is very difficult, it takes 2 to 3 minutes of voice transcoding MP3 5,10 seconds;
2. When real-time transcoding sent to the server, in addition to encode wav format itself very quickly, the other format will always result in recording Caton, because the coding takes up too much time, recording data during encoding can not be received properly.

Based on the above issues, it seems that only Web Worker (multi-threading) can be solved.

(2) started to accelerate transcoding Web Worker

"Acceleration" is in quotes, in fact, opened a Web Worker support, transcoding speed is still the same speed, but transcoding into a background thread, do not take up the time of the page only.

But it can be done while recording transcoding, without waiting for transcoding get together at the end of the recording, the result is that no matter how long the recorded voice, transcoding at the end of the recording is instantaneous.

Can also be perfect to do real-time transcoding into small voice clip is uploaded to a server, do not take the time because transcoding pages, and recordings can normally receive data, no Caton.

(3) The remaining question

To support-record edge transcoding, not just open the Web Worker support it, must also have support audio encoder. If the encoder can only complete PCM data is transcoded into one-time audio file, then the need to modify the source encoder to support streaming transcoding to PCM for some period of rotation.

Fortunately Curry MP3 encoder supports streaming does not require changes to be able to use; however, other formats do not change the source encoder does not seem to support; except wav format, wav encoding speed surprisingly fast, without optimization is not questionable.

So now MP3 format using the Web Worker, MP3 and wav formats are supported-record edge transcoding to other formats is still recording the end of an asynchronous (setTimeout slice) transcoding.

Fifth, there is a sense of Hybrid App

Itself is meaningless (or purely superfluous), but the frustration does not support all kinds of IOS: unofficial browser does not support, App within WebView does not support, but Android has all kinds of support, would have been purely a shuttle H5 (included in the Hybrid App) is the most convenient, Apple is no way to hold back.

So just do on Hybrid App IOS can be compatible, but given the complexity of simplifying js side (a good problem thrown pot), whether Android or IOS have achieved what many may be simple; Another Android and IOS audio coding easy, and difficult to update, using the version of the audio transcoding js greatly simplifies the logic App; Android therefore also provides terminal support for the Hybrid App.

Sixth, more support

There GitHub repository within all the source code, a detailed introduction and use Demo, there is the use of the exchange group, if there are any problems during use may raise issue or message. If play would be better to support reward, two-dimensional code in the warehouse. Haha hey ~ GitHub Address: https://github.com/xiangyuecn/Recorder