7

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

谢谢，苏里

4

2 回答 2

2

现在你不能从视频标签中添加媒体流，但将来应该可以，正如MDN上所解释的那样

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

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

您可以在此处找到上述方法的演示和来源

于 2013-10-09T20:04:02.607 回答
0

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

于 2021-08-22T21:04:53.233 回答