将本地视频文件转换为媒体流。

Question

我想使用WebRTC进行文件流实验。 使用相机/麦克风直播（getUserMedia）时，它可以完美工作，但是当我尝试提供预录制的视频文件时，我得到了这个答案：

Uncaught TypeError: Failed to execute 'addStream' on 'RTCPeerConnection': parameter 1 is not of type 'MediaStream'.

是否有一种简单的方法可以像使用 .getUserMedia() 一样使用 RTCPeerConnection 来选择文件？

编辑：

这是我获取文件的方式，但当我尝试使用 RTCPeerConnection 的 addStream 方法添加 'localStream' 时，它失败了...

var localVideo = document.createElement("video");
var remoteVideo = document.createElement("video");

function onchange( event ){

    var file = this.files[0];
    var type = file.type;

    if( localVideo.canPlayType(type) ){

        var localStream = window.URL.createObjectURL(file);

        localVideo.src = localStream;

        ...

        peer.addStream(localStream); // fail here

    };

};

- Jordan

---

你是如何尝试使用本地视频文件的？能否发布一下那段代码？FireFox内置了一个对象来处理这个问题，但Chrome没有。 - Benjamin Trent

你找到了解决方法吗？我正需要这个功能。 - IvRRimUm

相关链接：html - 如何使用JavaScript从HTML5视频元素中获取媒体流对象 - Stack Overflow - undefined

Answer 1

a) createObjectURL方法有问题。你无法知道应用程序何时完成了对资源的使用，直到用户导航离开页面。（还有其他问题）使用video.srcObject（目前是video.mozSrcObject）

b) 仅仅因为视频元素可以使用src URL来播放流媒体文件并不意味着其他任何东西都可以。AddStream需要MediaStreams，而不是URLs。

工作组计划添加stream = video.captureStream()，但它甚至还没有被规范化。

更新：规范在这里：从DOM元素捕获媒体它已经在Firefox和Chrome 53及以上版本中实现（请参见Sam Dutton的文章）。

- jesup

---

更新的答案，附带规范和示例链接。 - jesup

Answer 2

创建一个包含所需视频的video元素：

<video controls src="http://example.com/example.webm">

当这个视频播放时，您可以检索MediaStream对象，可以再次使用它来进行RTCPeerConnection。

const video = document.querySelector('video');
video.onplay = function() {
  const stream = video.captureStream();
  peer.addStream(stream);
};

这同样适用于 audio 元素。

- Flimm