如何解决为什么我的简单对等 WebRTC 可以在某些 android 手机上运行,而在其他手机上不能运行
我构建了一个聊天反应应用程序作为 PWA,它可以在台式机上运行,也可以在我的手机和我妻子的手机上运行,但不能在其他一些机器人上运行,也不能在 Iphone 上运行。我想知道是否有人知道为什么会这样。我也有连接的情况,但我看不到视频或音频,以及连接一次但我可以改天尝试但无法连接的情况。我认为这可能与将涓流设置为 false 有关,或者我现在需要更新我的简单对等 API,我有 9.7,但我看到他们有 9.10。 我的一个想法是它对我和我的妻子很有效,因为我们在同一个网络上。
import React from "react";
import Peer from "simple-peer";
import SocketContext from "../../context/SocketProvider";
let phoneRinging = new Audio("./phoneRing.mp3")
class VideoChat extends React.Component {
static contextType = SocketContext
constructor(props) {
super(props);
// this.socket = createRef();
this.state = {
yourInfo: this.props.yourInfo,users: this.props.users,stream: null,receivingCall: this.props.receivingCall,caller: this.props.caller,callerSignal: this.props.callerSignal,callAccepted: false,btnHidden: false
};
}
componentDidMount() {
this.getVideo()
}
getVideo = () => {
const contraints = {
audio: true,video: true
}
navigator.mediaDevices.getUserMedia(contraints)
.then(stream => {
console.log(stream)
let video = document.getElementById("senderVid");
video.srcObject = stream;
this.setState({ stream: stream })
})
.catch(function (err) {
console.log(err,alert("cannot access your camera"))
});
}
callPeer = (id) => {
const socket = this.context
// this.phoneRingFn()
const peer = new Peer({
initiator: true,trickle: false,stream: this.state.stream,});
console.log(peer)
peer.on("signal",data => {
socket.emit("callUser",{ userToCall: id,signalData: data,from: this.state.yourInfo })
console.log("call placed")
})
peer.on("stream",stream => {
let video = document.getElementById("recVid");
video.srcObject = stream;
});
socket.on("callAccepted",signal => {
this.setState({ callAccepted: true })
phoneRinging.pause()
phoneRinging.currentTime = 0;
peer.signal(signal);
})
}
acceptCall = () => {
const socket = this.context
// phoneRinging.pause()
// phoneRinging.currentTime = 0;
this.setState({ callAccepted: true })
console.log("1")
const peer = new Peer({
initiator: false,});
peer.on("signal",data => {
console.log("2")
console.log(this.state.caller)
socket.emit("acceptCall",{ signal: data,to: this.state.caller.socketId })
})
peer.on("stream",stream => {
console.log("3")
let video = document.getElementById("recVid");
video.srcObject = stream;
});
peer.signal(this.state.callerSignal);
this.setState({ btnHidden: true })
}
hangUp = () => {
this.props.callEnded()
document.getElementById("recVid").remove()
}
phoneRingFn = () => {
phoneRinging.play()
console.log("phone ringing ")
let timesPhnRung = 0
let MaxRings = 3
phoneRinging.onplay = function () {
//played counter
timesPhnRung++;
};
phoneRinging.addEventListener("ended",function () {
phoneRinging.currentTime = 0;
if (timesPhnRung < MaxRings) {
phoneRinging.play();
} else {
timesPhnRung = 0;
}
});
}
// peer.on("close",()=>{
// console.log("peerdestroy")
// document.getElementById("recVid").remove()
// peer.destroy();
// })
render() {
console.log(this.state.btnHidden)
console.log(this.props)
let incomingCall;
if (this.state.receivingCall) {
incomingCall = ((this.state.btnHidden === false) ?
<div>
<h1>{this.state.caller.name} is calling you</h1>
<button onClick={this.acceptCall}>Accept</button>
</div> :
<div><h1>call connected</h1></div>
)
}
return (
<div className="videoChatContainer">
<div className="videoWindows">
<div className="senderVidContainer">
sender
<video id="senderVid" className="senderVideo" autoplay="autoplay" muted></video>
</div>
<div className="receiverVidContainer">
receiver
<video id="recVid" className="receiverVideo" autoplay="autoplay"></video>
</div>
</div>
<button className="disconnectChat" onClick={() => this.hangUp()}>end call</button>
{ !this.state.receivingCall ? (
<div>{
this.state.users.length ? (
<div>{
this.state.users.map(identify =>
(identify.userid === this.props.friendsPhId) ?
<button onClick={() => this.callPeer(identify.socketId)}>Call {identify.name}</button>
: null
)}
</div>
) : (<h1>Loading</h1>)}
</div>
) : (<div></div>)}
<div>
{incomingCall}
</div>
</div>
)
}
}
export default VideoChat;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。