WebRTC视频聊天实现

核心功能实现

1. 请求访问用户设备

使用navigator.mediaDevices.getUserMedia()请求访问用户的摄像头和麦克风

2. 创建Peer连接

1
2
3
4
var peer = new Peer();
peer.on('open', function(id) {
    // 连接成功后获取ID
});

3. 监听外部连接

1
2
3
4
5
6
7
peer.on('call', function(call) {
    // 监听来电
    call.answer(localStream);  // 回复并发送本地视频流
    call.on('stream', function(remoteStream) {
        // 监听对方的远程视频流
    });
});

4. 发起通信

1
peer.call(remoteId, localStream);

完整代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
    <title>视频聊天</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/peerjs/1.3.1/peerjs.min.js"></script>
</head>
<body>
<h3>本地视频</h3>
<video id="localVideo" style="width: 400px;height: 300px;"></video>
<div style="text-align: left">
    自己ID<input type="text" id="myPeerid"/>(自动获取)
    对方ID<input type="text" id="youPeerid"/>(请手动输入)
    <button id="callBtn">聊天</button>
</div>
<h3>远程视频</h3>
<video id="remoteVideo" style="width: 400px;height: 300px;"></video>
 
<script type="text/javascript">
    //访问用户媒体设备的兼容方法
    function getUserMedia(constrains,success,error){
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API
            navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia){
            //webkit内核浏览器
            navigator.webkitGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.mozGetUserMedia){
            //Firefox浏览器
            navagator.mozGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.getUserMedia){
            //旧版API
            navigator.getUserMedia(constrains).then(success).catch(error);
        }
    }

    var localVideo = document.querySelector('video#localVideo');
    var remoteVideo = document.querySelector('video#remoteVideo');
    var localStream = null;

    $(function(){
        // 获取本地媒体流
        getUserMedia({video: true, audio: true}, function(stream) {
            localStream = stream;
            localVideo.srcObject = stream;
            localVideo.autoplay = true;
            localVideo.play();
        }, function(err) {
            console.log('Failed to get local stream' ,err);
        });
 
        // 创建Peer连接
        var peer = new Peer();
        peer.on('open', function(id) {
            $("#myPeerid").val(id);
        });

        // 监听呼叫
        peer.on('call', function(call) {
            call.answer(localStream);
            call.on('stream', function(remoteStream) {
                console.log(remoteStream);
                remoteVideo.srcObject = remoteStream;
                remoteVideo.autoplay = true;
            });
        });

        // 发起呼叫
        $('#callBtn').click(function(){
            var remoteId = $("#youPeerid").val();
            if(remoteId == ""){
                alert("请输入对方ID");
                return;
            }
 
            var call = peer.call(remoteId, localStream);
            call.on('stream', function(remoteStream) {
                console.log(remoteStream);
                remoteVideo.srcObject = remoteStream;
                remoteVideo.autoplay = true;
            });
            call.on('close', function() {
                console.log("call close");
                _this.loading.close();
            });
            call.on('error', function(err) {
                console.log(err);
                _this.loading.close();
            });
        });
    });
</script>
</body>
</html>

功能说明

  1. 页面加载后自动请求摄像头权限
  2. 连接成功后自动获取并显示本地ID
  3. 输入对方ID后可发起视频通话
  4. 支持接收对方视频通话请求
  5. 自动显示本地和远程视频流

兼容性处理

代码中包含了对不同浏览器的兼容处理：

  • 最新标准API
  • webkit内核浏览器
  • Firefox浏览器
  • 旧版API