How to get media stream object form HTML5 video element in javascript

Question

all I'm in peer to peer communication using webRTC , we have media stream object from the getUserMedia which is given as input stream to peerconnection. Here I need video stream from the selected video file from the local drive which is playing using Video element of HTML5. Is it possible to create mediastream object from the video tag?

thanks, suri

Unearthly

Answer 1

For now you can't add a media stream from a video tag, but it should be possible in the future, as it is explained on MDN

MediaStream objects have a single input and a single output. A MediaStream object generated by getUserMedia() is called local, and has as its source input one of the user's cameras or microphones. A non-local MediaStream may be representing to a media element, like or , a stream originating over the network, and obtained via the WebRTC PeerConnection API, or a stream created using the Web Audio API MediaStreamAudioSourceNode.

But you can use Media Source Extensions API to do what yo want : you have to put the local file into a stream and append in in a MediaSource object. You can learn more about MSE here : http://www.w3.org/TR/media-source/

And you can find a demo and source of the method above here

Glomerulonephritis

Did future come yet? – Cavern

Answer 2

2021 update: It is now possible using MediaRecorder interface: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

Example from same page:

if (navigator.mediaDevices) {
  console.log('getUserMedia supported.');

  var constraints = { audio: true };
  var chunks = [];

  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {

    var mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("recorder started");
      record.style.background = "red";
      record.style.color = "black";
    }

    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("recorder stopped");
      record.style.background = "";
      record.style.color = "";
    }

    mediaRecorder.onstop = function(e) {
      console.log("data available after MediaRecorder.stop() called.");

      var clipName = prompt('Enter a name for your sound clip');

      var clipContainer = document.createElement('article');
      var clipLabel = document.createElement('p');
      var audio = document.createElement('audio');
      var deleteButton = document.createElement('button');

      clipContainer.classList.add('clip');
      audio.setAttribute('controls', '');
      deleteButton.innerHTML = "Delete";
      clipLabel.innerHTML = clipName;

      clipContainer.appendChild(audio);
      clipContainer.appendChild(clipLabel);
      clipContainer.appendChild(deleteButton);
      soundClips.appendChild(clipContainer);

      audio.controls = true;
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      chunks = [];
      var audioURL = URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("recorder stopped");

      deleteButton.onclick = function(e) {
        evtTgt = e.target;
        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
      }
    }

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  })
  .catch(function(err) {
    console.log('The following error occurred: ' + err);
  })
}

MDN also has a detailed mini tutorial: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element

Mathewmathews

Answer 3

solution

Use videoElement.captureStream().

    // or: <video id="vid_payday" src="http://localhost:3000/payday.mp4" crossOrigin="anonymous" autoplay muted="muted">payday</video>

    const eltVideo = document.createElement('video');
    eltVideo.crossOrigin = 'anonymous';
    eltVideo.src = 'http://localhost:3000/payday.mp4';
    eltVideo.muted = true;
    await eltVideo.play();

    const localWebcamVideoStream = (eltVideo as unknown as HTMLCanvasElement).captureStream();
    const remoteWebcamVideoStream = new MediaStream();

more

• host your local video file in a server
  eg: use expressjs app.use(express.static('public')); & put your file inside public

• allow cors
  eg: app.use(cors({ origin: ['http://localhost:5173', 'http://localhost:5174'] }));)

• play your video & capture it

reference

Capture a MediaStream from a canvas, video or audio element - Chrome for Developers
https://developer.chrome.com/blog/capture-stream/

javascript - convert local video file into media stream - Stack Overflow
convert local video file into media stream

html - Property 'captureStream' does not exist on type 'HTMLVideoElement' - Stack Overflow
Property 'captureStream' does not exist on type 'HTMLVideoElement'

javascript - is it possible to capture from an element with cross origin data? - Stack Overflow
is it possible to capture from an element with cross origin data?

javascript - How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66? - Stack Overflow
How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Chantilly