Hai, I am developing a recording app with openvidu. So it will open camera and screen to the same session and then record the session.
As you can see in the image above when desktop stream join the session it causes the event sessionCreated of webcam stream executed.
this is the result of the recording and this is what i expected (no duplicate for each stream)
below is my code
client.js
const start_btn = document.getElementById('start-record')
const stop_btn = document.getElementById('stop-record')
const token_webcam_btn = document.getElementById('token-webcam-btn')
const token_desktop_btn = document.getElementById('token-desktop-btn')
let OVWebcam = new OpenVidu()
let OVDesktop = new OpenVidu()
let sessionWebcam, sessionDesktop
let publisherWebcam, publisherDesktop
let forceRecordId
token_webcam_btn.onclick = ()=> {
getToken(function() {
console.log('get token callback webcam')
sessionWebcam = OVWebcam.initSession();
sessionWebcam.on('connectionCreated', event => {
console.log('connectionCreated webcam')
});
sessionWebcam.on('streamCreated', event => {
console.log('streamCreated webcam')
const subscriberWebcam = sessionWebcam.subscribe(event.stream, 'video-container');
subscriberWebcam.on('videoElementCreated', event => {
console.log('videoElementCreated webcam')
});
subscriberWebcam.on('streamPlaying', event => {
console.log('streamPlaying webcam')
});
});
sessionWebcam.connect(token)
.then(() => {
console.log('connecting webcam')
publisherWebcam = OVWebcam.initPublisher('video-container', {
audioSource: undefined,
videoSource: undefined,
publishAudio: true,
publishVideo: true,
resolution: '640x480',
frameRate: 30,
insertMode: 'APPEND',
mirror: false
});
publisherWebcam.on('streamCreated', event => {
console.log('streamCreated webcam')
});
publisherWebcam.on('videoElementCreated', event => {
console.log('videoElementCreated webcam')
});
publisherWebcam.on('streamPlaying', event => {
console.log('streamPlaying webcam')
});
sessionWebcam.publish(publisherWebcam);
// GET TOKEN DESKTOP TOO
// token_desktop_btn.click()
})
.catch(error => {
console.warn('There was an error connecting to the session:', error.code, error.message);
});
return false;
}, 'test123');
}
token_desktop_btn.onclick = ()=> {
getToken(function() {
console.log('get token callback desktop')
sessionDesktop = OVDesktop.initSession();
sessionDesktop.on('connectionCreated', event => {
console.log('connectionCreated desktop')
});
sessionDesktop.on('streamCreated', event => {
console.log('streamCreated desktop')
const subscriberDesktop = sessionDesktop.subscribe(event.stream, 'video-container');
subscriberDesktop.on('videoElementCreated', event => {
console.log('videoElementCreated desktop')
});
subscriberDesktop.on('videoElementDestroyed', event => {
console.log('videoElementDestroyed desktop')
});
subscriberDesktop.on('streamPlaying', event => {
console.log('streamPlaying desktop')
});
});
sessionDesktop.connect(token)
.then(() => {
console.log('connecting desktop')
publisherDesktop = OVDesktop.initPublisher('video-container2', {
audioSource: undefined,
videoSource: 'screen',
publishAudio: true,
publishVideo: true,
resolution: '640x480',
frameRate: 30,
insertMode: 'APPEND',
mirror: false
});
publisherDesktop.on('streamCreated', event => {
console.log('streamCreated desktop')
});
publisherDesktop.on('videoElementCreated', event => {
console.log('videoElementCreated desktop')
});
publisherDesktop.on('streamPlaying', event => {
console.log('streamPlaying desktop')
});
sessionDesktop.publish(publisherDesktop);
})
.catch(error => {
console.warn('There was an error connecting to the session:', error.code, error.message);
});
return false;
}, 'test123');
}
start_btn.onclick = ()=> {
httpReq(
'POST',
'/api/recording/start',
{
session: sessionDesktop.sessionId
},
'start recording gone WRONG',
res => {
console.log(res)
forceRecordId = res.id
}
)
}
stop_btn.onclick = ()=> {
httpReq(
'POST',
'/api/recording/stop',
{
recording: forceRecordId
},
'stop recording gone WRONG',
res => {
console.log(res)
}
)
}
function getToken(callback, deviceToken) {
const sessionName = deviceToken
httpReq(
'POST',
'/api/get-token',
{
sessionName: sessionName
},
'REQUEST GONE WRONG',
res=> {
token = res[0]
console.log('token geted ', token)
callback(token)
}
)
}
function httpReq(method, URL, body, errorMsg, callback) {
const config = {
method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body)
}
fetch(URL, config)
.then(res=> res.json() )
.then(data=> callback(data))
.catch(err=> console.error({ error: err, errorMsg }))
}
thx anyway for the help
