locked
Displaying same media stream to multiple elements RRS feed

  • Question

  • Is there a method similar to the WPF VisualBrush in order to display zoomed areas of a media stream to multiple sub elements without using multiple instances of mediaelement with the associated decoding, synchronization, etc.

    Martin Autry

    Friday, December 1, 2017 2:54 AM

Answers

  • Hi dannyfarwin,

    >>Is there a method similar to the WPF VisualBrush in order to display zoomed areas of a media stream to multiple sub elements without using multiple instances of mediaelement with the associated decoding, synchronization, etc.

    In UWP, there is not such same API as WPF VisualBrush.

    But, UWP provides a CompositionSurfaceBrush class which can be used to paint an area with pixels from an ICompositionSurface rendered using a video loaded through the MediaPlayer class.

    You can refer the following code.

    In the xaml,

        <StackPanel>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="7*">
                    </RowDefinition>
                    <RowDefinition Height="4*">
                    </RowDefinition>
                </Grid.RowDefinitions>
                <MediaPlayerElement Width="400" Height="400" Grid.Row="0"  x:Name="_mediaPlayerElement" AreTransportControlsEnabled="False" HorizontalAlignment="Stretch" />
                <Grid x:Name="tes" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" >
                </Grid>
            </Grid>
        </StackPanel>
    

    In the code behind,

            private void Page_Loaded(object sender, RoutedEventArgs e)
            {
                CreateCompositionSurfaceBrushVideo();
            }
    
            public void CreateCompositionSurfaceBrushVideo()
            {
                // MediaPlayer set up with a create from URI  
                var _mediaPlayer = new MediaPlayer();
                // Get a source from a URI. This could also be from a file via a picker or a stream
                var source = MediaSource.CreateFromUri(new Uri("http://go.microsoft.com/fwlink/?LinkID=809007&clcid=0x409"));
                var item = new MediaPlaybackItem(source);
                _mediaPlayer.Source = item;
                _mediaPlayer.IsLoopingEnabled = true;
                _mediaPlayerElement.SetMediaPlayer(_mediaPlayer);
                _mediaPlayer.Play();
                
                var _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    
                // Get the surface from MediaPlayer and put it on a brush
                var _videoSurface = _mediaPlayer.GetSurface(_compositor);
                CompositionSurfaceBrush _videoBrush = _compositor.CreateSurfaceBrush(_videoSurface.CompositionSurface);
                _videoBrush.Stretch = CompositionStretch.UniformToFill;
                //_videoBrush.HorizontalAlignmentRatio = 0.5f;
                //_videoBrush.VerticalAlignmentRatio = 0.5f;
                _videoBrush.Offset = new Vector2(50, 50);
                SpriteVisual _videoVisual = _compositor.CreateSpriteVisual();
                _videoVisual.Brush = _videoBrush;
                _videoVisual.Size = new Vector2(300, 300);//zoomed areas of a media stream 
                ElementCompositionPreview.SetElementChildVisual(tes, _videoVisual);
    
            }
    

    For more details, you can refer to Paint with a video.

    Best regards,

    Breeze


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by dannyfarwin Monday, December 4, 2017 3:14 PM
    Monday, December 4, 2017 8:03 AM