为什么我的简单对等 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 (将#修改为@）