我无法使用 peerjs Webrtc 在 Safari 浏览器上接收或发出视频流

Question

I have set up the example they have for peerjs is working well on my pc for chrome but I have ipad pro with safari v12, is only give to me the local stream but is not send the answer to the sender peer back

this is my sender client

const peer = new Peer('sender', { host: '100.0.0.98', port: 9000, path: '/',debug: 3 })
var call = document.getElementById('call');
call.addEventListener('click', startChat);


function startChat (){
    navigator.mediaDevices.getUserMedia({
        video: true
    }).then(function(localStream) {
        document.getElementById('local').srcObject = localStream;
        const call = peer.call('receiver', localStream);
        call.on('stream', function(remoteStream) {
            document.getElementById('remote').srcObject = remoteStream;
        });
    });

}

this is my receiver

const peer = new Peer('receiver', { host: '100.0.0.98', port: 9000, path: '/', debug: 3 })
// var debugElement = domcument.getElementById('debug');




peer.on('call', function (call) {

    var conf = confirm('Some one is calling you...')

    if (conf) {

        navigator.mediaDevices.getUserMedia({
            video: true
        }).then(function (localStream) {
            document.getElementById('local').srcObject = localStream;
            call.answer(localStream);
            call.on('stream', function (remoteStream) {
                document.getElementById('remote').srcObject = remoteStream;
            });
        }).catch(function (error) { console.log(error); });
    }

});




peer.on('error', function (err) {
    var node = document.createElement("LI");                 // Create a <li> node
    var textnode = document.createTextNode(err);         // Create a text node
    node.appendChild(textnode);                              // Append the text to <li>
    document.getElementById("debug").appendChild(node);     // Append <li> to <ul> with id="myList"
});

this is my server

var express = require('express');
var app = express();
var ExpressPeerServer = require('peer').ExpressPeerServer;
var ip = require('ip');
var fs = require('fs');

app.use(express.static(__dirname + '/public'));


var options = {
    debug: true
}

var sslOptions = {
    key: fs.readFileSync('ssl/key.pem', 'utf8'),
    cert: fs.readFileSync('ssl/cert.pem', 'utf8')
  };

var server = require('https').createServer(sslOptions,app);
var peerserver = ExpressPeerServer(server, options);

app.use('/scripts', express.static(`${__dirname}/node_modules/`));
app.use(express.static('public'));

app.get('/sender', function (req, res, next) { 
    // res.render('sender.html');
    // res.header("Access-Control-Allow-Origin", "*");
    // res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.sendFile(__dirname + '/public/sender.html');
});

app.get('/recived', function (req, res, next) { 
    // res.render('sender.html');
    // res.header("Access-Control-Allow-Origin", "*");
    // res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.sendFile(__dirname + '/public/recived.html');
});


app.use('/', peerserver);



server.listen(9000,ip.address(),()=>{
    console.log(`server peer on ${ip.address()}:9000`);
});

I am using peerjs v0.3.20 can some one help me thanks so mush

Answer 1

Peerjs 使用基于回调的已弃用 api，您可以在https://developer.mozilla.org上看到它，但这是一个开放的问题https://github.com/peers/peerjs/issues/485

Answer 2

I've found this after battling a potentially similar situation.

For Safari you have to wait until the peer connection is open before you start doing things like making calls. Chrome doesn't seem to need this to happen.

So I have...

var id_peer="thePeerIDSomeoneElseSentUs";

// Create own peer object with connection to shared PeerJS server
//this ID doesn't get used
peer = new Peer();

//HAVE to wait for connection to be opened before we try passing through our stream.  Was needed for Safari!
peer.on('open', function (id) {

    //request our media stream with the constraints defined above
    navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {

        //save for ourselves so we can mute or end the stream later
        stream_self=stream;

        //make the call with the id we've been sent
        //if a video call, we're already viewing our own stream so no need to re-view it
        //we pass our media stream through to the call
        peer_call = peer.call(id_peer,stream_self);

        //when the call is answered we'll be passed back the other person's stream
        peer_call.on('stream', (remoteStream) => {


            stream_remote=remoteStream;

            //your code for playing the remote stream
        });

        peer_call.on('close',call_end);

        peer_call.on('error', function(err) { 
            console.log(err);
        });

    })
    .catch(function(err) {
        console.log(err);
    });        

});

peer.on('close', call_end);
peer.on('error', function (err) {
    console.log(err);
});