Skywayを使ってビデオ通話できるようにしたい
やりたいこと
Skywayを使ってビデオ通話できるようにしたい。
発生している問題
発信者と着信者のカメラの映像は取得できているが、音声だけが拾えない。
環境
・MacでローカルサーバーはMAMPを使用している。
・MAMPのMYSQLバージョンは5.7.30
・ブラウザではカメラも音声も使用を許可している。
・Skywayの公式サイトのコードを使用している。
<html>
<head>
<title>Video chat</title>
<link rel="stylesheet" href="style.css" />
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"
></script>
<!-- <script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js"></script> -->
</head>
<body>
<div class="pure-g">
<!-- Video area -->
<div class="pure-u-2-3" id="video-container">
<video id="my-video" width="400px" autoplay muted playsinline></video>
<p>MY ID: <span id="my-id"></span></p>
<input id="their-id"></input>
<button id="make-call">call</button>
<video id="their-video" width="400px" autoplay muted playsinline></video>
</div>
<!-- Steps -->
<div class="pure-u-1-3">
<h2>PeerJS Video Chat</h2>
<!-- Get local audio/video stream -->
<div id="step1">
<p>
Please click `allow` on the top of the screen so we can access your
webcam and microphone for calls.
</p>
<div id="step1-error">
<p>
Failed to access the webcam and microphone. Make sure to run this
demo on an http server and click allow when asked for permission
by the browser.
</p>
<a href="#" class="pure-button pure-button-error" id="step1-retry"
>Try again</a
>
</div>
</div>
<!-- Make calls to others -->
<div id="step2">
<p>Your id: <span id="my-id">...</span></p>
<p>Share this id with others so they can call you.</p>
<h3>Make a call</h3>
<div class="pure-form">
<input type="text" placeholder="Call user id..." id="callto-id" />
<a href="#" class="pure-button pure-button-success" id="make-call"
>Call</a
>
</div>
</div>
<!-- Call in progress -->
<div id="step3">
<p>Currently in call with <span id="their-id">...</span></p>
<p>
<a href="#" class="pure-button pure-button-error" id="end-call"
>End call</a
>
</p>
</div>
</div>
</div>
<script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js"></script>
<script>
console.log("This is before camera");
// カメラ映像取得
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
// 成功時にvideo要素にカメラ映像をセットし、再生
const videoElm = document.getElementById("my-video");
videoElm.srcObject = stream;
console.log(videoElm.srcObject);
console.log("This is success");
videoElm.play();
// 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく
localStream = stream;
})
.catch((error) => {
// 失敗時にはエラーログを出力
console.error("mediaDevice.getUserMedia() error:", error);
return;
});
console.log("This is after camera");
//Peer作成
const peer = new Peer({
key: "ここには自分のAPIキーを入力している",
debug: 3,
});
//PeerID取得
peer.on("open", () => {
document.getElementById("my-id").textContent = peer.id;
});
// 発信処理
document.getElementById('make-call').onclick = () => {
console.log("This is calling");
const theirID = document.getElementById('their-id').value;
const mediaConnection = peer.call(theirID, localStream);
setEventListener(mediaConnection);
};
// イベントリスナを設置する関数
const setEventListener = mediaConnection => {
mediaConnection.on('stream', stream => {
// video要素にカメラ映像をセットして再生
const videoElm = document.getElementById('their-video')
videoElm.srcObject = stream;
videoElm.play();
});
}
//着信処理
peer.on('call', mediaConnection => {
console.log("This is reciving calling");
mediaConnection.answer(localStream);
setEventListener(mediaConnection);
});
// Peer（相手）との接続が切れた際に発火します。
peer.on('close', () => {
alert('通信が切断しました。');
});
</script>
</body>
</html>
参考サイト
具体的な正解コードが分かる方、
よろしくお願い致します！
0
