/webRTC

Video chat via WebRTC

Primary LanguageHTML

Web RTC

Live versions via GitHub Pages:

  • (Earliest demo from grafikart)
  • Student and teacher demo : imbalanced roles
    • (todo) Debug mode : make the messages availableonly through url param (see div#messages)
    • (todo) code re-use ?
    • (todo) 1.2.3.4 progession of the setup
    • (todo) merge teacher/student
    • (todo) When student joins before the teacher
    • (todo) Focus on portrait mode : higher than wide
    • (todo) Set Peer camera to fullscreen
    • (todo) Set self camera to resonable size
    • (todo) Add buttons for the teacher: remote actions
    • (todo) sound back on (let constraints = {audio: false, video: true})

getUserMedia

https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/gum/js/main.js

<video playsinline autoplay></video>

stream = navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;

promises

https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/canvas/js/main.js

<video playsinline autoplay></video>

function handleSuccess(stream) {
  window.stream = stream;      // make stream available to browser console
  document.querySelector('video').srcObject = stream;    // connect to <video>
}

navigator.mediaDevices
    .getUserMedia(constraints)
    .then(handleSuccess)
    .catch(handleError);

draw screenshot

https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/canvas/js/main.js

  // drawImage(video) :
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

Set camera size via constraints

https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/resolution/js/main.js

  constraints = {  video: {width: {exact: 640}, height: {exact: 480}} }

Audio only

 <audio id="xxx" controls autoplay></audio>
 functionhandleSuccess (stream) { 
    document.querySelector('audio').srcObject = stream; 
 }
 constraints = { audio: true, video: false };
 navigator.mediaDevices.getUserMedia(constraints)
     .then(handleSuccess)
      .catch(handleError);

stream object

Nice functions :

  • stream.getAudioTracks()
  • stream.oninactive

Some more references