YouTube Music은 Android 및 iOS에서 더 많은 사용자에게 실시간 가사를 제공합니다.

Apple Music과 Spotify는 이미 유사한 기능을 갖추고 있으므로 YouTube Music이 경쟁사와 보조를 맞추는 모습이 보기 좋습니다.

https://www.zdnet.com/article/youtube-music-rolls-out-real-time-lyrics-on-android-and-ios-to-more-users/

Flutter and Clean Architecture(I)

https://aderibigbejesutoni860.medium.com/flutter-and-clean-architecture-i-be75e13608d4

Flutter and Clean Architecture (II)

https://aderibigbejesutoni860.medium.com/flutter-and-clean-architecture-ii-bf39113df82b

Flutter vs React Native

https://medium.com/@vikranthsalian/flutter-vs-react-native-396216ad41d3

Developers often find it difficult to choose between Flutter vs React Native. Both have been created by the current tech giants of the world, Facebook and Google.

But the question of what to use to create these apps has been around for a while.

Flutter

is an open-source UI framework developed by Google in 2017 that aims to design cross-platform apps to run on mobile, Windows, macOS, and Linux as well as on the web. Flutter’s framework is built upon Dart. A lot of big companies like Alibaba, Philips Hue, Hamilton, etc., choose Flutter for development. Moreover, Google frequently provides updates for Flutter, improving its performance with each update.

Advantages of using Flutter

1. Great UI
2. Has a number of widgets
3. Apps are faster
4. Helps build web apps
5. Well-structured documentation and community
6. Helps replicate and create the same UI for different devices

Disadvantages of Flutter

1. Not native
2. Apps are larger
3. Has a limited set of tools

React Native

Facebook developed React Native in 2015. It is an open-source framework that is based on JavaScript. It also provides a similar feature, using the same codebase to create cross-platform apps, thus eliminating the need to compile other technologies for creating mobile apps. Skype, Instagram, Uber Eats, etc., depends upon React Native for development.

Advantages of using React Native

1. Uses JavaScript
2. Can create apps for multiple platforms using a single codebase
3. Understands the importance of code reusability and promotes it
4. Growing and active community
5. Helps in accelerating coding time

Disadvantages of using React Native

1. Not native
2. Does not provide innovative, out-of-the-box components
3. Limited choices
4. Abandoned libraries and packages
5. UI can be hampered easily and needs to undergo vigorous UI testing
6. Larger apps

Differences between Flutter vs React Native

React Native and Flutter are amazing choices for developing a cross-platform application, however, they share several differences which make them unique from each other.

• One major difference is the programming languages both frameworks use. React Native is based on JavaScript and uses JSX. However, Flutter uses Dart programming language.
• The architecture for both frameworks differs. Flutter uses a 2D graphic rendering library, Skia, whereas, React Native uses the Flux architecture, which also requires JavaScript bridging. Here, JavaScript bridging is necessary for React Native to allow JavaScript and Native code to interact with each other. However, there is no programming bridge in Flutter.
• Flutter and React Native documentation guides are very good. However, Flutter shares more organized and structured documentation. React Native documentation is poorly maintained because it depends heavily on third-party libraries.
• Installing Flutter requires you to download the binary from GitHub and also to set up the environment variables on your system. On the other hand, React Native is installed using node package manager (NPM) with one command on your terminal.
• Flutter relies on its developed widgets for customization, whereas React Native incorporates third-party customization components. Therefore, flutter offers more compatibility. Moreover, Flutter development is solely constructed upon Widgets, whereas React Native uses JSX.
• React Native has better support for 3D, whereas, Flutter does not support 3D.

Conclusion :

This blog explains the reasons behind the great popularity of the two emerging frameworks Flutter and React Native, for creating cross-platform applications. Flutter and Native solve the issue of creating separate code for native platforms like Android and iOS. Now, you can create an application for all the platforms using entirely the same code.

Moreover, picking the best framework for yourself depends upon your experience, requirements, and the business needs of your project. If you’re already aware of the JavaScript programming language, then there’s no doubt that React Native is a good choice. However, if you’re targeting a highly stable and fast performance, Flutter has several advantages over React Native.

Happy Coding!!!

https://apps.apple.com/us/app/otter-transcribe-voice-notes/id1276437113

Zoom, Google Meet, Microsoft Teams 등을 위한 자동 회의 메모. 집에서 일할 때 연결 상태를 유지하고 협업하세요.

OtterPilot™ AI와의 회의. 오디오를 녹음하고, 메모를 작성하고, 슬라이드를 자동으로 캡처하고, 요약을 생성하는 회의 도우미를 받으세요.

