WebRTC를 이용한 프로젝트를 2년 넘게 진행하면서, 참고 자료들이 모두 외국자료들이라
저 또한 언어의 장벽에서 항상 느림보가 돼야만 했습니다.
WebRTC 연구실 이란 말은 다소 거창하지만, WebRTC를 배워보고 싶어하는 분들이 조금더 진입하기 쉽게 하는것을 목적으로 제가 알게된 정보들을 다듬어서 바로 사용할 수 있는 예제 공간으로 만들었습니다.
https://webrtclab.herokuapp.com/ (무료 도메인이라 약간 느립니다)
요즘 여유가 없어서 처음 계획했던 주제를 모두 포함하진 못했지만, 시간을 내서 예제도 조금 더 추가할 예정입니다.
좋은 정보들 이네요
저 또한 WebRTC 정보를 목말라 하는 일인 입니다
안드로이드 채팅어플 개발시 화상 통화 부분을 WebRTC기반으로 구현 한적이 있네요
서버는 java vert.x socket.io 기반으로 구현을 했었고 안드로이드는 아예 어플에 CrossWalk 로 크롬브라우저를 사용하도록 개발을 했었습니다
어플의 크기가 커지는 단점이 있지만 기기특성을 타면 안되니..
나름 2년간의 연구성과를 공개하시다니 대단하시네요 좋은 정보들 감사합니다
대단한 자료는 아니지만, 처음 시작하는 분들에게 조금이나마 도움이 될까싶어 만들어보았습니다. 관심 갖어주셔서 감사합니다 ^^
안녕하세요!! 백엔드쪽을 공부하고있는학생입니다.. 이번에 Spring을 기반으로 해서 project를 준비하고있었는데 webRTC 와 Speech API를 적용해보고싶어서 알아보던중 우연히 들리게되었습니다.
하지만 제가 아직 프론트엔드쪽에 대한 지식도 많이 부족하고, webRTC와 Speech API 에 대한 지식이나 API문서를 읽는것도 아직 힘들어서 정말 고생하고있었는데 이렇게 상세하고 좋은글을 공유해주셔서 진심으로 감사드립니다!!! 처음으로 이러한 기술들을 접하고있지만 정말 많은 도움이될것같습니다. 공유해주신 정보는 열심히 분석해서 사용해보겠습니다!! 시간여유가 되신다면 구동(?) 예제같은것도 올려주신다면 감사하겠습니다..ㅠㅠ 저같은 왕초보는 node.js 에 대한 지식도 부족하여.. 어떻게 구동을 시켜야하는지 , html 페이지에 script 코드로 작성만하면 되는건지 정확히 분별이 가지가않습니다만 !! 기다리면서 혼자 열심히 분석해보도록하겠습니다. 다시한번 너무너무 감사드립니다 복받으실거에요!!
1. Speech API는 크롬 브라우저가 내장하고 있기 때문에 HTML과 Script만으로 구동 가능합니다.
하지만, 보안 정책상 마이크 인터페이스에 접근 하려면 localhost 서버 또는 HTTPS 프로토콜을 지원하는 서버에서만 가능합니다.
우선 사용하시는 언어로 localhost 서버를 구성한다면 Speech API는 바로 사용 가능합니다.
2. WebRTC는 클라이언트끼리 연결하기위한 정보를 주고받는 용도의 시그널링 서버가 필수적입니다.
참고가 되신다니 저도 기쁘네요~
백엔드와 클라이언트 모두 관심을 갖고 공부하시면 좋은 개발자가 되실꺼에요 ^^
답변감사드립니다!! 계속 알아보고있었는데 한가지 여쭤보고싶은점이있습니다.
귀하께서 무료도메인으로 사용하고계시는 heroku 사이트에대한 정보도 많이 찾아보았는데 얇팍한 저의 지식으로는 저같은 사람들의 외부접근과 node.js 서버로 사용하시기위해서 사용하시는게맞나요? 저는 지금 해당 예제를보고 분석을하면서 따라해보려고 시도하고있습니다만! 현재까지 저의 성과로는 node.js 를 설치해서 webRTC의 샘플코드를 실행시켜서
단방향으로 화상화면을 띄우는것까지는 성공했습니다만, 말씀해주신대로 클라이언트끼리 연결하기위해서는 시그널링 서버가 필수적이라고하셨는데 이것또한 마찬가지로 저는 localhost에서 서버를 개방시켜주고 양방향 통신을 진행해보고싶은데 node.js로 시그널링 서버를 구동시켜준 상태에서 해당 html 페이지로 접속해서 양방향 통신을 진행하면 되는건가요?? 아직 이해가 가지않는 부분이 많아서 이렇게 실례를 무릅쓰고 질문남겨봅니다! 감사합니다.
저도 nodejs로 서버를 구축 하였으며, 개발시에는 localhost에서 가능합니다.
heroku 사이트는 nodejs로 개발한 결과물을 공인 도메인에 올리려고 사용한 것입니다. (필수는 아니며 개발시 생각 안하셔도 됩니다.)
시그널링 과정 간단히 설명 드리면 아래와 같습니다.
1. WebRTC는 P2P 구조를 가지고 있습니다.
2. 우선 P2P로 브라우저가 서로 연결을 하려면 시그널링 과정을 거쳐야 하는데요
3. 두 클라이언트가 연결하기 위해서 필요한 정보를 주고 받는 과정을 시그널링이라고 합니다.
4. nodejs는 socket.io를 사용하여 소켓(시그널링) 서버를 어렵지 않게 구축할 수 있습니다.
5. 소켓서버가 구축된 후면 이제 WebRTC 연결 준비가 된것입니다.
여기까지 진행 하신 후 WebRTC PeerConnection() 에 대해 공부하시면 됩니다.
제 코드와 https://www.html5rocks.com/ko/tutorials/webrtc/basics/ 같이 참고하시면 좋을꺼에요~!
감사합니다!! 많은 도움이 되었습니다 ^^.
와~ 대단하네요 ~! 오늘부터 여기서 공부 시작해보겠습니다! 감사합니다
안녕하세요
올리신 예제들의 도움을 마니 받았습니다 참 고마운 글들입니다
혹시 음성 통화 기능만 넣어 통화 부분만 가능하도록 할 경우
안드로이드폰에서 브라우저로 열고 사용 시 스피커폰 말고 EARPIECE를 이용하여 통화가 가능하도록 가능 할지요
audiooutput 으로 검색을 해봐도 아예 EARPIECE는 검색이 안되는군요
input은 잘 검색이 되는데 말입니다. 아예 세팅이 스피커로 고정이 된 건지…
해결 방법은 없을지요?
안드로이드 네이티브로 개발을 하면 가능 할거도 같긴 하지만 웹뷰로 불러서 음성 통화가 가능하도록 하려고 진행중이라 질문 한번 드려봅니다.
감사합니다.
자답…ㅎㅎ 안드로이드 네이티브 코드로 해결 했습니다…웹으로는 방법을 못 찾았습니다
예제가 도움이 되었다니 다행입니다 ^^
안드로이드 테블릿 경우 이어폰을 꼽으면 기본 audio input output이 이어폰으로 출력 되는걸 확인했습니다.
특별히 WebRTC 음성만 이어폰으로 들리지 않는것도 아이러니 합니다.
아래 사이트는 audio output device를 테스트 할 수 있는곳인데 한번 참고해 보세요.
https://webrtc.github.io/samples/src/content/devices/multi/
증상이 다른 디바이스에서도 공통이라면 말씀하신데로 네이티브 단에서 핸들링하는게 정신 건강에 도움이 될 것 같아요~
좋은 자료네요
화상 관련 채팅개발을 하고 있는데 막히는 부분이 많아서 개발의뢰를 맡기고 싶은데요
가능하신지요?
메일을 주시면 연락하겠습니다.
안녕하세요!
코드를 보다가 궁금한 점이 생겨서 질문을 좀 남기고 싶습니다
1대1 화상회의 코드를 보면 getUserMedia -> PeerConnection -> CreateOffer 이런 식으로 진행이 되는데 PeerConncection, CreateOffer는 링크를 타고 들어온 상대(원격 유저)가 isOffer라는 falg를 true로 바꿀 때만 실행이 되는 걸로 되어있습니다.
궁금한 점은 처음 먼저 방을 열어두고 있던 Local은 언제 PeerConncection과 Offer메시지를 만드는지 궁금합니다. LocalUser는 처음 자기가 회의 시작 버튼을 눌렀을 때 빼곤 getUserMedia 함수를 실행하는 것 같지 않은데..통신을 하려면 로컬도 peerConnection 인스턴스나 sdp를 만들어야 할텐데 이게 어느 시점에 생성이 되는지 개발자 도구로 쫓아다녀도 잘 모르겠습니다ㅜ 대략적으로 설명을 부탁드려도 될까요?
채팅방이라고 생각하시면 쉽습니다.
웹소켓 통신이기 때문에 현재 방에 누군가 들어오거나, 누군가 이미 있다는걸 알 수 있습니다.
offer는 어디서 먼저 보내도 상관 없습니다. 받은사람은 answer로 답하면 됩니다.
일반적인 flow는 다음과 같이 구현하면 됩니다.
방장은 getUserMedia한 상태로 대기.
참여자가 접속시 참석한 방의 방장에게 offer를 먼저 보내면서 시그널링 과정의 시작을 알립니다.
참여자 offer 전송 -> 방장은 offer를 수신하면 peerConnection의 createAnswer로 답하는 플로우를 생각하시면 됩니다.
좀 더 자세한 flow 정리한 내용 첨부드립니다.
http://www.evernote.com/l/AJOJTkzTf8ZCe57tkjRYFEqtf7LCtOnwOoU/
좋은 자료 감사합니다.
제가 easyrtc나 simplertc등 인터넷 예제들을 다운받아서 컴에서 실행시키면 화상도 잘 나오고 하는데요,,,dothome이나 호스팅업체 제 계정에 업로드해서 확인하면 캠영상도 안나오고 작동을 안하는것 같은데,,,,어떻게 해야하나요?
가장 먼저 확인해볼 사항은 도메인의 프로토콜이 https 맞나 입니다.
webrtc는 https환경에서만 미디어를 얻어 올 수 있습니다~!
안녕하세요. 좋은 자료 감사드립니다~
웹개발을 공부하는 학생으로 진행중인 프로젝트에서 webRTC를 사용하는데요.
freenom에서 무료 도메인을 만들었고,
클라우드플레어를 통하면 https로 접속할 수 있다고 하여서 시도해봤는데 실패했습니다..
OpenSSL이나 인증서를 받는 사이트도 해보았지만 되지 않아서 질문하게 되었습니다.
어떤 방법으로 https를 사용하셨는지 궁금합니다.
웹호스팅이 필요한지, js파일 코드를 수정해야 하는지…
답변 남겨주시면 정말 감사하겠습니다~
무료 호스팅도 있으니 스터디 목적이라면 굳이 유료 호스팅을 구매할 필요는 없습니다.
WebRTC는 제약사항이 다음과 같습니다.
1. GetUserMedia API는 HTTPS 필수이다 (개발시에는 http://localhost 로 접근 가능)
2. P2P연결을 해보려면 시그널링 서버(두 Peer의 정보를 교환할 목적)가 필요합니다.
위 두가지가 가능한것을 찾다가 herokuapp 에서 계정별 node서버 하나를 무료로 제공하는것을 알고 그 쪽으로 연결하였습니다.
제 서버는 node.js (+ socket.io)로 구성되어있습니다.
단순히 HTTPS를 지원하는것이 목적이라면 github에서 제공하는 gitpage를 이용해도 됩니다.
깔끔하게 많은 정보를 제공해주셔서 너무 감사합니다. 도움되는 정보가 많아서 자주 찾아보고 있습니다.
개발과정중 WebRTC의 P2P통신에 대해 궁금한게 있어서 실례를 무릅쓰고 질문드립니다.
현재 제가 개발하고 있는 프로젝트는 node로 시그널링 서버를 구축하였고,
안드로이드 클라이언트에서 PeerConnection을 이용하여 클라이언트간에 스트리밍 데이터를 주고받고 있습니다.
그런데 서비스할 업체의 방화벽 정책상 포트를 제한하기때문에 클라이언트에서 임의로 생성하는 피어 포트를 사용하기 힘들다는 문제가 생겼습니다.
그래서 여기저기 방법을 검색해봤는데 제 실력으로는 특정 포트를 지정하는 방법을 찾을수가 없었습니다.
번거로우시겠지만, 클라이언트의 특정 포트나 특정 포트 범위를 지정할 수 있는 방법을 알고 계시거나 도움되는 자료가 있으시면 도움좀 요청드립니다.
작은 힌트라도 정말 감사하게 생각하겠습니다.
날씨가 점점 추워지는데 항상 건강하시길 바랍니다.
WebRTC는 연결을 위해 각 피어가 시그널링 과정에서 가능한 연결 가능한 ip와 port 정보를 교환하는데요.
그럼에도 불구하고 연결이 안되는 환경에서는 TURN 서버가 필요합니다.
P2P가 불가한 환경에서 미디어 전송용 TURN Relay 서버 (기본 3478 port)를 구성하는 방법을 검토해 보시는건 어떨까요?
안녕하세요. 본인의 배움을 이렇게 공개하는게 쉬운게 아닌데 대단하시네요
좋은 자료 감사합니다.
궁금한게 있는데 Speech Recognition API 는 부분적으로만 무료이고 일정 사용량이 넘어가면 유료로 전환되는걸로 알고있는데 맞나요?
크롬 브라우저에 내장되어 있는 API는 시간의 제한은 있지만 횟수의 제한은 없는것으로 알고 있습니다.
약 2년전? 구글에서 클라우드로 제공하는 Cloud Speech-to-Text를 유료로 오픈했습니다.
아마 구글이 보다 정교한 STT API를 서비스하기 위해 크롬 브라우저나 안드로이드에 OpenAPI를 공개하는 듯 합니다.
안녕하십니까?
지금 현재 어떤일을 하고 계신지요?
화상회의 솔루션을 WebRTC를 사용하여 개발하려고 하는데
혹시 개발해 놓은 프로그램이 있으신가요? 실제 운용이 가능한….
아님 개발이 가능하신가요?
1:1, 1:다, 녹화된 동영상 시청….
답장 부탁드립니다.