WebRTC PeerConnection 在 Safari 11 (Mac OS X 10.13) 上显示黑屏答案

【问题标题】：WebRTC PeerConnection showing black screen on Safari 11 (Mac OS X 10.13)WebRTC PeerConnection 在 Safari 11 (Mac OS X 10.13) 上显示黑屏
【发布时间】：2018-01-26 10:26:49
【问题描述】：

我正在使用 WebRTC 将视频（无音频）从 Raspberry Pi 上的网络摄像头流式传输到用户的浏览器。在 RPi 上，我已经安装了 kclyu/rpi-webrtc-streamer，并且我还从该 repo 复制了一些用于浏览器客户端的测试代码。

在我的 Mac OS X 10.13 桌面上，客户端代码在 Chrome 63 和 Firefox 58 上可以正常显示视频，但在 Safari 11 上，我只能得到a black screen (albeit of the correct size)。尽管 WebRTC 对 Safari 的支持似乎是最近才出现的，但我读到的内容表明，在这个版本的 Safari 中，它至少应该能够支持带有 H.264 编解码器的 RTCPeerConnection。关于可能出了什么问题的任何想法？

这是我们的 JavaScript 的摘录（它不是最好的，但希望仅通过这里的部分就可以理解）：

var pcConfig = {"iceServers": [{"urls": "stun:stun.l.google.com:19302"}]};
var pcOptions = {optional: [{DtlsSrtpKeyAgreement: true}]};

this.createPeerConnection = function() {
    var that = this;
    this.peerConnection = new RTCPeerConnection(pcConfig, pcOptions);
    this.peerConnection.onicecandidate = function(event) {
        if (event.candidate) {
            var candidate = {
                type: 'candidate',
                label: event.candidate.sdpMLineIndex,
                id: event.candidate.sdpMid,
                candidate: event.candidate.candidate
            };
            // send(data) sends the data over the established WebSocket connection
            send(JSON.stringify(candidate));
        }
    };
    this.peerConnection.onconnecting = onSessionConnecting.bind(this);
    this.peerConnection.onopen = onSessionOpened.bind(this);
    this.peerConnection.onaddstream = onRemoteStreamAdded.bind(this);
    this.peerConnection.onremovestream = onRemoteStreamRemoved.bind(this);
}

function onRemoteStreamAdded(event) {
    this.videoEl.srcObject = event.stream;
}

// the rest of the callbacks only log, and do nothing else
// includes onSessionConnecting, onSessionOpened, onRemoteStreamRemoved

this.doHandlePeerMessage = function(data) {
    ++this.messageCounter;
    var dataJson = JSON.parse(data);
    if (dataJson["type"] == "offer") {
        var that = this;
        var data = '';
        var sdp_returned = forceChosenVideoCodec(dataJson.sdp, 'H264/90000');
        dataJson.sdp = sdp_returned;
        this.createPeerConnection();
        this.peerConnection.setRemoteDescription(
            new RTCSessionDescription(dataJson),
            onRemoteSdpSuccess,
            onRemoteSdpError
        );
        this.peerConnection.createAnswer({iceRestart: false}).then(function(sessionDescription) {
            data = JSON.stringify(sessionDescription);
            return that.peerConnection.setLocalDescription(sessionDescription);
        }).then(function() {
            // again, send(data) sends the data over the established WebSocket connection
            send(data);
        }).catch(function(error) {
            // log error
        });
    } else if (dataJson["type"] == "candidate") {
        var candidate = new RTCIceCandidate({sdpMLineIndex: dataJson.label, candidate: dataJson.candidate});
        this.peerConnection.addIceCandidate(candidate, aic_success_cb, aic_failure_cb);
    }
}

// again, the callbacks only log, and do nothing else
// includes aic_success_cb, aic_failure_cb, onRemoteSdpSuccess, onRemoteSdpError

（我对 WebRTC 还很陌生，所以如果有任何明显错误，请告诉我！）

【问题讨论】：

你能解决这个问题吗？

标签： javascript macos safari webrtc

【解决方案1】：

我认为您的问题是由于未将 playsinline 添加到您的 html 视频元素中造成的。

所以它必须是这样的：

<video id="local-video" playsinline autoplay muted></video>
<video id="remote-video" playsinline autoplay></video>

【讨论】：

【解决方案2】：

我遇到了类似的问题，视频元素的建议道具没有帮助。为我解决这个问题的方法是为 Safari 用户添加一个按钮，该按钮在视频元素上调用 play 方法：

<button onclick="document.getElementById('webcam').play()">Play</button>

如果您尝试从控制台或以编程方式调用 play 方法，您将获得：

Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): 在当前上下文中，用户代理或平台不允许请求，可能是因为用户拒绝了权限

【讨论】：

【解决方案3】：

你需要给视频标签添加一些道具

<video playsinline controls autoplay/>

【讨论】：