[PeerJS] 실시간 화상 통화 데모 실장편(3) - 카메라 영상 스트리밍
처음에
본고는, 「PeerJS를 사용한 리얼타임 화상 통화의 데모를 실장해 본 시리즈」의 PART(3)이다.
전회까지의 기사에서는, 텍스트 데이터의 수수까지를 기재했습니다.
이번에는 한층 더 한 걸음 밟아 카메라 영상의 실시간 스트리밍(데모)을 구현해 보겠습니다.
실시간 스트리밍 (데모) 구현 절차
2. 에서 취득한 카메라 영상을 상대에게 보낸다. 1. 카메라 영상에 액세스하여 스트림 데이터를 얻는다.
상대의 PeerID를 지정해
peer.call 를 실행하는 것으로, 그 상대를 호출할 수가 있습니다.※상대를 호출할 때 또는 호출에 응답할 때에는 MediaStream을 제공해야 합니다.
Skyway - 공식 문서
소스 코드는 다음과 같습니다.
sample.html
<script type="text/javascript">
let localVideo;
// カメラ、オーディオ等のリソースへアクセス
navigator.mediaDevices.getUserMedia({video : true, audio : true})
.then(function (stream) {
// カメラ、オーディオリソースへのアクセス成功時
// 変数videoStreamに取得したストリームデータを代入
localVideo = stream;
}).catch(function (error) {
// カメラ、オーディオリソースへのアクセス失敗時
// エラー内容をコンソール出力する。
console.log(error);
});
</script>
2. 양쪽 연결을 설정합니다.
[호출하는 쪽]
caller.js
// mediaStreamは自端末のカメラ映像(ストリーミングデータ)
let call = peer.call('reciverId',mediaStream)
[호출되는 쪽]
callee.js
peer.on('call',function(call){
// mediaStreamは自端末のカメラ映像(ストリーミングデータ)
call.answer(mediaStream);
});
[※중요]
상대방을 호출할 때 또는 호출에 응답할 때 MediaStream을 제공해야 합니다.
3. 2. 에서 취득한 카메라 영상을 상대에게 보낸다.
그런 다음
navigator.mediaDevices.getUserMedia()를 사용하여 기기의 카메라 이미지에 액세스합니다.소스 코드는 다음과 같습니다.
[호출측]
caller.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
<video id="local_video" autoplay></video>
<video id="remote_video" autoplay></video>
</body>
<script type="text/javascript">
let localVideo = document.getElementById('local_video');
let RemoteVideo = document.getElementById('remote_video');
let peer = new Peer('senderId',{key : 'we074c3o2tv2huxr'});
navigator.mediaDevices.getUserMedia({video : true, audio : true})
.then(function (stream) {
// カメラ映像、オーディオへのアクセスが成功した場合
// 取得したカメラ映像を相手に送ります。
localVideo.srcObject = stream;
let call = peer.call('reciverId',stream);
if (call != null) {
call.on('stream', function(stream) {
// ストリーミングデータ受信処理
RemoteVideo.srcObject = stream;
});
}
}).catch(function (error) {
// カメラ映像、オーディオへのアクセスが失敗した場合
// エラーの内容をconsole.logで出力します。
console.log(error);
});
</script>
</html>
[호출되는 쪽]
callee.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
<video id="local_video" autoplay></video>
<video id="remote_video" autoplay></video>
</body>
<script type="text/javascript">
let localVideo = document.getElementById('local_video');
let RemoteVideo = document.getElementById('remote_video');
let peer = new Peer('reciverId',{key : 'we074c3o2tv2huxr'});
peer.on('call', function(call){
navigator.mediaDevices.getUserMedia({video : true, audio : true})
.then(function (stream) {
// カメラ映像、オーディオへのアクセスが成功した場合
// 取得したカメラ映像を相手に送ります。
localVideo.srcObject = stream;
call.answer(stream);
call.on('stream', function(stream) {
// ストリーミングデータ受信処理
RemoteVideo.srcObject = stream;
});
}).catch(function (error) {
// カメラ映像、オーディオへのアクセスが失敗した場合
// エラーの内容をconsole.logで出力します。
console.log(error);
});
});
</script>
</html>
검증해 보자. (순서)
호출자의 HTML 파일을 브라우저에서 확인
→ 카메라, 오디오 등의 리소스에 대한 액세스 권한이 필요합니다 (허용).
호출되는 측도 마찬가지로 허가를 한다.
이러한 형태로 표시되면 성공입니다.
실제로 조금 지연이 발생하여 다른 표정이되고 있습니다 w
끝에
외형은 나쁘지만, PeerJS를 사용한 실시간 화상 통화(?)와 같은 것을 만들 수 있었습니다.
물론 서비스로 만들려면 아직 멀지 만 데모를 구현하는 중,
자신, WebRTC에 대한 지식이 깊어진 것 같아요.
끝까지 읽어 주셔서 감사합니다.
또, 끊임없는 문장의 기사입니다만, 「좋아요」를 눌러 주신 여러분,
정말 고마워요.
본 연재는, 이것으로 종료하겠습니다만,
3개의 기사에 관해서는, 앞으로도 수시로 업데이트를 해 나갈 예정이므로,
뭔가 있으면 댓글을 주시면 감사하겠습니다.
이상.
Reference
이 문제에 관하여([PeerJS] 실시간 화상 통화 데모 실장편(3) - 카메라 영상 스트리밍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Futo_Horio/items/c26167d48367f92fe1f3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([PeerJS] 실시간 화상 통화 데모 실장편(3) - 카메라 영상 스트리밍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Futo_Horio/items/c26167d48367f92fe1f3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
