894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element

The first issue I have found trying to build a video editor on the web.
I have multiple video streams (desktop and web cam) and I wanted to be able to toggle between the video streams on one video element so that I can quickly switch between the web cam and the desktop and not break the MediaRecorder.
It looks like you should be able to do it via toggling the selected property on the videoTracks object on the <video> element, but you can’t, the array of tracks contains only 1 element (the first video track on the MediaStream).


This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>The first issue I have found trying to <a href="https://paul.kinlan.me/building-a-video-editor-on-the-web-with-the-web/">build a video editor on the web</a>.</p> <p>I have multiple video streams (desktop and web cam) and I wanted to be able to toggle between the video streams on one video element so that I can quickly switch between the web cam and the desktop and not break the <code>MediaRecorder</code>.</p> <p>It looks like you should be able to do it via toggling the <code>selected</code> property on the <code>videoTracks</code> object on the <code><video></code> element, but you can't, the array of tracks contains only 1 element (the first video track on the MediaStream).</p> <blockquote> <p>What steps will reproduce the problem? (1) Get two MediaStreams with video tracks (2) Add them to a new MediaStream and attach as srcObject on a videoElement (3) Check the videoElement.videoTracks object and see there is only one track</p> <p>Demo at <a href="https://multiple-tracks-bug.glitch.me/">https://multiple-tracks-bug.glitch.me/</a></p> <p>What is the expected result? I would expect videoElement.videoTracks to have two elements.</p> <p>What happens instead? It only has the first videoTrack that was added to the MediaStream.</p> </blockquote> <p><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=894556&can=1&q=reporter%3Ame&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&desc=3">Read full post</a>.</p> <p>Repro case.</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">window.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> () => { <span style="color:#66d9ef">if</span>(<span style="color:#e6db74">'getDisplayMedia'</span> <span style="color:#66d9ef">in</span> <span style="color:#a6e22e">navigator</span>) <span style="color:#a6e22e">warning</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">display</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'none'</span>; <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">blobs</span>; <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">blob</span>; <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">rec</span>; <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">stream</span>; <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">webcamStream</span>; <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">desktopStream</span>; <span style="color:#a6e22e">captureBtn</span>.<span style="color:#a6e22e">onclick</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">async</span> () => { <span style="color:#a6e22e">desktopStream</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">getDisplayMedia</span>({<span style="color:#a6e22e">video</span><span style="color:#f92672">:</span><span style="color:#66d9ef">true</span>}); <span style="color:#a6e22e">webcamStream</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">mediaDevices</span>.<span style="color:#a6e22e">getUserMedia</span>({<span style="color:#a6e22e">video</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1080</span>, <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1920</span> }, <span style="color:#a6e22e">audio</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>}); <span style="color:#75715e">// Always </span><span style="color:#75715e"></span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">tracks</span> <span style="color:#f92672">=</span> [...<span style="color:#a6e22e">desktopStream</span>.<span style="color:#a6e22e">getTracks</span>(), ... <span style="color:#a6e22e">webcamStream</span>.<span style="color:#a6e22e">getTracks</span>()] <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Tracks to add to stream'</span>, <span style="color:#a6e22e">tracks</span>); <span style="color:#a6e22e">stream</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">MediaStream</span>(<span style="color:#a6e22e">tracks</span>); <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Tracks on stream'</span>, <span style="color:#a6e22e">stream</span>.<span style="color:#a6e22e">getTracks</span>()); <span style="color:#a6e22e">videoElement</span>.<span style="color:#a6e22e">srcObject</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">stream</span>; <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">'Tracks on video element that has stream'</span>, <span style="color:#a6e22e">videoElement</span>.<span style="color:#a6e22e">videoTracks</span>) <span style="color:#75715e">// I would expect the length to be 2 and not 1 </span><span style="color:#75715e"></span> }; }; </code></pre></div>


This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan


Print Share Comment Cite Upload Translate Updates
APA

Paul Kinlan | Sciencx (2018-10-12T06:35:22+00:00) 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element. Retrieved from https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/

MLA
" » 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element." Paul Kinlan | Sciencx - Friday October 12, 2018, https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/
HARVARD
Paul Kinlan | Sciencx Friday October 12, 2018 » 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element., viewed ,<https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/>
VANCOUVER
Paul Kinlan | Sciencx - » 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/
CHICAGO
" » 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element." Paul Kinlan | Sciencx - Accessed . https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/
IEEE
" » 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/. [Accessed: ]
rf:citation
» 894556 – Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element | Paul Kinlan | Sciencx | https://www.scien.cx/2018/10/12/894556-multiple-video-tracks-in-a-mediastream-are-not-reflected-on-the-videotracks-object-on-the-video-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts