With the rapidly changing technologies, developers are being provided with incredible newtoolsandAPIs. But it has been seen that out of the100+ APIs, only5%of them are actively used by developers.
Let’s take a look at some of the usefulWeb APIsthat can help you skyrocket your website to the moon! 🌕🚀
1. Screen Capture API
TheScreen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building ascreen recordera piece of cake.
You need avideoelement to display the captured screen. Thestartbutton will start thescreen capture.
<video id="preview" autoplay>
Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
TheWeb Share APIallows you to sharetext,links, andeven filesfrom aweb page to other appsinstalled on the device.
async function shareHandler() {
navigator.share({
title: "Tapajyoti Bose | Portfolio",
text: "Check out my website",
url: "https://tapajyoti-bose.vercel.app/",
});
}
NOTE:To use theWeb Share API, you need an interaction from the user. For example, abutton clickor atouch event.
3. Intersection Observer API
TheIntersection Observer APIallows you todetect when an element enters or leaves the viewport. This is exceptionally useful for implementinginfinite scroll.
NOTE:The demo usesReactbecause of my personal preference, but you can useany frameworkorvanilla JavaScript.
4. Clipboard API
TheClipboard APIallows you toread and write datato theclipboard. This is useful for implementing thecopy to clipboardfunctionality.
async function copyHandler() {
const text = "https://tapajyoti-bose.vercel.app/";
navigator.clipboard.writeText(text);
}
5. Screen Wake Lock API
Ever wondered howYouTubeprevents the screen from being switched off while playing the video? Well, that’s because of theScreen Wake Lock API.
let wakeLock = null;
async function lockHandler() {
wakeLock = await navigator.wakeLock.request("screen");
}
async function releaseHandler() {
await wakeLock.release();
wakeLock = null;
}j
NOTE:You can only use theScreen Wake Lock APIif the page is already visible on the screen. Otherwise, it would throw an error.
6. Screen Orientation API
TheScreen Orientation APIallows you to check thecurrent orientationof the screen and evenlock itto a specific orientation.
async function lockHandler() {
await screen.orientation.lock("portrait");
}
function releaseHandler() {
screen.orientation.unlock();
}
function getOrientation() {
return screen.orientation.type;
}
7. Fullscreen API
TheFullscreen APIallows you to display an element or the entire page infull screen.
async function enterFullscreen() {
await document.documentElement.requestFullscreen();
}
async function exitFullscreen() {
await document.exitFullscreen();
}
NOTE:To use theFullscreen APItoo, you need an interaction from the user.
API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스[*], 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.
웹 API
웹 API는 웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다. 예를 들어 블로그 API를 이용하면 블로그에 접속하지 않고도 다른 방법으로 글을 올릴 수 있다. 그 외에 우체국의 우편번호 API, 구글과 네이버의 지도 API등 유용한 API들이 많으므로, 요즘은 홈페이지 구축이나 추가개편 시 따로 추가로 개발하지 않고 이런 오픈 API를 가져와 사용하는 추세다.
REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었습니다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 합니다.
REST 구성
쉽게 말해 REST API는 다음의 구성으로 이루어져있습니다. 자세한 내용은 밑에서 설명하도록 하겠습니다.
자원(RESOURCE)- URI
행위(Verb)- HTTP METHOD
표현(Representations)
REST 의 특징
1) Uniform (유니폼 인터페이스)
Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일을 말합니다.
2) Stateless (무상태성)
REST는 무상태성 성격을 갖습니다. 다시 말해 작업을 위한 상태정보를 따로 저장하고 관리하지 않습니다. 세션 정보나 쿠키정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청만을 단순히 처리하면 됩니다. 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순해집니다.
3) Cacheable (캐시 가능)
REST의 가장 큰 특징 중 하나는 HTTP라는 기존 웹표준을 그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능합니다. 따라서 HTTP가 가진 캐싱 기능이 적용 가능합니다. HTTP 프로토콜 표준에서 사용하는 Last-Modified태그나 E-Tag를 이용하면 캐싱 구현이 가능합니다.
4) Self-descriptiveness (자체 표현 구조)
REST의 또 다른 큰 특징 중 하나는 REST API 메시지만 보고도 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어 있다는 것입니다.
5) Client - Server 구조
REST 서버는 API 제공, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리하는 구조로 각각의 역할이 확실히 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어들게 됩니다.
6) 계층형 구조
REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용할 수 있게 합니다.
REST API 디자인 가이드
REST API 설계 시 가장 중요한 항목은 다음의 2가지로 요약할 수 있습니다.
첫 번째,URI는 정보의 자원을 표현해야 한다. 두 번째,자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.
다른 것은 다 잊어도 위 내용은 꼭 기억하시길 바랍니다.
REST API 중심 규칙
1) URI는 정보의 자원을 표현해야 한다. (리소스명은 동사보다는 명사를 사용) GET /members/delete/1
위와 같은 방식은 REST를 제대로 적용하지 않은 URI입니다. URI는 자원을 표현하는데 중점을 두어야 합니다. delete와 같은 행위에 대한 표현이 들어가서는 안됩니다.
2) 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현
위의 잘못 된 URI를 HTTP Method를 통해 수정해 보면
DELETE /members/1
으로 수정할 수 있겠습니다. 회원정보를 가져올 때는 GET, 회원 추가 시의 행위를 표현하고자 할 때는 POST METHOD를 사용하여 표현합니다.
회원정보를 가져오는 URI
GET /members/show/1 (x) GET /members/1 (o)
회원을 추가할 때
GET /members/insert/2 (x) - GET 메서드는 리소스 생성에 맞지 않습니다. POST /members/2 (o)
[참고]HTTP METHOD의 알맞은 역할 POST, GET, PUT, DELETE 이 4가지의 Method를 가지고 CRUD를 할 수 있습니다.
METHOD 역할
POST
POST를 통해 해당 URI를 요청하면 리소스를 생성합니다.
GET
GET를 통해 해당 리소스를 조회합니다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져온다.
PUT
PUT를 통해 해당 리소스를 수정합니다.
DELETE
DELETE를 통해 리소스를 삭제합니다.
다음과 같은 식으로 URI는 자원을 표현하는 데에 집중하고 행위에 대한 정의는 HTTP METHOD를 통해 하는 것이 REST한 API를 설계하는 중심 규칙입니다.
URI에 포함되는 모든 글자는 리소스의 유일한 식별자로 사용되어야 하며 URI가 다르다는 것은 리소스가 다르다는 것이고, 역으로 리소스가 다르면 URI도 달라져야 합니다. REST API는 분명한 URI를 만들어 통신을 해야 하기 때문에 혼동을 주지 않도록 URI 경로의 마지막에는 슬래시(/)를 사용하지 않습니다.
REST API에서는 메시지 바디 내용의 포맷을 나타내기 위한 파일 확장자를 URI 안에 포함시키지 않습니다. Accept header를 사용하도록 합시다.
GET / members/soccer/345/photo HTTP/1.1 Host: restapi.example.com Accept: image/jpg
리소스 간의 관계를 표현하는 방법
REST 리소스 간에는 연관 관계가 있을 수 있고, 이런 경우 다음과 같은 표현방법으로 사용합니다.
/리소스명/리소스 ID/관계가 있는 다른 리소스명
ex) GET : /users/{userid}/devices (일반적으로 소유 ‘has’의 관계를 표현할 때)
만약에 관계명이 복잡하다면 이를 서브 리소스에 명시적으로 표현하는 방법이 있습니다. 예를 들어 사용자가 ‘좋아하는’ 디바이스 목록을 표현해야 할 경우 다음과 같은 형태로 사용될 수 있습니다.
GET : /users/{userid}/likes/devices (관계명이 애매하거나 구체적 표현이 필요할 때)
자원을 표현하는 Colllection과 Document
Collection과 Document에 대해 알면 URI 설계가 한 층 더 쉬워집니다. DOCUMENT는 단순히 문서로 이해해도 되고, 한 객체라고 이해하셔도 될 것 같습니다. 컬렉션은 문서들의 집합, 객체들의 집합이라고 생각하시면 이해하시는데 좀더 편하실 것 같습니다. 컬렉션과 도큐먼트는 모두 리소스라고 표현할 수 있으며 URI에 표현됩니다. 예를 살펴보도록 하겠습니다.
http:// restapi.example.com/sports/soccer
위 URI를 보시면 sports라는 컬렉션과 soccer라는 도큐먼트로 표현되고 있다고 생각하면 됩니다. 좀 더 예를 들어보자면
sports, players 컬렉션과 soccer, 13(13번인 선수)를 의미하는 도큐먼트로 URI가 이루어지게 됩니다. 여기서 중요한 점은컬렉션은 복수로 사용하고 있다는 점입니다. 좀 더 직관적인 REST API를 위해서는 컬렉션과 도큐먼트를 사용할 때 단수 복수도 지켜준다면 좀 더 이해하기 쉬운 URI를 설계할 수 있습니다.
HTTP 응답 상태 코드
마지막으로 응답 상태코드를 간단히 살펴보도록 하겠습니다. 잘 설계된 REST API는 URI만 잘 설계된 것이 아닌 그 리소스에 대한 응답을 잘 내어주는 것까지 포함되어야 합니다. 정확한 응답의 상태코드만으로도 많은 정보를 전달할 수가 있기 때문에 응답의 상태코드 값을 명확히 돌려주는 것은 생각보다 중요한 일이 될 수도 있습니다. 혹시 200이나 4XX관련 특정 코드 정도만 사용하고 있다면 처리 상태에 대한 좀 더 명확한 상태코드 값을 사용할 수 있기를 권장하는 바입니다. 상태코드에 대해서는 몇 가지만 정리하도록 하겠습니다.
상태코드
200
클라이언트의 요청을 정상적으로 수행함
201
클라이언트가 어떠한 리소스 생성을 요청, 해당 리소스가 성공적으로 생성됨(POST를 통한 리소스 생성 작업 시)
상태코드
400
클라이언트의 요청이 부적절 할 경우 사용하는 응답 코드
401
클라이언트가 인증되지 않은 상태에서 보호된 리소스를 요청했을 때 사용하는 응답 코드 (로그인 하지 않은 유저가 로그인 했을 때, 요청 가능한 리소스를 요청했을 때)
403
유저 인증상태와 관계 없이 응답하고 싶지 않은 리소스를 클라이언트가 요청했을 때 사용하는 응답 코드 (403 보다는 400이나 404를 사용할 것을 권고. 403 자체가 리소스가 존재한다는 뜻이기 때문에)
405
클라이언트가 요청한 리소스에서는 사용 불가능한 Method를 이용했을 경우 사용하는 응답 코드
상태코드
301
클라이언트가 요청한 리소스에 대한 URI가 변경 되었을 때 사용하는 응답 코드 (응답 시 Location header에 변경된 URI를 적어 줘야 합니다.)
google.api_core.exceptions.OutOfRange: 400 Exceeded maximum allowed stream duration of 305 seconds.
"최대 허용 스트림 길이 인 65 초를 초과했습니다." 더 많은 시간 동안 "DEADLINE_SECS"를 수정하려고했지만 작동하지 않았습니다.
5 분마다 예외를 포착하는 것은 최적이 아니지만 작동합니다.
o think about and already seen in your mom about this is more like a summarizing and reflecting you know back and and the ones were doing studi study the first part was a mobile diary and now a lot of the things we're going to talk about during this interview you have already started to think about and already seen in your mom about this is more like a summarizing and reflecting you know back and and the ones were doing studiTraceback (most recent call last): like how was it for the sweetest person consume that you know and
File "C:\__STT\env\lib\site-packages\google\api_core\grpc_helpers.py", line 97, in next
return six.next(self._wrapped)
File "C:\__STT\env\lib\site-packages\grpc\_channel.py", line 416, in __next__
return self._next()
File "C:\__STT\env\lib\site-packages\grpc\_channel.py", line 803, in _next
raise self
grpc._channel._MultiThreadedRendezvous: <_MultiThreadedRendezvous of RPC that terminated with:
status = StatusCode.OUT_OF_RANGE
details = "Exceeded maximum allowed stream duration of 305 seconds."
debug_error_string = "{"created":"@1605234860.496000000","description":"Error received from peer ipv4:216.58.197.234:443","file":"src/core/lib/surface/call.cc","file_line":1062,"grpc_message":"Exceeded maximum allowed stream duration of 305 seconds.","grpc_status":11}"
>
The above exception was the direct cause of the following exception:
Traceback (most recent call last):
File "test.py", line 189, in <module>
main()
File "test.py", line 185, in main
listen_print_loop(responses)
File "test.py", line 124, in listen_print_loop
for response in responses:
File "C:\__STT\env\lib\site-packages\google\api_core\grpc_helpers.py", line 100, in next
six.raise_from(exceptions.from_grpc_error(exc), exc)
File "<string>", line 3, in raise_from
google.api_core.exceptions.OutOfRange: 400 Exceeded maximum allowed stream duration of 305 seconds.
(env) C:\__STT>
언어 처리는 머신러닝에서 매우 인기 있는 영역입니다. 인간의 발화를 텍스트로 변환하거나 텍스트를 말로 변환하는 일에 상당한 수요가 있지요. 매장이나 공항, 호텔과 같은 다양한 장소에서 셀프 서비스가 발전함에 따라 이 기술은 특히 중요해졌습니다. 기계가 인간의 노동력을 대체하기 위해서는 우리의 언어를 활용해 우리 인간과 소통할 수 있는 능력이 필수적이니까요. 이것이 바로 인공지능과 머신러닝이 언어처리에 집중하는 이유입니다.
오늘날 많은 수의 대기업들이 각기 다른 머신러닝 임무를 수행하는 API를 제공하고있으며 언어 처리 영역 또한 예외가 아닙니다. 독자 여러분께서 API를 사용하기 위해 자연어 처리의 전문가가 될 필요는 전혀 없습니다. 일반적으로 API와 함께 현리한 인터페이스가 제공되기 때문이죠. 그렇기 때문에 우리는 API 서버에 요청된 콘텐츠와 함께 HTTP 를 보내주기만 하면 됩니다. 그러면 임무가 성공적으로 완료된 뒤 곧바로 응답을 받을 수 있습니다. 이러한 접근 방식은 여러분의 문제 상황이 특별하지 않은 경우, 다시말해 표준적이고 일반적인 문제 상황을 가지고 있을 경우에 특히 유용합니다. 뿐만아니라, 시간이나 돈과같은 가치있는 자원들을 절약할 수 있는 방식이기도 합니다.
그러나 API를 사용하지 못해 직접 스크래치에서 음성 인식 시스템을 개발해야만 하는 상황도 상당히 많이 존재합니다. 이는 꽤 복잡하기도 하며 자원과 노력이 많이 요구되는 일이긴 하지만 결과적으로는 여러분의 필요에 꼭 맞는 이상적인 시스템을 생성할 수 있습니다. 직접 알고리즘을 구축하면 결과의 질이 향상될 가능성도 있죠.
하지만 일단 API에 대해 알아두는 것은 유용합니다. 각각의 API가 무엇을 할 수 있고 어떤 장단점이 있는지 등을 알아둠으로써 어떤 상황에 API를 써야하며 어떤API를 써야할지, 혹은 어떤 상황에 시스템을 직접 개발해야만 하는지를 판단할 수 있게 될 것이기 때문입니다. 이번 기사에서는 유명한 음성 처리 API들을 비교해보려고 합니다. 음성 처리에는 크게 두가지 과제가 있는데, 첫째는 말을 텍스트로 바꾸는 것이고, 다른 하나는 텍스트를 사람의 말로 바꾸는 것입니다.