I am trying to create a video conference web app using peer/getUserMedia. when I tried to make the connection stream sending/receiving both platform not working I want to make it so the other user can see/hear local user thats in the video session.
this is my code
let localVideo = document.getElementById("local-video")
let remoteVideo = document.getElementById("remote-video")
let peer
function init(userId) {
var config = { 'iceServers': [{ 'urls': ['stun:stun.l.google.com:19302'] }] };
peer = new Peer(userId, config)
listen();
return peer;
}
let localStream
function listen() {
peer.on('call', (call) => {
navigator.getUserMedia({
audio: true,
video: true
}, (stream) => {
localVideo.srcObject = stream
localStream = stream
call.answer(stream)
call.on('stream', (remoteStream) => {
remoteVideo.srcObject = remoteStream
remoteVideo.className = "primary-video"
localVideo.className = "secondary-video"
})
})
})
}
function startCall(otherUserId) {
navigator.getUserMedia({
audio: true,
video: true
}, (stream) => {
localVideo.srcObject = stream
localStream = stream
const call = peer.call(otherUserId, stream)
call.on('stream', (remoteStream) => {
remoteVideo.srcObject = remoteStream
remoteVideo.className = "primary-video"
localVideo.className = "secondary-video"
})
})
}
// html
<!DOCTYPE html>
<html>
<head>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
<video class="secondary-video" autoplay id="remote-video"></video>
<video class="primary-video" autoplay muted id="local-video"></video>
<script src="./call.js"></script>
</body>
</html>
any help ???