javascriptvideowebrtc

How to record remote video using webrtc or media stream from video tag


Hi I am using webrtc to setup one2one video call.I can able to record local video but not remote video.I want to record remote video.Please help!!.


Solution

  • You can use RecordRTC or MediaStreamRecorder or MediaRecorder API to record local and/or remote videos.

    For remote video, there are two options:

    1. Record video from peer.onaddstream event
    2. Record video from a <video> tag using captureStream API

    First one is VERY_Easy however it you MUST have access to javascript codes.

    The second option is also easy through this chrome extension:

    captureStream API are supported both on Chrome >=53 and Firefox.

    Chrome, however, still requires this flag: chrome://flags/#enable-experimental-web-platform-features

    If you enable above flag, restart chrome, and right click over any video (on any webpage), you will be able to record that video. (whether it is WebRTC video, mp4 or webm file or HLS/DASH live stream)

    Here is the basic concept of the above extension:

    var streamFromVideoTag = videoTag.captureStream(15); // 15 is frame-rates
    var recorder = RecordRTC(streamFromVideoTag, {type: 'video'});
    

    For onaddstream event option:

    var recorder;
    peer.onaddstream = function(event) {
       var streamToBeRecorded = event.stream;
       recorder = RecordRTC(streamToBeRecorded, {type: 'video'});
       recorder.startRecording();
    };