I am implementing Quickblox Video Conference service in my React Application - However I have implemented the Quickblox SDK in my react app and all the Quickblox functions are working perfectly. In the console I have checked the responses of the function they are also working fine. Whenever system tried to attach my localMediaStream to the Streaming server it gives me this error:
LOCAL WebRTC PeerConnection is down now (reason: DTLS alert) (userId: null)
I thought that it could be an issue of SSL because it was deployed on my local MacOS machine, So I deployed that on a Live Server with SSL enabled but error is still same. Here's the code which I am using:
import React from 'react';
import {observer} from 'mobx-react';
import endcall from '../../../assets/images/endcall.svg';
import './styles.scss';
import adapter from 'webrtc-adapter';
const QBVideoConferencingClient = require('quickblox/quickblox-multiparty-video-conferencing-client-0.8.6.min.js');
@observer class VideoConferencing extends React.Component {
componentDidMount() {
const config = {
server: "wss://-----.quickblox.com:8989", // Hiding on stackoverflow
//debug: true, // optional
//iceServers: [], // optional
};
//const QB = new QuickBlox();
const client = new QBVideoConferencingClient(config);
client
.createSession()
.then(() => {
// session created
const isRemote = false;
const userId = null;
client
.attachVideoConferencingPlugin(isRemote, userId)
.then((plugin) => {
const eventHandler = console.log; // use your own event handler(s)
Object.keys(plugin.events).forEach((key) =>
plugin.on(plugin.events[key], eventHandler)
);
plugin.addListener(plugin.events.CONSENT_DIALOG, this.consentDialog);
plugin.addListener(plugin.events.MEDIA_STATE, this.mediaState);
plugin.addListener(plugin.events.WEBRTC_STATE, this.webrtcState);
plugin.addListener(plugin.events.SLOW_LINK, this.slowLink);
plugin.addListener(plugin.events.ICE_STATE, this.iceState);
plugin.addListener(plugin.events.DETACHED, this.detached);
plugin.addListener(plugin.events.CLEANUP, this.cleanup);
const joinParams = {
roomId: "room_12311",
userId: parseInt(this.props.match.params.id),
// display: "Tarun Narula",
// onlyAudio: false,
// role: "publisher",
// video: "fhdres",
};
client
.join(joinParams)
.then(() => {
// joined successfully
client
.listOnlineParticipants('room_123')
.then((participants) => {
// handle as necessary
console.log('Participants List');
console.log(participants);
})
.catch((error) => {
// handle error
});
client.on(client.events.PARTICIPANT_JOINED, (userId, userDisplayName) => {
//alert('Participant Joined ' + userId + ' -- '+userDisplayName);
});
client.on(client.events.PARTICIPANT_LEFT, (userId, userDisplayName) => {
//alert('Participant Left ' + userId + ' -- '+userDisplayName);
});
client.on(client.events.LOCAL_STREAM, (stream) => {
const localVideo = document.querySelector("video#curUserVidElem");
QBVideoConferencingClient.attachMediaStream(localVideo, stream);
});
client.on(client.events.REMOTE_STREAM, (stream, userId) => {
const remoteVideo = document.querySelector("video#frontVideoElem");
QBVideoConferencingClient.attachMediaStream(remoteVideo, stream);
});
client.on(client.events.SESSION_DESTROYED, () => {
//alert('Session Destroyed');
});
client.on(client.events.ERROR, (error) => {
// handle error
console.log('error');
console.log(error);
console.log('error');
});
})
.catch((error) => {
// handle error
});
})
.catch((error) => {
// some error occurred
});
})
.catch((error) => {
// some error occurred
});
}
consentDialog(on) {
console.log('consentDialog event start');
console.log(on);
console.log('consentDialog event end');
}
mediaState(media, receiving) {
console.log('mediaState event start');
console.log(media);
console.log(receiving);
console.log('mediaState event end');
}
webrtcState(on, reason) {
console.log('webrtcState event start');
console.log(on);
console.log(reason);
console.log('webrtcState event end');
}
slowLink(uplink, lost) {
console.log('slowLink event start');
console.log(uplink);
console.log(lost);
console.log('slowLink event end');
}
iceState(state) {
console.log('iceState event start');
console.log(state);
console.log('iceState event end');
}
detached() {
console.log('detached event start');
console.log('detached event end');
}
cleanup() {
console.log('cleanup event start');
console.log('cleanup event end');
}
render() {
return (
<div className="VideoConferencingPage">
<div className="UpperSection">
<video id="frontVideoElem"></video>
<video id="curUserVidElem"></video>
</div>
<div className="ActionBtns">
<div className="StatusText">
<p>Status</p>
</div>
<div className="centerSec">
<button className={`MuteCallBtn`}>
<span className="icon icon-microphone"></span>
</button>
<button className="EndCallBtn">
<img src={endcall} />
</button>
<button className={`ToggleScreenCallBtn`}>
<span className="icon icon-camrecorder"></span>
</button>
</div>
</div>
</div>
);
}
}
export default VideoConferencing;
Logs:
true
index.js:111 consentDialog event start
index.js:112 true
index.js:113 consentDialog event end
index.js:60 Participants List
index.js:61 [{…}]
quickblox-multiparty-video-conferencing-client-0.8.6.min.js:161 false
index.js:111 consentDialog event start
index.js:112 false
index.js:113 consentDialog event end
quickblox-multiparty-video-conferencing-client-0.8.6.min.js:161 checking
index.js:138 iceState event start
index.js:139 checking
index.js:140 iceState event end
quickblox-multiparty-video-conferencing-client-0.8.6.min.js:161 connected
index.js:138 iceState event start
index.js:139 connected
index.js:140 iceState event end
quickblox-multiparty-video-conferencing-client-0.8.6.min.js:161 false "DTLS alert"
index.js:124 webrtcState event start
index.js:125 false
index.js:126 **DTLS alert**
index.js:127 webrtcState event end
index.js:149 cleanup event start
index.js:150 cleanup event end
Screenshot:
Steps taken to resolve:
- Verified the firewall disabled of my local machine
- Verified that any HTML block isn't blocking the camera space
- Uploaded the final build to Live server with SSL enabled but still error is there
Researching from many hours but unable to find anything about this. Any help would be appreciated.
Thanks in Advance.
