如何在javascript中从HTML5视频元素获取媒体流对象

Question

全部我使用 webRTC 进行点对点通信，我们有来自 getUserMedia 的媒体流对象，它作为对等连接的输入流给出。在这里，我需要来自本地驱动器的所选视频文件的视频流，该视频文件正在使用 HTML5 的视频元素播放。是否可以从视频标签创建媒体流对象？

谢谢，苏瑞

Answer 1

目前您无法从视频标签添加媒体流，但将来应该可以，如MDN

上所述

MediaStream 对象具有单个输入和单个输出。由 getUserMedia() 生成的 MediaStream 对象称为本地对象，并将用户的摄像头或麦克风之一作为其源输入。非本地 MediaStream 可以表示媒体元素，例如或，源自网络并通过 WebRTC PeerConnection API 获得的流，或使用 Web Audio API MediaStreamAudioSourceNode 创建的流。

但是您可以使用 Media Source Extensions API 来执行您想要的操作：您必须将本地文件放入流中并附加到 MediaSource 对象中。您可以在这里了解有关 MSE 的更多信息：http://www.w3.org/TR/media-source/

您可以在这里找到上述方法的演示和源代码

Answer 2

2021 更新：现在可以使用 MediaRecorder 接口：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

同一页面的示例：

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 还有详细的迷你教程：https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element

Answer 3

解决方案

使用

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();

参考

从画布、视频或音频元素捕获 MediaStream - Chrome 开发者版
https://developer.chrome.com/blog/capture-stream/

javascript - 将本地视频文件转换为媒体流 - 代码日志
将本地视频文件转换为媒体流
html - 类型“HTMLVideoElement”上不存在属性“captureStream” - VoidCC
“HTMLVideoElement”类型上不存在属性“captureStream”
javascript - 是否可以从具有跨源数据的元素中捕获？ - 堆栈溢出

是否可以从具有跨源数据的元素中捕获？
javascript - 如何处理“未捕获（承诺）DOMException：play() 失败，因为用户没有先与文档交互。”在使用 Chrome 66 的桌面上？ - 堆栈溢出

如何处理“未捕获（承诺中）DOMException：play() 失败，因为用户没有首先与文档交互。”在 Chrome 66 桌面上运行？

如何在javascript中从HTML5视频元素获取媒体流对象

问题描述投票：0回答：3

3个回答

解决方案

更多

参考

最新问题

如何在javascript中从HTML5视频元素获取媒体流对象

问题描述 投票：0回答：3

3个回答

解决方案

更多

参考

最新问题

问题描述投票：0回答：3