반응형

https://devdocs.io/

 

DevDocs

Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.

devdocs.io

DevDocs는 여러 API 문서를 빠르고 체계적이며 검색 가능한 인터페이스로 결합합니다. 시작하기 전에 알아야 할 사항은 다음과 같습니다.

  1. 기본 설정을 열어 더 많은 문서를 활성화하고 UI를 맞춤설정하세요.
  2. 마우스를 사용할 필요가 없습니다. 키보드 단축키 목록을 참조하세요 .
  3. 검색은 퍼지 일치를 지원합니다(예: "bgcp"는 "Background-clip"을 나타냄).
  4. 특정 문서를 검색하려면 해당 이름(또는 약어)을 입력한 다음 Tab을 누르세요.
  5. 브라우저의 주소 표시줄을 사용하여 검색할 수 있습니다. 방법을 알아보세요 .
  6. DevDocs는 오프라인 , 모바일에서 작동하며 웹 앱으로 설치할 수 있습니다.
  7. 최신 뉴스를 보려면 @DevDocs를 팔로우하세요 .
  8. DevDocs는 무료이며 오픈 소스 입니다 . 
  9. 코딩이 처음이라면 freeCodeCamp의 오픈 소스 커리큘럼을 확인하세요 .

반응형
반응형

With the rapidly changing technologies, developers are being provided with incredible new tools and APIs. But it has been seen that out of the 100+ APIs, only 5% of them are actively used by developers.

Let’s take a look at some of the useful Web APIs that can help you skyrocket your website to the moon! 🌕🚀

1. Screen Capture API

The Screen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building a screen recorder a piece of cake.

You need a video element to display the captured screen. The start button will start the screen capture.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}
startBtn.addEventListener("click", startRecording);

2. Web Share API

The Web Share API allows you to share text, links, and even files from a web page to other apps installed 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 the Web Share API, you need an interaction from the user. For example, a button click or a touch event.

3. Intersection Observer API

The Intersection Observer API allows you to detect when an element enters or leaves the viewport. This is exceptionally useful for implementing infinite scroll.

 

NOTE: The demo uses React because of my personal preference, but you can use any framework or vanilla JavaScript.

4. Clipboard API

The Clipboard API allows you to read and write data to the clipboard. This is useful for implementing the copy to clipboard functionality.

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. Screen Wake Lock API

Ever wondered how YouTube prevents the screen from being switched off while playing the video? Well, that’s because of the Screen 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 the Screen Wake Lock API if the page is already visible on the screen. Otherwise, it would throw an error.

6. Screen Orientation API

The Screen Orientation API allows you to check the current orientation of the screen and even lock it to 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

The Fullscreen API allows you to display an element or the entire page in full screen.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

NOTE: To use the Fullscreen API too, you need an interaction from the user.

 

 

https://tapajyoti-bose.medium.com/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-12b737ccf594

반응형
반응형

API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스[*], 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.


웹 API 


웹 API는 웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다. 예를 들어 블로그 API를 이용하면 블로그에 접속하지 않고도 다른 방법으로 글을 올릴 수 있다. 그 외에 우체국의 우편번호 API, 구글과 네이버의 지도 API등 유용한 API들이 많으므로, 요즘은 홈페이지 구축이나 추가개편 시 따로 추가로 개발하지 않고 이런 오픈 API를 가져와 사용하는 추세다.

 

https://brunch.co.kr/@operator/65

 

API란 무엇일까? API 쉽게 이해하기

API | API, 쉽게 이해하기 API란? “API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을

brunch.co.kr

 

반응형
반응형

REST API 제대로 알고 사용하기

meetup.toast.com/posts/92

 

REST API 제대로 알고 사용하기 : NHN Cloud Meetup

REST API 제대로 알고 사용하기

meetup.toast.com

목차

  1. REST API의 탄생
  2. REST 구성
  3. REST 의 특징
  4. REST API 디자인 가이드
  5. HTTP 응답 상태 코드

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 설계 시 주의할 점

1) 슬래시 구분자(/)는 계층 관계를 나타내는 데 사용

http://restapi.example.com/houses/apartments http://restapi.example.com/animals/mammals/whales

 

2) URI 마지막 문자로 슬래시(/)를 포함하지 않는다.

