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