Otter는 모든 회의, 인터뷰, 강의 및 일상적인 음성 대화를 실시간으로 기록하므로 토론에 집중할 수 있습니다. 대면, Zoom, Google Meet 및 Microsoft Teams에 대한 자동 메모를 받으세요. 모든 메모는 검색 및 공유가 가능합니다. Otter.ai는 웹에서도 사용할 수 있습니다. 영어만 가능합니다.

많은 용도

• 회의 메모를 자동으로 작성하고 팀원과 공유하여 모두 동기화 상태 유지

• 인터뷰, 강의, 팟캐스트, 비디오, 웨비나, 기조연설을 녹음하고 필사합니다.

• 청각 장애인 커뮤니티, ESL 학습자 및 접근성이 필요한 모든 사람에게 실시간 자막 제공

실시간 녹음 및 전사

• 위젯과 바로가기를 사용하여 탭 한 번으로 즉시 녹음

• 높은 정확도로 실시간(온라인일 때) 기록

• 나중에 검토할 핵심 사항 강조표시

• 화이트보드 토론, 슬라이드 등의 사진을 삽입합니다.

• 내장 마이크 또는 블루투스 장치를 통해 오디오 입력

AI로 메모 강화

• 단락을 자동으로 구두점, 대문자 및 구분

• 화자 식별(일부 교육 후)

• 워드 클라우드 및 요약 키워드를 생성합니다. 단어를 탭하면 말한 곳으로 이동합니다.

• 가상 회의 중 자동화된 슬라이드 캡처

• 모든 회의 후 자동 요약

공유 및 협업

• 그룹 내에서 녹음을 시작하여 대본을 실시간으로 공유

• 그룹 구성원을 초대하여 함께 보고 편집하고 강조 표시합니다. 모든 하이라이트는 Takeaways 패널에서 캡처됩니다.

• 요점 패널 내에서 의견을 추가하고 작업 항목을 할당합니다.

• 링크를 통해 외부에 공유

검색 및 재생

• 전체 오디오를 스크러빙할 필요가 없도록 텍스트 검색

• 조정 가능한 속도로 재생

• 오디오가 재생되는 동안 강조 표시된 단어를 따라가세요.

• 단어를 탭하면 오디오가 해당 지점으로 이동합니다.

편집 및 강조 표시

• 텍스트를 편집하여 오류를 수정하십시오.

• 화자에게 태그를 지정하여 단락에 라벨을 지정하고 Otter가 화자를 식별하도록 교육

• 탭 한 번으로 문장 강조 표시

구성 및 내보내기

• 대화를 개인 폴더로 정리

• 클립보드에 복사하거나 다른 앱에 직접 공유

• PDF, TXT, SRT, MP3로 내보내기

가져오기 및 동기화

• 오디오 및 비디오 파일 가져오기

• Zoom 계정을 동기화하여 클라우드 녹음 기록

• 다른 통화 녹음 앱에서 업로드

• 캘린더를 동기화하여 회의를 기록하고 메모에 자동 제목을 지정하도록 알림

• 간편한 공유를 위해 연락처 가져오기

iOS에 최적화

• Siri 바로가기 및 홈 위젯으로 녹음 시작/중지

• AirPods를 통해 녹음

• iOS 캘린더, 연락처 및 카메라와 동기화

• 3D Touch로 대화 미리보기

• 얼굴/터치 ID로 잠금

• AirPrint를 통한 인쇄

• Dynamic Type으로 글꼴 크기 조정

수달 프로

• 재생 속도 향상 및 무음 건너뛰기

• 대량 내보내기

• 월별 청구를 선택하거나 연간 청구로 크게 절약

• 결제는 구매 확인 시 iTunes 계정으로 청구됩니다.

• 현재 기간이 종료되기 최소 24시간 전에 자동 갱신을 해제하지 않으면 구독이 자동으로 갱신됩니다.

• 현재 기간이 끝나기 24시간 이내에 계정에 갱신 비용이 청구됩니다.

• 설정에서 구독을 관리할 수 있으며 구매 후 계정 설정으로 이동하여 자동 갱신을 끌 수 있습니다.

• 무료 평가판 기간 중 미사용 부분은 제공되는 경우 구독 구매 시 자격이 상실됩니다.

"Otter.ai는 기록된 생각을 글로 옮기는 보석입니다" - Forbes 2023

"2019년 우리가 사랑하는 앱" – App Store

"2018년 최고의 앱 7개" – Mashable

"2018년 최고의 신규 앱 25개" – Fast Company

