跳到主要内容

useDisplayMedia

分类
导出大小
926 B
上次更改
8 个月前
相关

响应式 mediaDevices.getDisplayMedia 流式传输。

演示

用法

vue
<script setup lang="ts">
import { 
useDisplayMedia
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const {
stream
,
start
} =
useDisplayMedia
()
// start streaming
start
()
const
videoRef
=
useTemplateRef
('video')
watchEffect
(() => {
// preview on a video element
videoRef
.
value
.
srcObject
=
stream
.
value
}) </script> <template> <
video
ref
="
video
" />
</template>

类型声明

显示类型声明
ts
export interface UseDisplayMediaOptions extends ConfigurableNavigator {
  /**
   * If the stream is enabled
   * @default false
   */
  
enabled
?:
MaybeRef
<boolean>
/** * If the stream video media constraints */
video
?: boolean | MediaTrackConstraints | undefined
/** * If the stream audio media constraints */
audio
?: boolean | MediaTrackConstraints | undefined
} /** * Reactive `mediaDevices.getDisplayMedia` streaming * * @see https://vueuse.org.cn/useDisplayMedia * @param options */ export declare function
useDisplayMedia
(
options
?: UseDisplayMediaOptions): {
isSupported
:
ComputedRef
<boolean>
stream
:
ShallowRef
<MediaStream | undefined, MediaStream | undefined>
start
: () =>
Promise
<MediaStream | undefined>
stop
: () => void
enabled
:
|
Ref
<boolean, boolean>
|
ShallowRef
<boolean, boolean>
|
WritableComputedRef
<boolean, boolean>
|
ShallowRef
<true, true>
|
ShallowRef
<false, false>
} export type
UseDisplayMediaReturn
=
ReturnType
<typeof
useDisplayMedia
>

来源

源代码演示文档

贡献者

Anthony Fu
IlyaL
Anthony Fu
SerKo
Fernando Fernández
Robert Rosman
Jelf
wheat
Abderrahim SOUBAI-ELIDRISI

更新日志

v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.5.0
c6c6e - feat: 在未使用 useEventListener 的地方使用它 (#4479)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
a3c6f - 修复:当屏幕不再共享时停止流 (#3976)

根据 MIT 许可证发布。