OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>WebRTC PeerConnection Manual Test</title> | 4 <title>WebRTC PeerConnection Manual Test</title> |
5 <!-- Load the polyfill to switch-hit between Chrome and Firefox --> | 5 <!-- Load the polyfill to switch-hit between Chrome and Firefox --> |
6 <script src="../adapter.js"></script> | 6 <script src="../adapter.js"></script> |
7 <script src="peerconnection_manual.js"></script> | 7 <script src="peerconnection_manual.js"></script> |
8 <link rel="StyleSheet" href="stylesheet.css"> | 8 <link rel="StyleSheet" href="stylesheet.css"> |
9 <meta charset="utf-8"> | 9 <meta charset="utf-8"> |
10 </head> | 10 </head> |
11 <body> | 11 <body> |
12 | 12 |
13 <div id="wrapper"> | 13 <div id="wrapper"> |
14 <div id="getusermedia-input"> | 14 <div id="header"> |
15 GetUserMedia <a href="http://goo.gl/V7cZg">MediaStreamConstraints</a>: | 15 GetUserMedia <a href="http://goo.gl/V7cZg">MediaStreamConstraints</a>: |
16 <input type="text" id="getusermedia-constraints"> | 16 <input type="text" id="getusermedia-constraints" wrap="soft"> |
17 Audio<input type="checkbox" id="audio" checked | 17 Audio<input type="checkbox" id="audio" checked |
18 onclick="updateGetUserMediaConstraints();"/> | 18 onclick="updateGetUserMediaConstraints();"/> |
19 Video<input type="checkbox" id="video" checked | 19 Video<input type="checkbox" id="video" checked |
20 onclick="updateGetUserMediaConstraints();"/> | 20 onclick="updateGetUserMediaConstraints();"/> |
21 Screen capture<input type="checkbox" id="screencapture" | 21 Screen capture<input type="checkbox" id="screencapture" |
22 onclick="updateGetUserMediaConstraints();"/> | 22 onclick="updateGetUserMediaConstraints();"/> |
23 <button id="re-request" onclick="getUserMediaFromHere();"> | 23 <button class="button-green" id="re-request" |
24 Request GetUserMedia</button><br/> | 24 onclick="getUserMediaFromHere();">Request GetUserMedia</button><br/> |
25 Audio source <select class="drop-down" id="audiosrc" | 25 Audio source <select class="drop-down" id="audiosrc" |
26 onchange="updateGetUserMediaConstraints();"></select> | 26 onchange="updateGetUserMediaConstraints();"></select> |
27 Video source <select class="drop-down" id="videosrc" | 27 Video source <select class="drop-down" id="videosrc" |
28 onchange="updateGetUserMediaConstraints();"></select> | 28 onchange="updateGetUserMediaConstraints();"></select> |
29 Optional min size<input type="text" id="video-width" value="1280" size="5px" | 29 Optional min size <input type="text" id="video-width" value="1280" |
30 onblur="updateGetUserMediaConstraints();">x<input type="text" | 30 size="5px" onblur="updateGetUserMediaConstraints();"> |
31 id="video-height" value="720" size="5px" | 31 x <input type="text" id="video-height" value="720" size="5px" |
32 onblur="updateGetUserMediaConstraints();"> | 32 onblur="updateGetUserMediaConstraints();"> |
33 <button id="get-devices" onclick="getDevices();"> | 33 <button id="get-devices" onclick="getDevices();"> |
34 Get devices</button> | 34 Get devices</button> |
35 Onload<input type="checkbox" id="get-devices-onload"> | 35 Onload<input type="checkbox" id="get-devices-onload"> |
36 You can also use <a href="constraints.html">constraints.html</a> | 36 You can also use <a href="constraints.html">constraints.html</a> |
37 <a href="peerconnection-help.html" target="_blank">Help</a> | 37 <a href="peerconnection-help.html" target="_blank">Help</a> |
38 <br/> | 38 <br/> |
39 </div> | 39 </div> |
40 | 40 |
41 <div id="container"> | 41 <div id="container"> |
42 | 42 <div class="left"> |
43 <div id="left-half"> | |
44 | |
45 <div> | 43 <div> |
46 <h2>Local Preview</h2> | 44 <h2>Local Preview</h2> |
47 <video width="320" height="240" id="local-view" autoplay="autoplay" | 45 <video width="320" height="240" id="local-view" autoplay="autoplay" |
48 muted class="video-area"></video><br/> | 46 muted></video><br/> |
49 </div> | 47 </div> |
50 | |
51 <div> | 48 <div> |
52 <div> | 49 <div> |
53 Size: <div id="local-view-size" class="inline-contents"></div> | 50 Size: <div id="local-view-size" class="inline-contents"></div> |
54 <div id="local-view-stream-size" class="inline-contents">(stream | 51 <div id="local-view-stream-size" class="inline-contents">(stream |
55 size: N/A)</div><br/> | 52 size: N/A)</div><br/> |
56 </div> | 53 </div> |
57 <div> | 54 <div> |
58 Resize: <button onclick="updateVideoTagSize('local-view')"> To | 55 Resize: <button onclick="updateVideoTagSize('local-view')"> To |
59 stream size</button> | 56 stream size</button> |
60 <button onclick="updateVideoTagSize('local-view', 320, 240);"> | 57 <button onclick="updateVideoTagSize('local-view', 320, 240);"> |
61 320x240</button> | 58 320x240</button> |
62 <button onclick="updateVideoTagSize('local-view', 640, 480);"> | 59 <button onclick="updateVideoTagSize('local-view', 640, 480);"> |
63 640x480</button> | 60 640x480</button> |
64 </div> | 61 </div> |
65 </div> | 62 </div> |
66 | 63 |
67 <h2>Send on data channel</h2> | 64 <h2>Send on data channel</h2> |
68 <input type="text" id="data-channel-send" size="10" /> | 65 <input type="text" id="data-channel-send" size="10" /> |
69 <button onclick="sendDataFromHere();">Send data</button><br> | 66 <button onclick="sendDataFromHere();">Send data</button><br> |
70 | 67 |
71 <h2>Settings</h2> | 68 <h2>Settings</h2> |
72 Server [<a href="" onclick="showServerHelp();">?</a>]: | 69 Server [<a href="" onclick="showServerHelp();">?</a>]: |
73 <input type="text" id="pc-server" size="30" | 70 <input type="text" id="pc-server" size="30" |
74 value="http://localhost:8888"/> | 71 value="http://localhost:8888"/> |
75 Peer ID: <input type="text" id="peer-id" size="10" /> | 72 Peer ID: <input type="text" id="peer-id" size="10" /> |
76 <button id="connect" onclick="connectFromHere();">Connect</button><br/> | 73 <button class="button-green" id="connect" onclick="connectFromHere();"> |
| 74 Connect</button><br/> |
| 75 |
77 PeerConnection Constraints: | 76 PeerConnection Constraints: |
78 CPU overuse <input type="checkbox" id="cpuoveruse-detection" | 77 CPU overuse <input type="checkbox" id="cpuoveruse-detection" |
79 onclick="setPeerConnectionConstraints();" checked="true"/> | 78 onclick="setPeerConnectionConstraints();" checked="true"/> |
80 RTP <input type="checkbox" id="data-channel-type-rtp" | 79 RTP <input type="checkbox" id="data-channel-type-rtp" |
81 onclick="setPeerConnectionConstraints();"><br/> | 80 onclick="setPeerConnectionConstraints();"><br/> |
82 <input type="text" id="pc-constraints" size="80" value="{}"><br/> | 81 <input class="width-100" type="text" id="pc-constraints" value="{}" ><br/> |
83 PeerConnection <a href="http://goo.gl/xVi12"> | 82 PeerConnection <a href="http://goo.gl/xVi12"> |
84 createOffer MediaConstraints:</a><br/> | 83 createOffer MediaConstraints:</a><br/> |
85 <input type="text" id="pc-createoffer-constraints" rows="7" cols="40" | 84 <input type="text" class="width-100" id="pc-createoffer-constraints" |
86 value="{}"/><br/> | 85 value="{}"/><br/> |
87 PeerConnection <a href="http://goo.gl/0TjfX"> | 86 PeerConnection <a href="http://goo.gl/0TjfX"> |
88 createAnswer MediaConstraints:</a><br/> | 87 createAnswer MediaConstraints:</a><br/> |
89 <input type="text" id="pc-createanswer-constraints" rows="7" cols="40" | 88 <input type="text" class="width-100" id="pc-createanswer-constraints" |
90 value="{}"/><br/> | 89 value="{}"/><br/> |
91 | 90 |
92 Call: | 91 Call: |
93 <button onclick="negotiateCallFromHere();">Negotiate</button> | 92 <button class="button-green" onclick="negotiateCallFromHere();">Negotiate |
94 <button onclick="hangUpFromHere();">Hang up</button><br/> | 93 </button> |
| 94 <button class="button-red" onclick="hangUpFromHere();">Hang up</button> |
| 95 <br/> |
| 96 |
95 Local Stream: | 97 Local Stream: |
96 <button onclick="addLocalStreamFromHere();">Add</button> | 98 <button class="button-green" onclick="addLocalStreamFromHere();">Add |
97 <button onclick="removeLocalStreamFromHere();">Remove</button> | 99 </button> |
98 <button onclick="stopLocalFromHere();">Stop</button> | 100 <button class="button-red" onclick="removeLocalStreamFromHere();">Remove |
| 101 </button> |
| 102 <button class="button-red" onclick="stopLocalFromHere();">Stop</button> |
99 <button onclick="toggleLocalVideoFromHere();">Toggle Video</button> | 103 <button onclick="toggleLocalVideoFromHere();">Toggle Video</button> |
100 <button onclick="toggleLocalAudioFromHere();">Toggle Audio</button><br/> | 104 <button onclick="toggleLocalAudioFromHere();">Toggle Audio</button><br/> |
| 105 |
101 Remote Stream: | 106 Remote Stream: |
102 <button onclick="toggleRemoteVideoFromHere();">Toggle Video</button> | 107 <button onclick="toggleRemoteVideoFromHere();">Toggle Video</button> |
103 <button onclick="toggleRemoteAudioFromHere();">Toggle Audio</button><br/> | 108 <button onclick="toggleRemoteAudioFromHere();">Toggle Audio</button><br/> |
| 109 |
104 Data Channel: | 110 Data Channel: |
105 <button onclick="createDataChannelFromHere();">Create</button> | 111 <button onclick="createDataChannelFromHere();">Create</button> |
106 <button onclick="closeDataChannelFromHere();">Close</button> | 112 <button onclick="closeDataChannelFromHere();">Close</button> |
107 status: | 113 status: |
108 <input type="text" id="data-channel-status" size="10" value="not created" | 114 <input type="text" id="data-channel-status" size="10" value="not created" |
109 disabled="true" /><br/> | 115 disabled="true" /><br/> |
| 116 |
110 DTMF Sender: | 117 DTMF Sender: |
111 <button onclick="createDtmfSenderFromHere();">Create</button> | 118 <button onclick="createDtmfSenderFromHere();">Create</button> |
112 tones: | 119 tones: |
113 <input type="text" id="dtmf-tones" size="10" value="123,abc" /> | 120 <input type="text" id="dtmf-tones" size="10" value="123,abc" /> |
114 duration(ms): | 121 duration(ms): |
115 <input type="text" id="dtmf-tones-duration" size="10" value="100" /> | 122 <input type="text" id="dtmf-tones-duration" size="10" value="100" /> |
116 gap(ms): | 123 gap(ms): |
117 <input type="text" id="dtmf-tones-gap" size="10" value="50" /> | 124 <input type="text" id="dtmf-tones-gap" size="10" value="50" /> |
118 <button onclick="insertDtmfFromHere();">Send</button><br/> | 125 <button onclick="insertDtmfFromHere();">Send</button><br/> |
| 126 |
119 Options: | 127 Options: |
120 <input type="checkbox" id="force-isac" onclick="forceIsacChanged();"/> | 128 <input type="checkbox" id="force-isac" onclick="forceIsacChanged();"/> |
121 Force iSAC in Outgoing SDP<br/> | 129 Force iSAC in Outgoing SDP<br/> |
122 <button onclick="clearLog();">Clear Logs</button> | 130 <button onclick="clearLog();">Clear Logs</button> |
123 | |
124 <h2>Messages</h2> | |
125 <pre id="messages"></pre> | |
126 </div> | 131 </div> |
127 | 132 |
128 <div id="right-half"> | 133 <div class="right"> |
129 | |
130 <div> | 134 <div> |
131 <h2>Remote Video</h2> | 135 <h2>Remote Video</h2> |
132 <video width="320" height="240" id="remote-view" autoplay="autoplay" | 136 <video width="320" height="240" id="remote-view" autoplay="autoplay"> |
133 class="video-area"></video><br/> | 137 </video><br/> |
134 </div> | 138 </div> |
135 | |
136 <div> | 139 <div> |
137 <div> | 140 <div> |
138 Size: <div id="remote-view-size" class="inline-contents"></div> | 141 Size: <div id="remote-view-size" class="inline-contents"></div> |
139 <div id="remote-view-stream-size" class="inline-contents">(stream size | 142 <div id="remote-view-stream-size" class="inline-contents">(stream size |
140 :N/A)</div><br/> | 143 :N/A)</div><br/> |
141 </div> | 144 </div> |
142 <div> | 145 <div> |
143 Resize: <button onclick="updateVideoTagSize('remote-view')"> To | 146 Resize: <button onclick="updateVideoTagSize('remote-view')"> To |
144 stream size</button> | 147 stream size</button> |
145 <button onclick="updateVideoTagSize('remote-view', 320, 240);"> | 148 <button onclick="updateVideoTagSize('remote-view', 320, 240);"> |
146 320x240</button> | 149 320x240</button> |
147 <button onclick="updateVideoTagSize('remote-view', 640, 480);"> | 150 <button onclick="updateVideoTagSize('remote-view', 640, 480);"> |
148 640x480</button> | 151 640x480</button> |
149 </div> | 152 </div> |
150 </div> | 153 </div> |
151 | 154 |
152 <h2>Received on data channel</h2> | 155 <h2>Received on data channel</h2> |
153 <textarea id="data-channel-receive" rows="7" cols="40" disabled="true"> | 156 <textarea id="data-channel-receive" rows="7" cols="40" disabled="true"> |
154 </textarea> | 157 </textarea> |
155 | 158 |
156 <h2>Sent DTMF tones</h2> | 159 <h2>Sent DTMF tones</h2> |
157 <textarea id="dtmf-tones-sent" rows="7" cols="40" disabled="true"> | 160 <textarea id="dtmf-tones-sent" rows="7" cols="40" disabled="true"> |
158 </textarea> | 161 </textarea> |
| 162 </div> |
159 | 163 |
160 <h2>Debug</h2> | 164 <div id="footer"> |
161 <pre id="debug"></pre> | 165 <div class="left"> |
| 166 <h2>Messages</h2> |
| 167 <pre id="messages"></pre> |
| 168 </div> |
| 169 |
| 170 <div class="right"> |
| 171 <h2>Debug</h2> |
| 172 <pre id="debug"></pre> |
| 173 </div> |
162 </div> | 174 </div> |
163 </div> | 175 </div> |
164 </div> | 176 </div> |
165 | |
166 </body> | 177 </body> |
167 </html> | 178 </html> |
OLD | NEW |