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

convert local video file into media stream

本文关键字：媒体 转换 文件 视频      更新时间：2023-09-26

我想尝试使用webRTC进行文件流传输。它与相机/micro-live（getUserMedia）完美配合，但当我试图给它一个预录制的视频文件时，我得到了这个答案：

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

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

编辑：

以下是我获取文件的方法，但当我尝试使用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
    };
};

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

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

工作组计划添加stream=video.captureStream（），但它甚至还没有被指定

更新：规范在这里：来自DOM元素的媒体捕获它在Firefox和Chrome 53及更高版本中实现（请参阅Sam Dutton的文章）

使用您需要的视频创建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元素的工作方式相同。

相关文章：