通过WebRTC在浏览器实时显示安卓手机屏幕

作者记：由于项目需要在浏览器和安卓手机之间建立p2p连接，自然就想到了使用WebRTC，经过一周多的摸索，在浏览器端能成功实时显示手机屏幕，但是会有卡顿、延迟等现象，试过了很多办法，效果不理想，遂搁置，现在把期间踩过的坑和出现的问题记录一下，供后来人参考，如果有解决方案，欢迎评论。

坑1：

WebRTC建立p2p连接的过程中，需要交换双方的SDP，安卓端使用的是implementation'org.webrtc:google-webrtc:1.0.30039'，它的SDP格式是

package org.webrtc;
import java.util.Locale;

public class SessionDescription {

  public final SessionDescription.Type type;

  public final String description;

  ...

}

浏览器JS端的SDP格式是

sdp: "v=0\r\no=- 1123295340288612068 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video data\r\na=msid-semantic: WMS\r\nm=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:9 IN IP4 0.0.0.0\r\na=ice-ufrag:mkpU\r\na=ice-pwd:PxbO3d1s7zsoo3d3x7U4izWi\r\na=ice-options:trickle\r\na=fingerprint:sha-256 60:73:22:62:4C:04:31:6A:41:A6:C3:F5:9A:57:76:B2:B6:A3:40:6E:86:48:F9:79:C7:DA:0E:46:BD:A9:B6:85\r\na=setup:active\r\na=mid:audio\r\na=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level\r\na=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\na=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01\r\na=inactive\r\na=rtcp-mux\r\na=rtpmap:111 opus/48000/2\r\na=rtcp-fb:111 transport-cc\r\na=fmtp:111 minptime=10;useinbandfec=1\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:9 G722/8000\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:110 telephone-event/48000\r\na=rtpmap:112 telephone-event/32000\r\na=rtpmap:113 telephone-event/16000\r\na=rtpmap:126 telephone-event/8000\r\nm=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 127\r\nc=IN IP4 0.0.0.0\r\na=rtcp:9 IN IP4 0.0.0.0\r\na=ice-ufrag:mkpU\r\na=ice-pwd:PxbO3d1s7zsoo3d3x7U4izWi\r\na=ice-options:trickle\r\na=fingerprint:sha-256 60:73:22:62:4C:04:31:6A:41:A6:C3:F5:9A:57:76:B2:B6:A3:40:6E:86:48:F9:79:C7:DA:0E:46:BD:A9:B6:85\r\na=setup:active\r\na=mid:video\r\na=extmap:14 urn:ietf:params:rtp-hdrext:toffset\r\na=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\na=extmap:13 urn:3gpp:video-orientation\r\na=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01\r\na=extmap:5 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay\r\na=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type\r\na=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing\r\na=extmap:9 http://www.webrtc.org/experiments/rtp-hdrext/color-space\r\na=recvonly\r\na=rtcp-mux\r\na=rtcp-rsize\r\na=rtpmap:96 VP8/90000\r\na=rtcp-fb:96 goog-remb\r\na=rtcp-fb:96 transport-cc\r\na=rtcp-fb:96 ccm fir\r\na=rtcp-fb:96 nack\r\na=rtcp-fb:96 nack pli\r\na=rtpmap:97 rtx/90000\r\na=fmtp:97 apt=96\r\na=rtpmap:98 VP9/90000\r\na=rtcp-fb:98 goog-remb\r\na=rtcp-fb:98 transport-cc\r\na=rtcp-fb:98 ccm fir\r\na=rtcp-fb:98 nack\r\na=rtcp-fb:98 nack pli\r\na=fmtp:98 profile-id=0\r\na=rtpmap:99 rtx/90000\r\na=fmtp:99 apt=98\r\na=rtpmap:100 red/90000\r\na=rtpmap:101 rtx/90000\r\na=fmtp:101 apt=100\r\na=rtpmap:127 ulpfec/90000\r\nm=application 9 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 0.0.0.0\r\na=ice-ufrag:mkpU\r\na=ice-pwd:PxbO3d1s7zsoo3d3x7U4izWi\r\na=ice-options:trickle\r\na=fingerprint:sha-256 60:73:22:62:4C:04:31:6A:41:A6:C3:F5:9A:57:76:B2:B6:A3:40:6E:86:48:F9:79:C7:DA:0E:46:BD:A9:B6:85\r\na=setup:active\r\na=mid:data\r\na=sctp-port:5000\r\na=max-message-size:262144\r\n"
type: "answer"
__proto__: Object

所以二者在通过信令服务器交换SDP时，需要转换格式以匹配对端的SDP。

坑2：
浏览器侧是强制开启安全指纹的，而安卓端可以关闭安全指纹，如果安卓端关闭了安全指纹，那么在交换SDP的时候，浏览器侧在调用setRemoteDesription()方法时会报错。
注意：只有在正确调用peerConnection.setRemoteDescription()成功后，才会触发peerConnection.onicecandidate回调，所以一定要保证两端SDP一致。
解决办法：安卓端也必须开启安全指纹

        PeerConnectionFactory.Options options = new PeerConnectionFactory.Options();
        options.disableEncryption = false;   //或者不设置。当设置为true时，SDP包将会没有fingerprint

通过WebRTC在浏览器实时显示安卓手机屏幕

推荐阅读更多精彩内容