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="peerconnection_manual.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="header">
  15     GetUserMedia <a href="http://goo.gl/V7cZg">MediaStreamConstraints</a>:
  16     <input type="text" id="getusermedia-constraints" wrap="soft">
  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 class="button-green" id="re-request"
  24         onclick="getUserMediaFromHere();">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"
  30         size="5px" onblur="updateGetUserMediaConstraints();">
  31     x <input type="text" 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     <div class="left">
  43         <div>
  44           <h2>Local Preview</h2>
  45           <video width="320" height="240" id="local-view" autoplay="autoplay"
  46               muted></video><br/>
  47         </div>
  48         <div>
  49           <div>
  50             Size: <div id="local-view-size" class="inline-contents"></div>
  51             <div id="local-view-stream-size" class="inline-contents">(stream
  52                 size: N/A)</div><br/>
  53           </div>
  54           <div>
  55             Resize: <button onclick="updateVideoTagSize('local-view')"> To
  56                 stream size</button>
  57             <button onclick="updateVideoTagSize('local-view', 320, 240);">
  58                 320x240</button>
  59             <button onclick="updateVideoTagSize('local-view', 640, 480);">
  60                 640x480</button>
  61           </div>
  62         </div>
  63
  64       <h2>Send on data channel</h2>
  65       <input type="text" id="data-channel-send" size="10" />
  66       <button onclick="sendDataFromHere();">Send data</button><br>
  67
  68       <h2>Settings</h2>
  69       Server [<a href="" onclick="showServerHelp();">?</a>]:
  70       <input type="text" id="pc-server" size="30"
  71           value="http://localhost:8888"/>
  72       Peer ID: <input type="text" id="peer-id" size="10" />
  73       <button class="button-green" id="connect" onclick="connectFromHere();">
  74           Connect</button><br/>
  75
  76       PeerConnection Constraints:
  77       CPU overuse <input type="checkbox" id="cpuoveruse-detection"
  78           onclick="setPeerConnectionConstraints();" checked="true"/>
  79       RTP <input type="checkbox" id="data-channel-type-rtp"
  80           onclick="setPeerConnectionConstraints();"><br/>
  81       <input class="width-100" type="text" id="pc-constraints" value="{}" ><br/>
  82       PeerConnection <a href="http://goo.gl/xVi12">
  83           createOffer MediaConstraints:</a><br/>
  84       <input type="text" class="width-100" id="pc-createoffer-constraints"
  85           value="{}"/><br/>
  86       PeerConnection <a href="http://goo.gl/0TjfX">
  87           createAnswer MediaConstraints:</a><br/>
  88       <input type="text" class="width-100" id="pc-createanswer-constraints"
  89           value="{}"/><br/>
  90
  91       Call:
  92       <button class="button-green" onclick="negotiateCallFromHere();">Negotiate
  93           </button>
  94       <button class="button-red" onclick="hangUpFromHere();">Hang up</button>
  95           <br/>
  96
  97       Local Stream:
  98       <button class="button-green" onclick="addLocalStreamFromHere();">Add
  99           </button>
 100       <button class="button-red" onclick="removeLocalStreamFromHere();">Remove
 101           </button>
 102       <button class="button-red" onclick="stopLocalFromHere();">Stop</button>
 103       <button onclick="toggleLocalVideoFromHere();">Toggle Video</button>
 104       <button onclick="toggleLocalAudioFromHere();">Toggle Audio</button><br/>
 105
 106       Remote Stream:
 107       <button onclick="toggleRemoteVideoFromHere();">Toggle Video</button>
 108       <button onclick="toggleRemoteAudioFromHere();">Toggle Audio</button><br/>
 109
 110       Data Channel:
 111       <button onclick="createDataChannelFromHere();">Create</button>
 112       <button onclick="closeDataChannelFromHere();">Close</button>
 113       status:
 114       <input type="text" id="data-channel-status" size="10" value="not created"
 115           disabled="true" /><br/>
 116
 117       DTMF Sender:
 118       <button onclick="createDtmfSenderFromHere();">Create</button>
 119       tones:
 120       <input type="text" id="dtmf-tones" size="10" value="123,abc" />
 121       duration(ms):
 122       <input type="text" id="dtmf-tones-duration" size="10" value="100" />
 123       gap(ms):
 124       <input type="text" id="dtmf-tones-gap" size="10" value="50" />
 125       <button onclick="insertDtmfFromHere();">Send</button><br/>
 126
 127       Options:
 128       <input type="checkbox" id="force-isac" onclick="forceIsacChanged();"/>
 129       Force iSAC in Outgoing SDP<br/>
 130       <button onclick="clearLog();">Clear Logs</button>
 131     </div>
 132
 133     <div class="right">
 134       <div>
 135         <h2>Remote Video</h2>
 136           <video width="320" height="240" id="remote-view" autoplay="autoplay">
 137               </video><br/>
 138       </div>
 139       <div>
 140         <div>
 141           Size: <div id="remote-view-size" class="inline-contents"></div>
 142           <div id="remote-view-stream-size" class="inline-contents">(stream size
 143               :N/A)</div><br/>
 144         </div>
 145         <div>
 146           Resize: <button onclick="updateVideoTagSize('remote-view')"> To
 147               stream size</button>
 148           <button onclick="updateVideoTagSize('remote-view', 320, 240);">
 149               320x240</button>
 150           <button onclick="updateVideoTagSize('remote-view', 640, 480);">
 151               640x480</button>
 152         </div>
 153       </div>
 154
 155       <h2>Received on data channel</h2>
 156       <textarea id="data-channel-receive" rows="7" cols="40" disabled="true">
 157           </textarea>
 158
 159       <h2>Sent DTMF tones</h2>
 160       <textarea id="dtmf-tones-sent" rows="7" cols="40" disabled="true">
 161           </textarea>
 162     </div>
 163
 164     <div id="footer">
 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>
 174     </div>
 175   </div>
 176 </div>
 177 </body>
 178 </html>