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