---
title: Media Capture and Streams API (Media Stream)
slug: Web/API/Media_Streams_API
tags:
  - API
  - Audio
  - Media
  - Video
translation_of: Web/API/Media_Streams_API
---
<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>

<p><span class="seoSummary">該<strong>媒體捕獲和流</strong>API，通常被稱為<strong>媒體流API</strong>或者乾脆<strong>MediaStream API</strong>，是關係到一個API<a href="/en-US/docs/Web/API/WebRTC_API">的WebRTC</a>提供流式音頻和視頻數據的支持。</span>它提供了用於處理流及其組成軌道的接口和方法，與數據格式關聯的約束，異步使用數據時的成功和錯誤回調以及在此過程中觸發的事件。</p>

<h2 id="概念和用法">概念和用法</h2>

<p>該API基於{{domxref("MediaStream")}}對象的操作，該對象代表與音頻或視頻相關的數據流。請參閱“<a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">獲取視頻”中</a>的示例。</p>

<p>A <code>MediaStream</code> consists of zero or more {{domxref("MediaStreamTrack")}} objects, representing various audio or video <strong>tracks</strong>. Each <code>MediaStreamTrack</code> may have one or more <strong>channels</strong>. The channel represents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like <em>left</em> or <em>right</em> in a stereo audio track.</p>

<p><code>MediaStream</code> objects have a single <strong>input</strong> and a single <strong>output</strong>. A <code>MediaStream</code> object generated by {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} is called <em>local</em>, and has as its source input one of the user's cameras or microphones. A non-local <code>MediaStream</code> may be representing to a media element, like {{HTMLElement("video")}} or {{HTMLElement("audio")}}, a stream originating over the network, and obtained via the WebRTC {{domxref("RTCPeerConnection")}} API, or a stream created using the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}.</p>

<p>The output of the <code>MediaStream</code> object is linked to a <strong>consumer</strong>. It can be a media elements, like {{HTMLElement("audio")}} or {{HTMLElement("video")}}, the WebRTC {{domxref("RTCPeerConnection")}} API or a <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}.</p>

<h2 id="Interfaces">Interfaces</h2>

<p>In these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the Media Capture and Streams API.</p>

<div class="index">
<ul>
 <li>{{domxref("BlobEvent")}}</li>
 <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
 <li>{{domxref("InputDeviceInfo")}}</li>
 <li>{{domxref("MediaDeviceKind")}}</li>
 <li>{{domxref("MediaDeviceInfo")}}</li>
 <li>{{domxref("MediaDevices")}}</li>
 <li>{{domxref("MediaStream")}}</li>
 <li>{{domxref("MediaStreamConstraints")}}</li>
 <li>{{domxref("MediaStreamEvent")}}</li>
 <li>{{domxref("MediaStreamTrack")}}</li>
 <li>{{domxref("MediaStreamTrackEvent")}}</li>
 <li>{{domxref("MediaTrackCapabilities")}}</li>
 <li>{{domxref("MediaTrackConstraints")}}</li>
 <li>{{domxref("MediaTrackSettings")}}</li>
 <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
 <li>{{domxref("NavigatorUserMedia")}}</li>
 <li>{{domxref("NavigatorUserMediaError")}}</li>
 <li>{{domxref("OverconstrainedError")}}</li>
 <li>{{domxref("URL")}}</li>
</ul>
</div>

<p>Early versions of the Media Capture and Streams API specification included separate <code>AudioStreamTrack</code> and <code>VideoStreamTrack</code> interfaces—each based upon {{domxref("MediaStreamTrack")}}—which represented streams of those types. These no longer exist, and you should update any existing code to instead use <code>MediaStreamTrack</code> directly.</p>

<h2 id="Events">Events</h2>

<div class="index">
<ul>
 <li>{{event("addtrack")}}</li>
 <li>{{event("ended")}}</li>
 <li>{{event("muted")}}</li>
 <li>{{event("overconstrained")}}</li>
 <li>{{event("removetrack")}}</li>
 <li>{{event("started")}}</li>
 <li>{{event("unmuted")}}</li>
</ul>
</div>

<h2 id="Guides_and_tutorials">Guides and tutorials</h2>

<p>The articles below provide additional guidance and how-to information that will help you learn to use the API, and how to perform specific tasks that you may wish to handle.</p>

<p>{{LandingPageListSubpages}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("api.MediaStream")}}</p>

<h2 id="也可以看看">也可以看看</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> -API簡介頁</li>
 <li>{{domxref("mediaDevices.getUserMedia()")}}</li>
 <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">使用WebRTC拍攝靜態照片</a>：有關使用<code>getUserMedia()</code>。</li>
</ul>