Svelte中为媒体元素绑定MediaStream是否仍仅有use:指令方案？

除了你提到的use:srcObject指令方案，还有以下几种实现方式：

1. 结合DOM引用与响应式声明 #

通过bind:this获取video元素的DOM引用，再利用Svelte的响应式语句监听stream变化，实时更新srcObject：

<script>
  import { onMount } from 'svelte';
  export let stream;
  let videoElement;

  // 初始渲染时赋值
  onMount(() => {
    if (stream) {
      videoElement.srcObject = stream;
    }
  });

  // 响应式监听stream变化，自动更新
  $: if (videoElement && stream) {
    videoElement.srcObject = stream;
  }
</script>

<video bind:this={videoElement} autoplay playsinline></video>

这种方式直接操作DOM元素，逻辑直观，不需要额外定义action函数。

2. 封装为可复用组件 #

把视频流绑定逻辑封装成独立组件，外部只需传入stream即可，提升代码复用性：

<!-- VideoStream.svelte -->
<script>
  export let stream;
  let video;

  $: if (video) {
    video.srcObject = stream;
  }
</script>

<video bind:this={video} autoplay playsinline></video>

在父组件中使用：

<script>
  import VideoStream from './VideoStream.svelte';
  let stream; // 你的MediaStream实例
</script>

<VideoStream {stream} />

这种方式将绑定逻辑内聚在组件中，让父组件代码更简洁，也方便在多个页面复用。

3. 简化响应式赋值写法 #

如果不需要处理复杂边界情况，可省略onMount，仅通过响应式语句完成绑定：

<script>
  export let stream;
  let videoElement;

  $: if (videoElement) {
    videoElement.srcObject = stream;
  }
</script>

<video bind:this={videoElement} autoplay playsinline></video>

Svelte的响应式系统会在videoElement和stream任一变化时执行语句，初始渲染时videoElement赋值后也会触发更新。

内容的提问来源于stack exchange，提问作者KreutzerCode