I am trying to develop a video chatroulette platform, I am using Peer js and AJAX, PHP and MYSQL to manage the backend part, that is the sessions.
So when I click on 'chat now' I will be redirected to video.php, the following AJAX code will be executed:
function searchSession(){
$.ajax({
type:"post",
url:"php/enterInVideoSession.php",
data:
{
},
cache:false,
success: function (html)
{
console.log(html)
var json = JSON.parse(html);
if(json.event == 'make'){
createRoom(json.sessionId)
}else if(json.event == 'join'){
joinRoom(json.sessionId)
}
}
});
return false;
}
So if no session was found, the function will return 'make', so we will make a new session with the session id returned by the ajax call:
function createRoom(room) {
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then( stream => {
window.localStream = stream;
window.localAudio.srcObject = stream;
window.localAudio.autoplay = true;
}).catch( err => {
console.log("u got an error:" + err)
});
console.log("Creating Room")
room_id = PRE + room + SUF;
peer = new Peer(room_id)
peer.on('open', (id) => {
console.log("Peer Connected with ID: ", id)
navigator.getUserMedia({ video: true, audio: true }, (stream) => {
local_stream = stream;
setLocalStream(local_stream)
}, (err) => {
console.log(err)
})
notify("Waiting for peer to join.")
})
peer.on('call', (call) => {
call.answer(local_stream);
call.on('stream', (stream) => {
setRemoteStream(stream)
})
currentPeer = call;
})
}
Otherwise if we have 'join' we will have to join a room already created and therefore sessionId will be the ID of the room we will have to join, so we will go to join the room by running this function:
function joinRoom(room) {
console.log("Joining Room")
room_id = PRE + room + SUF;
peer = new Peer()
peer.on('open', (id) => {
console.log("Connected with Id: " + id)
navigator.mediaDevices.getUserMedia({ video: true, audio: true }, (stream) => {
local_stream = stream;
setLocalStream(local_stream)
notify("Joining peer")
let call = peer.call(room_id, stream)
call.on('stream', (stream) => {
setRemoteStream(stream);
})
currentPeer = call;
}, (err) => {
console.log(err)
})
})
}
The error I'm getting is in the session creation function.
TypeError: Cannot set properties of undefined (setting 'srcObject')
so the problem lies in this piece of code: navigator.mediaDevices.getUserMedia: navigator.mediaDevices.getUserMedia.....
When a user joins he will not share neither the audio nor the video with the other user, you will only be able to see your own video
Is there a way to solve this problem?
this is the url project: https://randoot.com
The error is that can't set "whatever" on undefined
. This is this line of code:
window.localAudio.srcObject = stream;
and it means localAudio
is undefined. what is it supposed to be?
Try first
var element = document.createElement('audio');
document.body.appendChild(element)
window.localAudio = element;