우리는 보안과 프라이버시를 중요하게 생각합니다. 귀하의 데이터는 기밀이며 제3자에게 전송되지 않습니다. 귀하는 귀하의 계정에서 귀하의 데이터를 삭제할 수 있는 모든 권한이 있습니다.

도움이 필요하다? 도움말 센터를 확인하세요: https://help.otter.ai

서비스 약관: https://otter.ai/terms-of-service

개인 정보 보호 정책: https://otter.ai/privacy-policy  

Automated meeting notes for Zoom, Google Meet, Microsoft Teams, and more. Stay connected and collaborative when you work from home.

OtterPilot™ your meetings with AI. Get a meeting assistant that records audio, writes notes, automatically captures slides, and generates summaries.

Otter transcribes all your meetings, interviews, lectures, and everyday voice conversations in real time, so you can focus on the discussion. Get automated notes for: in-person, Zoom, Google Meet, and Microsoft Teams. All notes are searchable, and shareable. Otter.ai is also available on the web. English only.

Many Uses

• Take meeting notes automatically, and share with teammates to keep everyone in sync

• Record and transcribe interviews, lectures, podcasts, videos, webinars, keynotes

• Provide live captioning to the deaf and hard-of-hearing communities, ESL learners, and anyone with accessibility needs

Record & Transcribe Live

• Record instantly in one tap, with widget and shortcut too

• Transcribe in real time (when online) with high accuracy

• Highlight the key points to review later

• Insert photos of whiteboard discussions, slides, etc.

• Input audio via built-in mic or Bluetooth device

Enrich Notes with AI

• Punctuate, capitalize, and break paragraphs automatically

• Identify speakers (after some training)

• Generate word clouds and summary keywords; tap on a word to jump to where it was said

• Automated Slide Capture during virtual meetings

• Automated Summary after all meetings

Share & Collaborate

• Start a recording inside a group to share the transcript live

• Invite group members to view, edit, and highlight collaboratively. All highlights will be captured in the Takeaways panel.

• Within the Takeaways panel, add comments and assign action items

• Share externally via links

Search & Playback

• Search the text so you don't have to scrub through the whole audio

• Playback at adjustable speeds

• Follow along the highlighted word as the audio is playing

• Tap on any word to jump the audio to that spot

Edit & Highlight

• Edit the text to correct any errors

• Tag the speakers to label the paragraphs and train Otter to identify speakers too

• Highlight sentences in one tap

Organize & Export

• Organize conversations into personal folders

• Copy to clipboard, or share directly to other apps

• Export as PDF, TXT, SRT, MP3

Import & Sync

• Import audio and video files

• Sync your Zoom account to transcribe cloud recordings

• Upload from other call recording apps

• Sync your calendars to be reminded to record your meetings and auto-title your notes

• Import your contacts for easy sharing

Optimized for iOS

• Start/Stop recording with Siri Shortcut & home widget

• Record via AirPods

• Sync with iOS Calendar, Contacts & Camera

• Preview conversations with 3D Touch

• Lock with Face/Touch ID

• Print via AirPrint

• Adjust font size with Dynamic Type

Otter Pro

• More playback speeds and skip silence

• Bulk export

• Choose either monthly billing or save big with yearly billing

• Payment will be charged to your iTunes Account at confirmation of purchase

• Subscription automatically renews unless auto-renew is turned off at least 24-hours before the end of the current period

• Account will be charged for renewal within 24-hours prior to the end of the current period

• You can manage your subscriptions in Settings and auto-renewal may be turned off by going to your Account Settings after purchase

• Any unused portion of a free trial period, if offered, will be forfeited when you purchase a subscription

“Otter.ai Is A Gem For Transcribing Your Recorded Thoughts Into Writing” - Forbes 2023

"Apps We Love 2019" – App Store

"7 Best Apps of 2018" – Mashable

"25 Best New Apps of 2018" – Fast Company

We take security and privacy seriously. Your data is confidential and will not be transferred to third parties. You have full control to delete your data from your account.

Need help? Check out our Help Center: https://help.otter.ai

Terms of Service: https://otter.ai/terms-of-service

Privacy Policy: https://otter.ai/privacy-policy

What is Flutter Impeller?

https://blog.nonstopio.com/flutter-impellers-d18d47a809d9

Credits: wikiHow

Flutter 3.10 introduces Impeller in iOS apps by default. So these iOS apps will have less jank and better consistent performance. And for Android, Impeller is in the development phase. But we should know what Impeller is.

Impeller is a new renderer within Flutter’s engine. Until now, Flutter has been using Skia. Skia has built-in rendering features which can be used for various devices. But Skia is not always optimized solution for Flutter’s needs.

Before going further, let’s see

The basic Scenario of Impeller is that (check this issue)-

