Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!--
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
<head>
​
  <meta charset="utf-8">
  <meta name="description" content="WebRTC code samples">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
  <meta itemprop="description" content="Client-side WebRTC code samples">
  <meta itemprop="name" content="WebRTC code samples">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#ffffff">
​
  <base target="_blank">
​
  <title>Peer connection</title>
​
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
​
</head>
​
<body>
​
  <div id="container">
​
    <div class="highlight">
      <p>New codelab: <a href="https://codelabs.developers.google.com/codelabs/webrtc-web">Realtime communication with WebRTC</a></p>
    </div>
​
    <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>Peer connection</span></h1>
​
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
​
    <div>
      <input id="audioCheckBox" type="checkbox">Audio
      <input id="videoCheckBox" type="checkbox" checked>Video
      <button id="startButton">Start</button>
      <button id="callButton">Call</button>
      <button id="changeVideoButton">Change Video</button>
      <input id="refreshSrcObjectCheckBox" type="checkbox">Refresh srcObject
      <button id="hangupButton">Hang Up</button>
    </div>
    
    <pre id='stats'></pre>
​
    <p>View the console to see logging. The <code>MediaStream</code> object <code>localStream</code>, and the <code>RTCPeerConnection</code> objects <code>pc1</code> and <code>pc2</code> are in global scope, so you can inspect them in the console as well.</p>
​
    <p>For more information about RTCPeerConnection, see <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" title="HTML5 Rocks article about WebRTC by Sam Dutton">Getting Started With WebRTC</a>.</p>
​
​
    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
​
  </div>
​
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
 
/*
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 */
.hidden {
  display: none;
}
​
.highlight {
  background-color: #eee;
  font-size: 1.2em;
  margin: 0 0 30px 0;
  padding: 0.2em 1.5em;
}
.warning {
  color: red;
  font-weight: 400;
}
​
div#errorMsg p {
  color: #F00;
}
​
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
​
a {
color: #6fa8dc;
font-weight: 300;
text-decoration: none;
}
​
a:hover {
color: #3d85c6;
text-decoration: underline;
}
​
a#viewSource {
display: block;
margin: 1.3em 0 0 0;
border-top: 1px solid #999;
padding: 1em 0 0 0;
}
​
div#links a {
display: block;
line-height: 1.3em;
margin: 0 0 1.5em 0;
}
​
div.outputSelector {
margin: -1.3em 0 2em 0;
}
​
@media screen and (min-width: 1000px) {
/* hack! to detect non-touch devices */
  div#links a {
        line-height: 0.8em;
  }
}
​
h1 a {
font-weight: 300;
margin: 0 10px 0 0;
white-space: nowrap;
}
​
audio {
max-width: 100%;
}
​
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 1em;
word-break: break-word;
}
​
button {
background-color: #d84a38;
border: none;
border-radius: 2px;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
margin: 0 0 1em 0;
padding: 0.5em 0.7em 0.6em 0.7em;
}
​
button:active {
background-color: #cf402f;
}
​
button:hover {
background-color: #cf402f;
}
​
button[disabled] {
color: #ccc;
}
​
button[disabled]:hover {
background-color: #d84a38;
}
​
canvas {
  background-color: #ccc;
  max-width: 100%;
  width: 100%;
}
​
code {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
​
div#container {
margin: 0 auto 0 auto;
max-width: 40em;
padding: 1em 1.5em 1.3em 1.5em;
}
​
div#links {
    padding: 0.5em 0 0 0;
}
​
h1 {
border-bottom: 1px solid #ccc;
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin: 0 0 0.8em 0;
padding: 0 0 0.2em 0;
}
​
h2 {
color: #444;
font-size: 1em;
font-weight: 500;
line-height: 1.2em;
margin: 0 0 0.8em 0;
}
​
h3 {
border-top: 1px solid #eee;
color: #666;
font-weight: 500;
margin: 20px 0 10px 0;
padding: 10px 0 0 0;
white-space: nowrap;
}
​
html {
/* avoid annoying page width change
when moving from the home page */
overflow-y: scroll;
}
​
img {
border: none;
max-width: 100%;
}
​
input[type=radio] {
position: relative;
top: -1px;
}
​
p {
color: #444;
font-weight: 300;
line-height: 1.6em;
}
​
p#data {
border-top: 1px dotted #666;
font-family: Courier New, monospace;
line-height: 1.3em;
max-height: 1000px;
overflow-y: auto;
padding: 1em 0 0 0;
}
​
p.borderBelow {
border-bottom: 1px solid #aaa;
padding: 0 0 20px 0;
}
​
section p:last-of-type {
margin: 0;
}
​
section {
  border-bottom: 1px solid #eee;
  margin: 0 0 30px 0;
  padding: 0 0 20px 0;
}
​
section:last-of-type {
  border-bottom: none;
  padding: 0 0 1em 0;
}
​
select {
  margin: 0 1em 1em 0;
  position: relative;
  top: -1px;
}
​
h1 span {
  white-space: nowrap;
}
​
strong {
  font-weight: 500;
}
​
textarea {
  font-family: 'Roboto', sans-serif;
}
​
video {
  background: #222;
  margin: 0 0 20px 0;
  width: 100%;
}
​
@media screen and (max-width: 650px) {
  .highlight {
    font-size: 1em;
    margin: 0 0 20px 0;
    padding: 0.2em 1em;
  }
  h1 {
    font-size: 24px;
  }
}
​
@media screen and (max-width: 550px) {
  button:active {
    background-color: darkRed;
  }
  h1 {
    font-size: 22px;
  }
}
​
@media screen and (max-width: 450px) {
  h1 {
    font-size: 20px;
  }
}
​
/*
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 */
button {
  margin: 0 20px 0 0;
  width: 83px;
}
​
button#hangupButton {
    margin: 0;
}
​
video {
  height: 225px;
  margin: 0 0 20px 0;
  vertical-align: top;
  width: calc(50% - 12px);
}
​
video#localVideo {
  margin: 0 20px 20px 0;
}
​
@media screen and (max-width: 400px) {
  button {
    width: 83px;
  }
​
  button {
    margin: 0 11px 10px 0;
  }
​
​
  video {
    height: 90px;
    margin: 0 0 10px 0;
    width: calc(50% - 7px);
  }
  video#localVideo {
    margin: 0 10px 20px 0;
  }
​
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
voltrevopro
0viewers