Second, use preview screenshot

(1)Mobile terminal H5

(2) IOS Hybrid App

(3) 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
• 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