samples
/
index.html

<!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 Javascript 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="image" content="src/images/webrtc-icon-192x192.png">
  <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>WebRTC samples</title>

  <link rel="icon" sizes="192x192" href="src/images/webrtc-icon-192x192.png">
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="src/css/main.css" />

  <style>
    h2 {
      font-size: 1.5em;
      font-weight: 500;
    }
    h3 {
      border-top: none;
    }
    section {
      border-bottom: 1px solid #eee;
      margin: 0 0 1.5em 0;
      padding: 0 0 1.5em 0;
    }
    section:last-child {
      border-bottom: none;
      margin: 0;
      padding: 0;
    }
  </style>
</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>WebRTC samples</h1>

    <section>

      <p>This is a repository for the WebRTC Javascript code samples. The source for these samples is available at <a href="https://github.com/webrtc/samples" title="View GitHub repository for these files">github.com/webrtc/samples</a>.</p>

      <p>Some of the samples use new browser features. They may only work in <a href="https://www.google.com/chrome/browser/canary.html" title="Download Chrome Canary">Chrome Canary</a>, <a href="http://www.mozilla.org/firefox/beta/" title="Download Firefox Beta">Firefox Beta</a> or Microsoft Edge (available with Windows 10), and may require flags to be set.</p>

      <p>Most of the samples use <a href="https://github.com/webrtc/adapter">adapter.js</a>, a shim to insulate apps from spec changes and prefix differences. (In fact, the standards and protocols used for WebRTC implementations are highly stable, and there are only a few prefixed names. For full interop information, see <a href="http://www.webrtc.org/web-apis/interop">webrtc.org/web-apis/interop</a>.)</p>

      <p>In Chrome and Opera, all samples that use <code>getUserMedia()</code> must be run from a server. Calling <code>getUserMedia()</code> from a file:// URL will work in Firefox, but fail silently in Chrome and Opera.</p>

      <p><a href="http://www.webrtc.org/testing" title="Command-line flags for WebRTC testing">webrtc.org/testing</a> lists command line flags useful for development and testing with Chrome.</p>

      <p>For more information about WebRTC, we maintain a list of resources at <a href="https://g.co/webrtc">g.co/webrtc</a>. If you've never worked with WebRTC, we recommend you start with the 2013 Google I/O <a href="https://www.youtube.com/watch?v=p2HzZkd2A40">WebRTC presentation</a>.</p>

      <p>Patches and issues welcome! See <a href="https://github.com/webrtc/samples/blob/gh-pages/CONTRIBUTING.md">CONTRIBUTING.md</a> for instructions. The <a href="https://bit.ly/webrtcdevguide">Developer's Guide</a> for this repo has more information about code style, structure and validation. Head over to <a href="test/README.md">test/README.md</a> and get started developing.</p>

      <p class="warning"><strong>Warning:</strong> some of these demos will result in loud feedback if used without headphones.</p>

    </section>

    <section>

      <h2 id="the-demos">The demos</h2>


      <h3 id="getusermedia">getUserMedia</h3>

      <p><a href="src/content/getusermedia/gum/">Basic getUserMedia demo</a></p>

      <p><a href="src/content/getusermedia/canvas/">Use getUserMedia with canvas</a></p>

      <p><a href="src/content/getusermedia/filter/">Use getUserMedia with canvas and CSS filters</a></p>

      <p><a href="src/content/getusermedia/resolution/">Choose camera resolution</a></p>

      <p><a href="src/content/getusermedia/audio/">Audio-only getUserMedia() output to local audio element</a></p>

      <p><a href="src/content/getusermedia/volume/">Audio-only getUserMedia() displaying volume</a></p>

      <p><a href="src/content/getusermedia/face/">Face tracking, using getUserMedia and canvas</a></p>

      <p><a href="src/content/getusermedia/record/">Record stream</a></p>


      <h3 id="capture">Stream capture</h3>

      <p><a href="src/content/capture/video-video/">Stream from a video element to a video element</a></p>

      <p><a href="src/content/capture/video-pc/">Stream from a video element to a peer connection</a></p>

      <p><a href="src/content/capture/canvas-video/">Stream from a canvas element to a video element</a></p>

      <p><a href="src/content/capture/canvas-pc/">Stream from a canvas element to a peer connection</a></p>

      <p><a href="src/content/capture/canvas-record/">Record a stream from a canvas element</a></p>

      <p><a href="src/content/capture/video-contenthint/">Guiding video encoding with content hints</a></p>

      <h3 id="devices">Devices</h3>

      <p><a href="src/content/devices/input-output/">Choose camera, microphone and speaker</a></p>

      <p><a href="src/content/devices/multi/">Choose media source and audio output</a></p>


      <h3 id="peerconnection">RTCPeerConnection</h3>

      <p><a href="src/content/peerconnection/pc1/">Basic peer connection demo</a></p>

      <p><a href="src/content/peerconnection/audio/">Audio-only peer connection demo</a></p>

      <p><a href="src/content/peerconnection/bandwidth/">Change bandwidth on the fly</a></p>

      <p><a href="src/content/peerconnection/upgrade/">Upgrade a call and turn video on</a></p>

      <p><a href="src/content/peerconnection/multiple/">Multiple peer connections at once</a></p>

      <p><a href="src/content/peerconnection/multiple-relay/">Forward the output of one PC into another</a></p>

      <p><a href="src/content/peerconnection/munge-sdp/">Munge SDP parameters</a></p>

      <p><a href="src/content/peerconnection/pr-answer/">Use pranswer when setting up a peer connection</a></p>

      <p><a href="src/content/peerconnection/constraints/">Constraints and stats</a></p>

      <p><a href="src/content/peerconnection/create-offer/">Display createOffer output for various scenarios</a></p>

      <p><a href="src/content/peerconnection/dtmf/">Use RTCDTMFSender</a></p>

      <p><a href="src/content/peerconnection/states/">Display peer connection states</a></p>

      <p><a href="src/content/peerconnection/trickle-ice/">ICE candidate gathering from STUN/TURN servers</a></p>

      <p><a href="src/content/peerconnection/restart-ice/">Do an ICE restart</a></p>

      <p><a href="src/content/peerconnection/webaudio-input/">Web Audio output as input to peer connection</a></p>

      <p><a href="src/content/peerconnection/webaudio-output/">Peer connection as input to Web Audio</a></p>

      <h3 id="datachannel">RTCDataChannel</h3>

      <p><a href="src/content/datachannel/basic/">Transmit text</a></p>

      <p><a href="src/content/datachannel/filetransfer/">Transfer a file</a></p>

      <p><a href="src/content/datachannel/datatransfer/">Transfer data</a></p>

      <h3 id="videoChat">Video chat</h3>

      <p><a href="https://apprtc.appspot.com/">AppRTC video chat client</a> powered by Google App Engine</p>

      <p><a href="https://apprtc.appspot.com/params.html">AppRTC URL parameters</a></p>

    </section>

    <a href="https://github.com/webrtc/samples" title="View the repository" id="viewSource">github.com/webrtc/samples</a>

  </div>

  <script src="src/js/lib/ga.js"></script>

  <script type="application/javascript">
  var isSecureOrigin = location.protocol === 'https:' ||
      location.hostname === 'localhost';
  if (!isSecureOrigin) {
    console.log('These demos must be run from a secure origin. \n' +
        'Changing protocol to HTTPS');
    location.protocol = 'HTTPS';
  }
  </script>

</body>
</html>