Question

我想使用webRTC试验文件流。它与camera / micro live（getUserMedia）完美配合，但当我尝试给它一个预先录制的视频文件时，我得到了这个答案：

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

是否有一种简单的方法可以将RTCPeerConnection与选定的文件一起使用，例如.getUserMedia（）？

修改

以下是我获取文件的方法，但是当我尝试添加＆＃39; localStream＆＃39;使用RTCPeerConnection的addStream方法，它失败了......

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

    };

};

Answer 1

a）createObjectURL是邪恶的。在导航之前，您永远无法知道应用程序何时完成资源。（和其他问题）使用video.srcObject（当前是video.mozSrcObject）

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

工作组计划添加stream = video.captureStream（），但它还没有编写

更新：规范在此处：Media Capture from DOM Elements 它已在Firefox和Chrome 53及更高版本中实现（请参阅Sam Dutton's article）

Answer 2

使用所需的视频创建video元素：

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

播放此视频时，您可以检索MediaStream可以重用于RTCPeerConnection的{{1}}对象：

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

对于audio元素，其操作方式相同。

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

2 个答案: