srcObject property on video element

[qutran]

Is your feature request related to a problem? Please describe. Currently compiler transforms srcObject property in video element as <video srcobject="[object MediaStream]"></video> and doesn't applies stream to it.

Describe the solution you'd like I would prefer if compiler will parse and apply srcObject to the video element and omit it from the attributes in the case when I'm using it like <video srcObject={myStream}></video> inside the template.

Describe alternatives you've considered To use link of video element and to assign srcObject directly. Ex. videoElement.srcObject = stream.

How important is this feature to you? It's not urgent to do and probably current behavior is correct but I would like to know your thoughts on this point. It could be more comfortable to use it in the way described before.

Additional context related links: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

[stephanos]

This workaround worked for me:

<script>
  export let stream
  let video

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

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

[qutran]

@stephanos as for me there is more convinient option to get this done using actions (:use). You could to reuse this function in any other component as well.

<script>
  export let stream;

  function srcObject(node, stream) {
    node.srcObject = stream;
    return {
      update(nextStream) { node.srcObject = stream;  },
      destroy() { /* stream revoking logic here */ },
    },
  }
</script>

<video use:srcObject={stream} autoplay playsinline></video>

[stephanos]

didn't know about that, nice!

UPDATE: beware, the above approach might lead to flickering since at least for me the stream was updated by Svelte continuously. I had to change it to this:

  function srcObject(node, stream) {
    node.srcObject = stream;
    return {
      update(newStream) {
        if (node.srcObject != newStream) { // the important change
          node.srcObject = newStream
        }
      }
    }
  }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thanhdatvo]

Any update on this?

[DoubleMalt]

There really should be a btter way to do this.