URI에 포함되는 모든 글자는 리소스의 유일한 식별자로 사용되어야 하며 URI가 다르다는 것은 리소스가 다르다는 것이고, 역으로 리소스가 다르면 URI도 달라져야 합니다. REST API는 분명한 URI를 만들어 통신을 해야 하기 때문에 혼동을 주지 않도록 URI 경로의 마지막에는 슬래시(/)를 사용하지 않습니다.

http://restapi.example.com/houses/apartments/ (X)

http://restapi.example.com/houses/apartments (0)

 

3) 하이픈(-)은 URI 가독성을 높이는데 사용

URI를 쉽게 읽고 해석하기 위해, 불가피하게 긴 URI경로를 사용하게 된다면 하이픈을 사용해 가독성을 높일 수 있습니다.

 

4) 밑줄(_)은 URI에 사용하지 않는다.

글꼴에 따라 다르긴 하지만 밑줄은 보기 어렵거나 밑줄 때문에 문자가 가려지기도 합니다. 이런 문제를 피하기 위해 밑줄 대신 하이픈(-)을 사용하는 것이 좋습니다.(가독성)

 

5) URI 경로에는 소문자가 적합하다.

URI 경로에 대문자 사용은 피하도록 해야 합니다. 대소문자에 따라 다른 리소스로 인식하게 되기 때문입니다. RFC 3986(URI 문법 형식)은 URI 스키마와 호스트를 제외하고는 대소문자를 구별하도록 규정하기 때문이지요.

RFC 3986 is the URI (Unified Resource Identifier) Syntax document

 

6) 파일 확장자는 URI에 포함시키지 않는다.

 

http://restapi.example.com/members/soccer/345/photo.jpg (X)

 

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라는 도큐먼트로 표현되고 있다고 생각하면 됩니다. 좀 더 예를 들어보자면

 

http:// restapi.example.com/sports/soccer/players/13

 

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를 적어 줘야 합니다.)
500 서버에 문제가 있을 경우 사용하는 응답 코드
반응형
반응형

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>
반응형
반응형

상위 10가지 음성 처리 API의 비교

 

언어 처리는 머신러닝에서 매우 인기 있는 영역입니다. 인간의 발화를 텍스트로 변환하거나 텍스트를 말로 변환하는 일에 상당한 수요가 있지요. 매장이나 공항, 호텔과 같은 다양한 장소에서 셀프 서비스가 발전함에 따라 이 기술은 특히 중요해졌습니다. 기계가 인간의 노동력을 대체하기 위해서는 우리의 언어를 활용해 우리 인간과 소통할 수 있는 능력이 필수적이니까요. 이것이 바로 인공지능과 머신러닝이 언어처리에 집중하는 이유입니다.

 

오늘날 많은 수의 대기업들이 각기 다른 머신러닝 임무를 수행하는 API를 제공하고 으며 언어 처리 영역 또한 예외가 아닙니다. 독자 여러분께서 API를 사용하기 위해 자연어 처리의 전문가가 될 필요는 전혀 없습니다. 일반적으로 API와 함께 현리한 인터페이스가 제공되기 때문이죠. 그렇기 때문에 우리는 API 서버에 요청된 콘텐츠와 함께 HTTP 를 보내주기만 하면 됩니다. 그러면 임무가 성공적으로 완료된 뒤 곧바로 응답을 받을 수 있습니다. 이러한 접근 방식은 여러분의 문제 상황이 특별하지 않은 경우, 다시말해 표준적이고 일반적인 문제 상황을 가지고 있을 경우에 특히 유용합니다. 뿐만아니라, 시간이나 돈과같은 가치있는 자원들을 절약할 수 있는 방식이기도 합니다.

 

그러나 API를 사용하지 못해 직접 스크래치에서 음성 인식 시스템을 개발해야만 하는 상황도 상당히 많이 존재합니다. 이는 꽤 복잡하기도 하며 자원과 노력이 많이 요구되는 일이긴 하지만 결과적으로는 여러분의 필요에 꼭 맞는 이상적인 시스템을 생성할 수 있습니다. 직접 알고리즘을 구축하면 결과의 질이 향상될 가능성도 있죠.

 

하지만 일단 API에 대해 알아두는 것은 유용합니다. 각각의 API가 무엇을 할 수 있고 어떤 장단점이 있는지 등을 알아둠으로써 어떤 상황에 API를 써야하며 어떤API를 써야할지, 혹은 어떤 상황에 시스템을 직접 개발해야만 하는지를 판단할 수 있게 될 것이기 때문입니다. 이번 기사에서는 유명한 음성 처리 API들을 비교해보려고 합니다. 음성 처리에는 크게 두가지 과제가 있는데, 첫째는 말을 텍스트로 바꾸는 것이고, 다른 하나는 텍스트를 사람의 말로 바꾸는 것입니다.

 