If we had a static set of shaders, we could asynchronously compile them on program startup, so that by the time the application runs an animation we can use this static set and not stutter while we prepare a new one.

Medium term we could also determine what specialized shaders we would want to use in each scene, and compile them in the background so that the next time, if all the specialized shaders we would want to use are ready, we could just use them. That way we get the long-term sustained performance benefits of specialized shaders and the short-term smooth start performance benefits of a static shader set.

Yes, our main goal is to eliminate jank or any stuttering that’s happening inside your app. But first, we should know what is Renderer.

Renderer software helps to translate the code into the pixels that are visible on the screen.

Whenever we build any widget into the Flutter that goes into some steps like Widget Tree -> Element Tree -> Render Object Tree.

But what happened after that? We will go step by step.

1. Display List — Render objects contain the instruction for how to actually layout and how that widget should be painted, in the form of instructions, and those instructions are given to the engine as a simple command, which is called Display List. Now an engine will decide whether the widget should be rendered either using Impeller or Skia.

2. Render Pipelines — Render Pipelines that can be used to render everything given in the Display List.

3. Shader — A Shader is nothing but a small piece of code that gets executed on the graphics device.

4. Rasterization — Shaders take the vertices (say for ex. Flutter Logo) and it will move them on the screen where exactly we want to draw it. This process will iterate through all the given triangles of this Flutter Logo(Ex. Fig.1). For each vertex into say triangle of any image, we figure out the specific pixels that are inside it, and this is called rasterization.

Fig. 1 (Ref)

But wait...

Those Shaders and Render Pipeline need compilation to get instructed by the GPU so that GPU can execute it.

AND THIS COMPILATION PROCESS IS VERY EXPENSIVE.

And that’s how Impeller comes into the picture. Let’s discuss this issue in detail.

Shader Compilation Jank Issue —We know that Shaders are the low-level code given to GPU to draw UI on screen.

Skia compiles and generates these shaders (at runtime) when running app for the first time. The generation of shaders requires quite a bit of time(approx. 200ms or more depending on the situation) and this causes the frame, which can’t be rendered within 16ms to jank. This jank is called shader-compilation-jank.

Impeller resolved this issue by pre-compiling a smaller, simpler set of shaders at build time.

First, we will see how exactly Impeller Architecture works,

Now let’s take this Display List and draw it using Impeller.

Impeller Architecture

1. Aiks — The Display List operations are dispatched to Aiks. Aiks is the topmost layer of Impeller and it mainly contains the canvas drawing API.

2. Entity — Aiks takes the higher level commands from the DisplayList and translates them into the simpler self-contained drawing operations called Entities.

3. Contents of Entity — These are the Content Objects of the Entity, and it contains the actual GPU instructions need to draw the Entity.

4. Hardware Abstraction Layer [HAL] — Impeller needs some kind of translation layer by which it can communicate with the GPU, which called as Hardware Abstraction Layer. Render Pipelines contain the Shaders, and each Content of Entity uses the HAL to draw itself by giving instructions to GPU to render these Shaders. This HAL talks to the graphics driver through various standard graphics APIs like Metal on iOS and Vulcan on Android. And then this is how the resulting texture gets displayed on the screen.

Impeller generates and compiles all necessary Shaders (ahead of time) when we build the Flutter Engine. Therefore apps running on Impeller will have a predefined set of Shaders they need, and the shaders can be used without introducing jank into animations. This operation can be done by using Impellerlc Shader Compiler.

Impellerlc Shader Compiler — Impeller has a set of handwritten shaders compiled in advance. Impeller precompiles a smaller, simpler set of shaders at Engine build time so they don’t compile at runtime.

After a preview period since January 2023, Impeller is now on-by-default on iOS in a stable branch. Android up next.

Impeller Architecture

How to Enable Impeller ?

Here, I have taken this example and tried to run it from the IDE (Android Studio).

Pre-Impeller build

Can you see that, the app got stuck at a very early stage of the app run.

Now as per this, to see what direction Android support will take, experiment with Impeller in the 3.7 or later stable release, I enabled Impeller for Android and tried to run the same app from scratch. And got the below observations.

Post-Impeller build

Here, the animation runs smoothly after enabling Impeller.

Hope you enjoyed this article!

Here to make the community stronger by sharing our knowledge. Follow me and my team to stay updated on the latest and greatest in the web & mobile tech world.

Ref:

1] Introducing Impeller

2] Impeller Rendering Engine

3] Shader compilation jank

4] Smaller, simpler set of shaders

What’s new in Flutter 3.10

https://nyonggodwill11.medium.com/whats-new-in-flutter-3-10-c54124eee63b