WebRTC(skyway)に自作のカスケードは使えますか？
解決したいこと
WebRTC(skyway)に自作のカスケードは使えますか？
現在skywayを使ってビデオチャットを作成しており
そこに自作のカスケードで画像処理をさせたいと考えております。
ですが、全くの初心者なので原理的にできるのかすら分かっていません。
ちなみにカスケードはもう作ってあります。
もしよろしければできるか、できないかと
できる場合はどこにどう導入すれば良いのか教えていただけると幸いです。
現在のビデオチャットのみのコード
HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SkyWay - P2P Media example</title>
<link rel="stylesheet" href="../_shared/style.css">
</head>
<body>
<div class="container">
<h1 class="heading">P2P Media example</h1>
<p class="note">
Enter remote peer ID to call.
</p>
<div class="p2p-media">
<div class="remote-stream">
<video id="js-remote-stream"></video>
</div>
<div class="local-stream">
<video id="js-local-stream"></video>
<p>Your ID: <span id="js-local-id"></span></p>
<input type="text" placeholder="Remote Peer ID" id="js-remote-id">
<button id="js-call-trigger">Call</button>
<button id="js-close-trigger">Close</button>
</div>
</div>
<p class="meta" id="js-meta"></p>
</div>
<script src="//cdn.webrtc.ecl.ntt.com/skyway-4.4.1.js"></script>
<script src="../_shared/key.js"></script>
<script src="./script.js"></script>
</body>
</html>
JSコード
const Peer = window.Peer;
(async function main() {
const localVideo = document.getElementById('js-local-stream');
const localId = document.getElementById('js-local-id');
const callTrigger = document.getElementById('js-call-trigger');
const closeTrigger = document.getElementById('js-close-trigger');
const remoteVideo = document.getElementById('js-remote-stream');
const remoteId = document.getElementById('js-remote-id');
const meta = document.getElementById('js-meta');
const sdkSrc = document.querySelector('script[src*=skyway]');
meta.innerText = `
UA: ${navigator.userAgent}
SDK: ${sdkSrc ? sdkSrc.src : 'unknown'}
`.trim();
const localStream = await navigator.mediaDevices
.getUserMedia({
audio: true,
video: true,
})
.catch(console.error);
// Render local stream
localVideo.muted = true;
localVideo.srcObject = localStream;
localVideo.playsInline = true;
await localVideo.play().catch(console.error);
const peer = (window.peer = new Peer({
key: '9b35b2e4-6c11-40cb-ba21-3a29e386f8b7',
debug: 3,
}));
// Register caller handler
callTrigger.addEventListener('click', () => {
// Note that you need to ensure the peer has connected to signaling server
// before using methods of peer instance.
if (!peer.open) {
return;
}
const mediaConnection = peer.call(remoteId.value, localStream);
mediaConnection.on('stream', async stream => {
// Render remote stream for caller
remoteVideo.srcObject = stream;
remoteVideo.playsInline = true;
await remoteVideo.play().catch(console.error);
});
mediaConnection.once('close', () => {
remoteVideo.srcObject.getTracks().forEach(track => track.stop());
remoteVideo.srcObject = null;
});
closeTrigger.addEventListener('click', () => mediaConnection.close(true));
});
peer.once('open', id => (localId.textContent = id));
// Register callee handler
peer.on('call', mediaConnection => {
mediaConnection.answer(localStream);
mediaConnection.on('stream', async stream => {
// Render remote stream for callee
remoteVideo.srcObject = stream;
remoteVideo.playsInline = true;
await remoteVideo.play().catch(console.error);
});
mediaConnection.once('close', () => {
remoteVideo.srcObject.getTracks().forEach(track => track.stop());
remoteVideo.srcObject = null;
});
closeTrigger.addEventListener('click', () => mediaConnection.close(true));
});
peer.on('error', console.error);
})();
カスケードの方は実行するとウェブカメラが開きその上である動きを検出するようになっています。
ちなみにまだexeファイルのままです
ご指導よろしくお願い致します！
0 likes