如何解决在 React Js 中实现 Quickblox 视频会议时获取“DTLS 警报”
我正在我的 React 应用程序中实现 Quickblox 视频会议服务 - 但是我已经在我的 React 应用程序中实现了 Quickblox SDK，并且所有 Quickblox 功能都运行良好。在控制台中，我检查了函数的响应，它们也工作正常。每当系统尝试将我的 localMediaStream 附加到流媒体服务器时，它都会给我这个错误：
LOCAL WebRTC PeerConnection is down Now (reason: DTLS alert) (userId: null)
我认为这可能是 SSL 的问题，因为它部署在我本地的 MacOS 机器上，所以我将其部署在启用了 SSL 的 Live Server 上，但错误仍然相同。这是我正在使用的代码：
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,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;
日志：
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
截图：
解决步骤：
研究了很多小时，但找不到任何关于此的信息。任何帮助将不胜感激。
提前致谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
