从实时视频hls hls流中获取MediaStream

Question

我在一个视频播放器上播放了这个现场直播：

<video-js id="video-player" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://******.com:****/visio/streaming_30099/playlist.m3u8" type="application/x-mpegURL">
</video-js>

我想从这个实时流中提取视频轨道，并通过WebRTC对等连接发布它。

我知道我可以从一个“复制”视频播放器的画布元素中获得一个媒体流，但是有没有更直接的方法：

var stream = document.getElementById('video-player').srcObject; // but srcObject = null :(
var videoTrack = stream.getVideoTracks()[0];
...

如果我还不够清楚请告诉我。谢谢！

Answer 1

在我的问题中，我指的是返回MediaStream的画布元素MediaStream()方法，这个方法也适用于HTMLMediaElement (视频或音频播放器)。

请参见https://w3c.github.io/mediacapture-fromelement/#html-media-element-media-capture-extensions：

1. HTML媒体元素媒体捕获扩展

captureStream方法是在HTML媒体元素上添加的。捕获方法被添加到HTMLMediaElement和HTMLCanvasElement中。MediaStream和HTMLMediaElement都公开了跟踪的概念。由于不存在用于HTMLMediaElement的常见类型，因此本文档使用“跟踪”一词来指VideoTrack或AudioTrack。MediaStreamTrack用于标识MediaStream中的媒体。

所以我的代码变成：

<video id="video-player" class="video-js vjs-default-skin vjs-16-9" controls preload="auto" width="640" height="268">
   <source src="https://xxxxx.com/visio/streaming_30099/playlist.m3u8" type="application/x-mpegURL">
</video>

<script>
const videoPlayer = document.getElementById('video-player').getElementsByTagName('video')[0]; // VideoJS will turn your video element into a div and add a its own video element as a child
const stream = videoPlayer.captureStream();
</script>