html - How to get media stream object form HTML5 video element in javascript - Stack Overflow

admin管理员组

文章数量:1278853

all I'm in peer to peer munication 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

all I'm in peer to peer munication 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

• javascript
• html
• video
• webrtc

Share Improve this question Follow edited May 25, 2023 at 20:09 djvg 14.3k77 gold badges8383 silver badges114114 bronze badges asked Aug 27, 2013 at 6:10 surbobsurbob 69211 gold badge77 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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/TR/media-source/

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

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./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?

2021 update: It is now possible using MediaRecorder interface: https://developer.mozilla/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/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element

本文标签： htmlHow to get media stream object form HTML5 video element in javascriptStack Overflow