从实时 videojs hls 流中获取 MediaStream

问题描述

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

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

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

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

解决方法

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

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

HTML 媒体元素媒体捕获扩展

方法 captureStream 添加到 HTML [HTML5] 媒体元素上。 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>

javascript mediastream video.js