HTML5 从画布、视频、音频等媒体标签捕获媒体流

最新推荐文章于 2025-02-10 17:25:27 发布

pxxian

最新推荐文章于 2025-02-10 17:25:27 发布

阅读量3.8k

点赞数 2

分类专栏： html 文章标签： html5

原文链接：https://developers.google.com/web/updates/2016/10/capture-stream

版权

html 专栏收录该内容

2 篇文章

订阅专栏

HTML5的captureStream()函数允许开发者从<canvas>、<audio>或<video>元素获取MediaStream。这使得媒体流可以被录制、通过WebRTC实时传输或在<canvas>上与其他MediaStream结合。此功能需在<video>元素的onplay事件中调用，以确保视频正在播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://developers.google.com/web/updates/2016/10/capture-stream

captureStream()函数可以从<canvas>、<audio>或者<video>标签获取MediaStream。

这使得来自这些元素中任何一个的视频或音频流都可以被录制，通过WebRTC实时流式传输，或在<canvas>与其他MediaStream组合在一起。换句话说，captureStream（）使MediaStream能够在画布、音频或视频元素之间来回传递媒体，或者传递到RTCPeerConnection或MediaRecorder。

<canvas>的例子：

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

<video>的例子：

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
  // Set the source of one <video> element to be a stream from another.
  var stream = leftVideo.captureStream();
  rightVideo.srcObject = stream;
};

注意：captureStream()只能在<video>能够播放视频之后调用；这就是它位于onplay处理程序中的原因。

更详细的说明，请查阅：https://developers.google.com/web/updates/2016/10/capture-stream