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

• https://www.instructables.com/id/WebRTC-Video-Chat-in-20-Lines-of-JavaScript/
• https://www.grafikart.fr/tutoriels/webrtc-864