-
Notifications
You must be signed in to change notification settings - Fork 2
/
ConnectionTest.html
125 lines (110 loc) · 4.46 KB
/
ConnectionTest.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="JavaScript, WebRTC" />
<meta name="description" content="WebRTC codelab" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<title>Web CamChatting</title>
<style>
</style>
<script src='js/lib/adapter.js/'></script> <!--兼容不同的设备和浏览器-->
</head>
<body>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay muted></video> <!--显示两个画面，一个是发送的一个是接收的，在一个页面内 -->
<div>
<button id="startButton">OpenCamera</button>
<button id="callButton">Connect</button>
<button id="hangupButton">Stop</button> <!-- 增加开始，发送，终止的控制按键 -->
</div>
<script>
var localStream, localPeerConnection, remotePeerConnection;
var localVideo = document.getElementById("localVideo");
var remoteVideo = document.getElementById("remoteVideo");
var startButton = document.getElementById("startButton");
var callButton = document.getElementById("callButton");
var hangupButton = document.getElementById("hangupButton");
startButton.disabled = false; //打开网页自动开启摄像头
callButton.disabled = true; // 默认不开启传输
hangupButton.disabled = true; //默认不挂断 当たり前だ！
startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;
function trace(text){
console.log((performance.now() / 1000).toFixed(3)+ ": "+text); //以下所有涉及到trace函数的代码全部都是用来记录诊断信息的
}
function gotStream(stream){
trace("Received local stream");
localVideo.src = URL.createObjectURL(stream);
localStream = stream;
callButton.disabled = false;
}
function start() {
trace("Requesting Local Video");
startButton.disabled = true; //打开开始按键
getUserMedia({audio: true, video: true}, gotStream, function (error) {
trace("getUserMedia Error: ", error);
});
}
function call(){ //問題がある
callButton.disabled = true;
hangupButton.disabled = false;
trace("Starting Call");
if (localStream.getVideoTracks().length > 0) {
trace('Using video device ' + localStream.getVideoTracks()[0].label);
}
if (localStream.getAudioTracks().length > 0) {
trace('Using audio device ' + localStream.getAudioTracks()[0].label);
}
var servers = null; //这这里填入服务器名！
localPeerConnection = new RTCPeerConnection(servers);
trace("Create local peer connection object localPeerConnection");
localPeerConnection.onicecandidate = gotLocalIceCandidate;
remotePeerConnection = new RTCPeerConnection(servers);
trace("Create remote peer connection object remotePeerConnection");
remotePeerConnection.onicecandidate = gotRemoteIceCandidate; //TO DO
remotePeerConnection.onaddstream = gotRemoteStream;
localPeerConnection.addStream(localStream); //是addStream 不是addstream!!!!
trace("Added localStream to localPeerConnection");
localPeerConnection.createOffer(gotLocalDescription,handleError); //TO DO
}
function gotLocalDescription(description){
localPeerConnection.setLocalDescription(description);
trace("Offer from localPeerConnection: \n" + description.sdp);
remotePeerConnection.setRemoteDescription(description);
remotePeerConnection.createAnswer(gotRemoteDescription,handleError); //TO DO
}
function gotRemoteDescription(description){
remotePeerConnection.setLocalDescription(description);
trace("Answer from remotePeerConnection: \n" + description.sdp);
localPeerConnection.setRemoteDescription(description);
}
function hangup(){
trace("Ending Call");
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
hangupButton.disabled = true;
callButton.disabled = false;
}
function gotRemoteStream(event){
remoteVideo.src = URL.createObjectURL(event.stream);
trace("Received remote stream");
}
function gotLocalIceCandidate(event) {
if (event.candidate) {
remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
trace("Local ICE candidate: \n" + event.candidate.candidate);
}
}
function gotRemoteIceCandidate(event) {
if (event.candidate) {
localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
trace("Remote ICE candidate: \n " + event.candidate.candidate);
}
}
function handleError(){}
</script>
</body>
</html>