Skip to content Skip to sidebar Skip to footer
Home / WebRTC captureStream API

WebRTC captureStream API

You can use "captureStream" method to generate a realtime media stream from any HTML5 video or canvas-2d element.
  var realtimeStream = canvasElement.captureStream(15);

Using captureStream API:

  • You can record WebGL[1] based 3D games; you can also share in realtime with many users using RTCPeerConnection API
  • You can record canvas-2D animation[2] or drawings[3]; you can share in realtime as well using same RTCPeerConnection API
  • You can share your local video files e.g. WebM, Mp4, FLV, TS-M3U8 (hls-live-streaming) or audio files e.g. Wav, Ogg, Mp3 etc. You can record specific portions of these files as well.

How to record WebGL or Canvas2D animations?

You can use RecordRTC to record canvas-2D or 3D animations. You can try a few demos here:
First step, generate a realtime stream from HTML5 canvas element:
  var realtimeStream = canvasElement.captureStream(15);
The parameter "15" is named as "frame-rates". We requested 15 fps stream.

Second step, record the resulting stream using RecordRTC or MediaStreamRecorder API:
[6][7]

  var realtimeStream = canvasElement.captureStream();    var parameters = {      mimeType: 'video/webm'  };    var recorder = RecordRTC(realtimeStream, parameters);    recorder.setRecordingDuration(5 * 1000).onRecordingStopped(function() {      var recordedVideo = recorder.getBlob();      var file = new File([recordedVideo], 'filename.webm', {          type: 'video/webm'      });      var fileURL = URL.createObjectURL(file);      window.open(fileURL);  });    recorder.startRecording();
Third and last step, repeatedly draw shapes or animations on canvas 2d surface:
  var context = canvasElement.getContext('2d');    (function looper() {      context.clearRect(0, 0, canvasElement.width, canvasElement.height);      context.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);        // draw shapes every 10 milliseconds      setTimeout(looper, 10);  })();

How to broadcast/share WebGL or Canvas2D animations with other users?

You can "[RTCPeerConnection] addStream" method to share (broadcast) canvas-2D or 3D animations with remote users. You can try this demo:
First step, generate a realtime stream from HTML5 canvas element:
  var realtimeStream = canvasElement.captureStream(15);
Second and last step, share with remote users using RTCPeerConnection API:
  var peer = new webkitRTCPeerConnection(parameters);    // check this line  peer.addStream(canvasStream);    // now either create offer or answer descriptions  peer.createOffer(successCallback, failureCallback, parameters);

How to share or record microphone audio along with Canvas2D animations?

It is simple: use "addTrack" method to merge tracks.
  var microphoneStream = captureUsingNavigatorDotGetUserMediaAPI({      audio: true  });    // merge audio tracks into canvas stream  microphoneStream.getAudioTracks().forEach(function(track) {      // check this line      canvasStream.addTrack(track);  });    // now either record "canvasStream" or share using RTCPeerConnection API  peer.addStream(canvasStream); // microphone+canvas2D

Can I capture stream from an <audio> element?

Simply yes. You can capture audio either from <audio> tag or otherwise <video> element.

Remember: <video> tag also accepts audio-only stream. Your stream do NOT need to have video tracks. Here is how to capture audio stream from a <video> element:

  videoElement.src = URL.createObjectURL(microphoneStream);    // capture from <video> tag  var capturedStream = videoElement.captureStream();    // initiate a standalone instance  var audioOnlyStream = new webkitMediaStream();    // merge only audio tracks  capturedStream.getAudioTracks().forEach(function(track) {      audioOnlyStream.addTrack(track);  });    // either record "audioOnlyStream" or share using RTCPeerConnection API  peer.addStream(audioOnlyStream);

Unable to use "captureStream" API?

You may need to enable following chrome-flag; then relaunch the chrome browser:
  chrome://flags/#enable-experimental-web-platform-features

References:

[4]

References

  1. ^ WebGL (www.webrtc-experiment.com)
  2. ^ animation (www.webrtc-experiment.com)
  3. ^ drawings (www.webrtc-experiment.com)
  4. ^ use RecordRTC (www.youtube.com)
  5. ^ https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/ (www.webrtc-experiment.com)
  6. ^ RecordRTC (github.com)
  7. ^ MediaStreamRecorder (github.com)
  8. ^ https://rtcmulticonnection.herokuapp.com/demos/Pre-recorded-Media-Streaming.html (rtcmulticonnection.herokuapp.com)
  9. ^ Media Capture from DOM Elements (w3c.github.io)
  10. ^ MDN: HTMLMediaElement.captureStream (developer.mozilla.org)
Source: www.muazkhan.com