다음은 음성 처리를 위한 몇 가지 인기 있는 API 목록입니다.

  • Google 클라우드 음성 API
  • IBM Watson Speech to Text
  • IBM Watson Text to Speech
  • Microsoft Azure Bing 음성 API
  • Amazon Transcribe
  • Amazon Polly

또한 잘 알려지지 않았지만 비슷한 기능을 수행하는 API 제품이 있습니다.

  • VoxSigma API
  • Twilio 음성인식
  • Speechmatics ASR
  • Nexmo Voice API

 

 

 

medium.com/activewizards-machine-learning-company/comparison-of-top-10-speech-processing-apis-2293de1d337f

 

Comparison of Top 10 Speech Processing APIs

Speech processing is a very popular area of machine learning. There is a significant demand in transforming human speech into text and…

medium.com

 

medium.com/@aimap.marker/%EC%83%81%EC%9C%84-10%EA%B0%80%EC%A7%80-%EC%9D%8C%EC%84%B1-%EC%B2%98%EB%A6%AC-api%EC%9D%98-%EB%B9%84%EA%B5%90-7a7ee778d4a3

 

상위 10가지 음성 처리 API의 비교

언어 처리는 머신러닝에서 매우 인기 있는 영역입니다. 인간의 발화를 텍스트로 변환하거나 텍스트를 말로 변환하는 일에 상당한 수요가 있지요. 매장이나 공항, 호텔과 같은 다양한 장소에서

medium.com

 

반응형

'프로그래밍 > App' 카테고리의 다른 글

카톡 오픈채팅 ‘방장봇’ 생긴다  (0) 2020.11.13
googleapis/python-speech  (0) 2020.11.09
안드로이드폰 빠르게 사용하기.속도업!  (0) 2020.11.01
flutter 설치하기  (0) 2020.10.28
Flutter - beacon package  (0) 2020.10.07
반응형

player.vimeo.com

 

Vimeo: 최고의 동영상을 위한 최고의 기능

당신의 멋진 동영상을 위해 특별히 제작된 강력한 동영상 기능. 넉넉한 저장 공간, 포스트프로덕션 및 수익 창출 기능, 고품질 라이브 스트리밍 등 다양한 성능을 즐기세요.

vimeo.com

<div id="made-in-ny"></div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var options = {
        id: 59777392,
        width: 640,
        loop: true
    };

    var player = new Vimeo.Player('made-in-ny', options);

    player.setVolume(0);

    player.on('play', function() {
        console.log('played the video!');
    });
    
    
    //-- 플레이    
    player.play();

</script>
<!-- vimeo embed start, autoplay  -->
<div id="made-in-ny"></div>

<div class="buttons">
    <button id="play-button"   data-method="play">Play</button>
    <button id="pause-button"  data-method="pause">Pause</button> 
</div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var options = {
        id: 465623199,
        width: 640,
        loop: false
    };

    var player = new Vimeo.Player('made-in-ny', options);

    //player.setVolume(0);
    player.setVolume(0.5);
    //player.setVolume(1);
 
    //setTimeout(function(){ player.setVolume(0.5); }, 3000);
    //-- 플레이    
    //player.play();
    //setTimeout(function(){ player.play(); }, 3000);
    
    $("#play-button").click(function(){ player.play(); }); 
    $("#pause-button").click(function(){ player.pause(); }); 
     
</script>
 

github.com/vimeo/player.js

 

vimeo/player.js

Interact with and control an embedded Vimeo Player. - vimeo/player.js

github.com

 

player.vimeo.com/api/demo

 

Vimeo Player API Demo

Text Tracks None

player.vimeo.com

반응형
반응형

Geolocation API 사용하기

developer.mozilla.org/ko/docs/WebAPI/Using_geolocation

 

Geolocation API 사용하기

Geolocation API는 navigator.geolocation 객체를 통해 사용할 수 있습니다.

developer.mozilla.org

Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

 

Geolocation API navigator.geolocation 객체를 통해 사용할 수 있습니다.

geolocation 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.

if('geolocation' in navigator) {
  /* 위치정보 사용 가능 */
} else {
  /* 위치정보 사용 불가능 */
}

 

 

반응형

+ Recent posts