Optimize Recorder H5 Recording: Side Recording Transcoding Upload Server, support WeChat provides Android iOS Hybrid App Source Code

By Android

Contents

  • 1. Features of Recorder H5 recording library
    • (1) Browser support
    • (2) Function support
  • Second, use the preview screenshot
    • (1) Mobile terminal H5
    • (2) IOS Hybrid App
    • (3) Android Hybrid App
  • 3. Application Scenario
  • Four. Record of optimization process
    • (1) Why upgrade and optimize
    • (2) Start using Web Worker to accelerate transcoding
    • (3) The remaining questions
  • 5. The significance of the existence of Hybrid App
  • 6. More support

< /div>

With the increase in support functions of the Recorder H5 GitHub open source library, the audio transcoding processing efficiency has gradually fallen short of the demand. Recently, we have taken time to upgrade and optimize the audio transcoding part. To support more practical functions.
In addition, the IOS Hybrid App has also been transplanted, and both Android and IOS have Demo App.

Online test, GitHub address: https://github.com/xiangyuecn/Recorder

1. Recorder Features of H5 recording library

(1) browser support

  1. PC: including but not limited to Chrome, Firefox
  2. Android: Chrome, Firefox, Android WebView, Tencent Android X5 kernel (QQ, WeChat) (UC series browsers are not supported, such as: UC, Alipay, browsers from most domestic mobile phone manufacturers)
  3. IOS: Safari, WeChat (JsSDK)
  4. Hybrid App: Provide the JsBridge interface of Android and IOS apps for docking

(2)Functional support

  1. mp3 wav has been provided ogg(beta) webm(beta) amr(beta) format support, support for any format expansion
  2. Provide real-time volume Feedback
  3. Provide a beautiful real-time waveform drawing extension plug-in
  4. The recording permission request and the recording function are designed separately. You can request permission first and start recording when needed
  5. mp3 The default size of the recording file is 2kb/sec, and the voice quality is acceptable, and the sound quality can be reduced to 1kb/sec
  6. ^[New]^ mp3 wav format transcoding "quickly", the audio file can be obtained almost immediately when the recording is finished, and it can be transcoded into small voice fragment files while recording and uploading to the server in real time
  7. Provide feature-rich Demo, support browser online testing, ^[New]^ Provide Android(15+) Hybrid A pp installation package and source code, ^[New]^ Provide IOS(9.0+) Hybrid App source code for self-compilation

Second, use preview screenshot

(1)Mobile terminal H5

Mobile terminal H5

(2) IOS Hybrid App

IOS Hybrid App

(3) Android Hybrid App

Android Hybrid App

Three, application scenarios

  • Mobile and PC H5 recording
  • Mobile, PC H5 sending voice
  • Mobile, PC H5 voice recognition
  • Mobile, PC H5 Voice chat

Four. Optimization process records

(1) Why upgrade and optimize

h2>

When I first wrote Recorder, I only pursued a short voice recording. Therefore, it uses a one-time asynchronous (setTimeout fragment) transcoding after the recording ends. It costs 100- to transcode MP3 for 1 minute of voice on the PC side. 300ms, the mobile terminal spends 600-1500ms, the experience delay is not large, and the code logic is very simple; if you use Web Worker (multithreading), almost no delay can be achieved, but the code seems to be much more complicated, so it is not adopted.

I found out during actual use later:

  1. Slightly longer voice transcoding mobile terminal is very difficult, 2 and 3 minutes of voice takes 5, 10 seconds to MP3 Transcoding;
  2. When performing real-time transcoding and sending to the server, except for the very fast encoding of the wav format itself, other formats will cause recording freezes. The reason is that the encoding takes too much time and the encoding period is very fast. The recorded data cannot be received normally.

Based on the above two issues, it seems that only Web Worker (multithreading) can solve it.

(2) Start to use Web Worker to speed up transcoding

"Accelerated" is to add quotation marks, in fact, Web Worker is turned on Yes, the transcoding speed is still the same speed, but the transcoding work is placed on the background thread, which does not take up the time of the page.

But you can transcode while recording. You don’t need to wait until the end of the recording to get together and transcode. The result is that no matter how long the recorded voice is, the transcoding is done instantly when the recording ends.

It can also be perfect for real-time transcoding into small voice fragment files and uploading to the server, because transcoding does not take up the time of the web page, and recording can receive data normally without jams.

(3) The remaining questions

To support transcoding while recording, it is not only necessary to enable Web Worker support, but also There is audio encoder support. If the encoder can only transcode the complete PCM data into an audio file at one time, then the source code of the encoder needs to be modified to support streaming transcoding, from one PCM to another.

Fortunately, the MP3 encoder in the library supports streaming and can be used without modification; however, it seems that other formats cannot be supported without changing the source code of the encoder; except for the wav format, the wav encoding speed is surprisingly fast It is fast, and there is no problem without optimization.

Therefore, the current MP3 format uses Web Worker. Both MP3 and wav formats support transcoding while recording. Other formats are still transcoding asynchronously (setTimeout fragmentation) at the end of the recording.

Five, the meaning of Hybrid App

It is meaningless (or purely redundant), but IOS is helpless. Unsupported: Unofficial browsers do not support, WebView in App does not support, but Android supports all kinds of. Originally a pure H5 shuttle (included in Hybrid App) is the most convenient, and Apple has no way to drag it back. .

So you only need to do compatibility on the Hybrid App of IOS, but considering the complexity of simplifying the js side (if something goes wrong), it may be much simpler to implement it on both Android and IOS ; In addition, the audio encoding of Android and IOS is not easy, and it is not easy to update. Using the js version of audio transcoding can greatly simplify the logic of the App; therefore, the Android side also provides Hybrid App support.

6, more support

There are all source codes in the GitHub repository, detailed introduction and demo, and communication groups. If If you have any questions during use, you can raise an issue or send a message. It would be better if you could give a reward and support. There is a QR code in the warehouse. Hahaha~ GitHub address: https://github.com/xiangyuecn/Recorder

Contents

  • I. Features of Recorder H5 recording library
    • (1) Browser support
    • (2) Function support

    < /li>

  • Second, use the preview screenshot
    • (1) Mobile H5
    • (2) IOS Hybrid App
    • (3) Android Hybrid App< /li>
  • 3. Application scenarios
  • 4. Optimization process record
    • (1) Why upgrade and optimize
    • (2) Start using Web Worker to accelerate transcoding
    • (3) The remaining problems
  • 5. The significance of the existence of Hybrid App
  • Six. More support

  • I. Features of Recorder H5 recording library
    • (1) Browser support
    • (2) Function support
  • Second, use preview screenshot
    • (1) Mobile terminal H5
    • (2) IOS Hybrid App
    • (3) Android Hybrid App
  • 3. Application scenarios
  • 4 , Optimization process record
    • (1) Why upgrade and optimize
    • (2) Start using Web Worker to accelerate transcoding
    • (3) The remaining questions

      • li>

  • 5. The meaning of the Hybrid App
  • 6. More support

, , , , , , , , , , , , , , , , ,

Leave a Comment

Your email address will not be published.