src/chrome/test/data/webrtc/manual/peerconnection.html

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