我无法在完成本地流渲染后初始化 createOffer()?
I am unable to initialise createOffer() after complete rendering of local stream?
我正在我的项目中开发 Video/Audio 流媒体功能,我正在使用 react-native-webrtc 库来实现上述功能。最初我在 ComponentDidMount()
上渲染本地流
componentDidMount () {
this.getLocalStream();
}
getLocalStream() {
mediaDevices.enumerateDevices().then(sourceInfos => {
console.log("mediaDevices.enumerateDevices", sourceInfos);
let videoSourceId;
for (let i = 0; i < sourceInfos.length; i++) {
const sourceInfo = sourceInfos[i];
if(sourceInfo.kind === "videoinput" && sourceInfo.facing === (this.state.isFront ? "front" : "environment")) {
videoSourceId = sourceInfo.id;
}
}
mediaDevices.getUserMedia({
audio: true,
// IF simulator/audio call is running for webrtc then video to false.
video: this.state.isSwitching,
facingMode: (this.state.isFront ? "user" : "environment"),
optional: (videoSourceId ? [{sourceId: videoSourceId}] : [])
}
)
.then(stream => {
InCallManager.start({media: 'audio'});
InCallManager.startRingtone('_BUNDLE_');
if (this.state.isSwitching === false) {
InCallManager.setSpeakerphoneOn(true);
InCallManager.setForceSpeakerphoneOn(true);
}
this.setState({videoUrl: stream.toURL(),})
localStream = stream;
pc.addStream(localStream);
connectedUser = false;
createPC(this.state.roomID,true);
})
.catch(error => {
// Log error
console.log('Error',error.message);
this.setState({loading: false});
});
});
}
渲染成功后,我正在向另一个节点发起 offer();然而,RTCPeerConnection pc.createOffer() 的方法无法触发,它没有执行函数,里面的逻辑。我尝试了很多方法来触发方法,但没有成功。
const createPC = (socketId, isOffer) => {
pcPeers = {
...pcPeers,
[socketId]: pc,
};
if (isOffer){
pc.createOffer(function(desc) {
log("fgf");
console.log('createOffer', desc);
pc.setLocalDescription(desc, function () {
console.log('setLocalDescription', pc.localDescription);
socket.emit('exchange', {'to': socketId, 'sdp': pc.localDescription });
}, logError);
}, logError);
}
// On Add Stream:
pc.onaddstream = event => {
//console.log('onaddstream', event.stream);
const remoteList = this.state.remoteList;
remoteList[socketId] = event.stream.toURL();
this.setState({
remoteList: remoteList,
});
};
// ice candidates
pc.onicecandidate = event => {
log('Howeeeee');
if (event.candidate) {
socket.emit('exchange', { to: socketId, candidate: event.candidate });
}
};
return pc;
}
为方法提供所有参数后仍未被触发的原因是什么?由于我是 React Native 的新手,有人可以帮助我,我在哪里犯了错误。将不胜感激。
[编辑]
你在调用 createOffer() 时出错了。
createOffer() return Promise 值,所以它不使用参数作为回调。
这样试试
if (isOffer){
pc.createOffer()
.then(function(desc) {
console.log("createOffer, desc);
pc.setLocalDescription(desc);
// something to do
}).
.catch(err => console.error(err));
}
我还建议阅读这篇关于 createOffer() 的 MDN document。
我通过将 react-native-webrtc 版本降级到 1.67.1 解决了我的问题,该版本与 react native 0.59.0 非常兼容。
我正在我的项目中开发 Video/Audio 流媒体功能,我正在使用 react-native-webrtc 库来实现上述功能。最初我在 ComponentDidMount()
上渲染本地流componentDidMount () {
this.getLocalStream();
}
getLocalStream() {
mediaDevices.enumerateDevices().then(sourceInfos => {
console.log("mediaDevices.enumerateDevices", sourceInfos);
let videoSourceId;
for (let i = 0; i < sourceInfos.length; i++) {
const sourceInfo = sourceInfos[i];
if(sourceInfo.kind === "videoinput" && sourceInfo.facing === (this.state.isFront ? "front" : "environment")) {
videoSourceId = sourceInfo.id;
}
}
mediaDevices.getUserMedia({
audio: true,
// IF simulator/audio call is running for webrtc then video to false.
video: this.state.isSwitching,
facingMode: (this.state.isFront ? "user" : "environment"),
optional: (videoSourceId ? [{sourceId: videoSourceId}] : [])
}
)
.then(stream => {
InCallManager.start({media: 'audio'});
InCallManager.startRingtone('_BUNDLE_');
if (this.state.isSwitching === false) {
InCallManager.setSpeakerphoneOn(true);
InCallManager.setForceSpeakerphoneOn(true);
}
this.setState({videoUrl: stream.toURL(),})
localStream = stream;
pc.addStream(localStream);
connectedUser = false;
createPC(this.state.roomID,true);
})
.catch(error => {
// Log error
console.log('Error',error.message);
this.setState({loading: false});
});
});
}
渲染成功后,我正在向另一个节点发起 offer();然而,RTCPeerConnection pc.createOffer() 的方法无法触发,它没有执行函数,里面的逻辑。我尝试了很多方法来触发方法,但没有成功。
const createPC = (socketId, isOffer) => {
pcPeers = {
...pcPeers,
[socketId]: pc,
};
if (isOffer){
pc.createOffer(function(desc) {
log("fgf");
console.log('createOffer', desc);
pc.setLocalDescription(desc, function () {
console.log('setLocalDescription', pc.localDescription);
socket.emit('exchange', {'to': socketId, 'sdp': pc.localDescription });
}, logError);
}, logError);
}
// On Add Stream:
pc.onaddstream = event => {
//console.log('onaddstream', event.stream);
const remoteList = this.state.remoteList;
remoteList[socketId] = event.stream.toURL();
this.setState({
remoteList: remoteList,
});
};
// ice candidates
pc.onicecandidate = event => {
log('Howeeeee');
if (event.candidate) {
socket.emit('exchange', { to: socketId, candidate: event.candidate });
}
};
return pc;
}
为方法提供所有参数后仍未被触发的原因是什么?由于我是 React Native 的新手,有人可以帮助我,我在哪里犯了错误。将不胜感激。
[编辑]
你在调用 createOffer() 时出错了。
createOffer() return Promise 值,所以它不使用参数作为回调。
这样试试
if (isOffer){
pc.createOffer()
.then(function(desc) {
console.log("createOffer, desc);
pc.setLocalDescription(desc);
// something to do
}).
.catch(err => console.error(err));
}
我还建议阅读这篇关于 createOffer() 的 MDN document。
我通过将 react-native-webrtc 版本降级到 1.67.1 解决了我的问题,该版本与 react native 0.59.0 非常兼容。