从实时视频中获取 MediaStreamjs hls 流

Question

我在 videojs 播放器上播放了这个直播：

<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 对等连接发布它。

我知道我可以从“复制”视频播放器的 canvas 元素获取媒体流，但是有没有更直接的方式，例如：

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

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

Answer 1

我在问题中指的是 canvas 元素 captureStream() 方法 return 一个 MediaStream，这个方法也适用于 HTMLMediaElement（视频或音频播放器）。

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

HTML Media Element Media Capture Extensions

The method captureStream is added on HTML [HTML5] media elements. Methods for capture are added to both HTMLMediaElement and HTMLCanvasElement.

Both MediaStream and HTMLMediaElement expose the concept of a track. Since there is no common type used for HTMLMediaElement, this document uses the term track to refer to either VideoTrack or AudioTrack. MediaStreamTrack is used to identify the media in a 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>

从实时视频中获取 MediaStreamjs hls 流

Get MediaStream from a live videojs hls streaming

javascript

video.js

mediastream