视频渲染_渲染视频 - CSDN
  • 遇到一个小需求,需要在页面进行简单的多个视频的获取以及渲染,就想看看有没有除了video.js、mediaElement.js 等视频播放器之类的,较为轻量的。恰好朋友推荐一个播放器还不错,api也较为全面,使用也很简单,就...

    遇到一个小需求,需要在页面进行简单的多个视频的获取以及渲染,就想看看有没有除了video.js、mediaElement.js 等视频播放器之类的,较为轻量的。恰好朋友推荐一个播放器还不错,api也较为全面,使用也很简单,就决定用它了。这里链接

    在页面渲染视频

    写一个ul进行存放

    <div>
        <ul id="list">
        </ul>
    </div>
    

    使用Ajax与后端进行数据获取

    <script>
        var xmlhttp;
        var videos=[];
    	//对于Ajax在菜鸟教程有很明确的例子
        function request() {
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readyState == 4是表示已经完成请求
                    var reponse = JSON.parse(xmlhttp.responseText);
                    var lists = reponse.data;
                    for (var i = 0; i < lists.length; i++) {
                        var video = {};								//将获取的视频url还有名称进行存放在一个数组中进行遍历
                        video.videoName = lists[i].videoName;
                        video.videoAddress = lists[i].videoAddress;
                        videos.push(video);
                    }
                    var list=document.getElementById("list");
                    var content='';
                    for (var i = 0; i < videos.length; i++) {
                        var id='video'+i;
                        content+="<li><h1>"+videos[i].videoName+"</h1><div id=\""+id+"\"></div></li>"
                        //动态进行`li`和`div`的添加
                    }
                    list.innerHTML=content;
                    for (var i = 0; i < videos.length; i++) {
                        var id='video'+i;
                        new HlsJsPlayer({
                            id:id,
                            url: videos[i].videoAddress
                        });
                    }
    
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
            xmlhttp.send();
        }
    
        request();
    
    </script>
    
    
    展开全文
  • 参考:https://zhuanlan.zhihu.com/p/35679418
    展开全文
  • DirectShow之视频渲染

    2018-12-25 20:22:47
    概述  DirectShow提供了几种渲染视频的滤镜:  ·Video Renderer filter:此过滤器适用于支持DirectX的所有平台,并且... 此筛选器是比Windows XP早的平台上的默认视频渲染器。  ·Video Mixing Renderer F...

    概述

        DirectShow提供了几种渲染视频的滤镜:

       ·Video Renderer filter:此过滤器适用于支持DirectX的所有平台,并且没有特定的系统要求。 Video Renderer尽可能使用DirectDraw来呈现视频; 否则,它使用GDI。 此筛选器是比Windows XP早的平台上的默认视频渲染器。

       ·Video Mixing Renderer Filter 7 (VMR-7):VMR-7在Windows XP上可用,它是默认的视频渲染器。 VMR-7总是使用DirectDraw 7进行渲染。 它提供了旧版Video Renderer过滤器中没有的许多强大功能,包括应用程序控制用于渲染的DirectDraw表面的插件模型。

        ·Video Mixing Render Filter 9 (VMR-9):VMR-9是使用Direct3D 9进行渲染的视频混合渲染器的更新版本。 它适用于支持DirectX的所有平台。 但它不是默认的渲染器,因为它比Video Renderer过滤器具有更高的系统要求。

        ·Overlay Mixer滤镜专为DVD播放和广播视频而设计。 它还支持视频端口扩展(VPE),使其能够与硬件MPEG-2解码器或将视频直接发送到图形卡的模拟电视调谐器。

        ·增强视频渲染器(EVR)过滤器在Windows Vista中可用。 与早期的视频渲染器相比,它提供了改进的视频性能,尤其是在启用Windows Vista桌面组合时

     

       DirectShow视频渲染器可以在窗口模式或无窗口模式下运行:

      ·在窗口模式下,渲染器创建自己的窗口来显示视频。 通常,您将使此窗口成为应用程序窗口的子项。

      ·在无窗口模式下,渲染器将视频直接拖到应用程序窗口上。 它不创建它自己的窗口

       Video Renderer过滤器仅支持窗口模式。 VMR-7和VMR-9过滤器支持这两种模式。 它们默认为窗口模式以实现向后兼容,但无窗口模式是首选。 EVR仅支持无窗口模式。

     

    Choosing the Right Video Renderer

       主要使用哪个渲染器取决于您需要支持哪些版本的Windows

       ·在Windows Vista及更高版本中,如果硬件支持,则应用程序应使用EVR。 否则,回到VMR-9或VMR-7。 EVR提供比以前的渲染器更好的性能和更好的视频质量。 此外,它旨在与桌面窗口管理器(DWM)一起使用。

       ·在Windows Vista之前,如果硬件支持它并且不需要视频端口功能,请使用VMR-9。 否则,请使用VMR-7。

       ·在较旧的系统上,您可能需要使用Overlay Mixer(用于视频端口或硬件叠加支持)或旧式Video Renderer过滤器。

       IGraphBuilder :: Render和RenderFile方法默认使用VMR-7。 如果硬件不支持VMR-7,这些方法将回退到传统的Video Renderer过滤器。 EVR和VMR-9绝不是默认的渲染器。

     

    窗口模式

        在窗口模式下,视频渲染器创建自己的窗口,在该窗口绘制视频帧。 除非另有说明,否则此窗口是具有自己的边框和标题栏的顶层窗口。 但是,大多数情况下,您会将视频窗口附加到应用程序窗口,以便将视频集成到应用程序UI中。 这需要以下步骤:

       1.查询IVideoWindow。

       2.设置父窗口。

       3.设置新的窗口样式。

       4.将视频窗口放置在所有者窗口内。

       5.通知WM_MOVE消息的视频窗口。

     

    Query for IVideoWindow

        在开始播放之前,请在Filter Graph Manager中查询IVideoWindow接口

    IVideoWindow *pVidWin = NULL;
    pGraph->QueryInterface(IID_IVideoWindow, (void **)&pVidWin);

     

    Set the Parent Window

     

        要设置父窗口,请调用带有应用程序窗口句柄的IVideoWindow :: put_Owner方法。 这个方法接受一个OAHWND类型的变量,所以把句柄转换为这种类型:

    pVidWin->put_Owner((OAHWND)hwnd);

     

    Set New Window Styles

     

        通过调用IVideoWindow :: put_WindowStyle方法来更改视频窗口的样式:

    pVidWin->put_WindowStyle(WS_CHILD | WS_CLIPSIBLINGS);

       WS_CHILD标志将窗口设置为子窗口,并且WS_CLIPSIBLINGS标志防止窗口在另一个子窗口的客户区域内绘制。

     

    Position the Video Window

        要设置视频相对于应用程序窗口客户区的位置,请调用IVideoWindow :: SetWindowPosition方法。 此方法采用指定视频窗口的左边缘,顶边缘,宽度和高度的矩形。 例如,以下代码将视频窗口拉伸到适合父窗口的整个客户区:

    RECT rc;
    GetClientRect(hwnd, &rc);
    pVidWin->SetWindowPosition(0, 0, rc.right, rc.bottom);

        要获得视频的原始大小,请在Filter Graph Manager上调用IBasicVideo :: GetVideoSize方法。 您可以使用该信息来缩放视频并保持正确的宽高比。

     

    Respond to WM_MOVE Messages

       为了获得最佳性能,每当窗口在图形暂停时移动时,都应通知视频渲染器。 调用IVideoWindow :: NotifyOwnerMessage方法来转发WM_MOVE消息:

    // (Inside your WindowProc)
    case WM_MOVE:
        pVidWin->NotifyOwnerMessage((OAHWND)hWnd, msg, wParam, lParam);
        break;

        如果渲染器正在使用硬件叠加层,则此通知将导致渲染器更新叠加层位置。 (VMR-9不使用叠加层,因此如果您使用VMR-9,则无需调用此方法。)

     

    Cleap Up

       在应用程序退出之前,停止图形并将视频窗口的所有者重置为NULL。 否则,窗口消息可能被发送到错误的窗口,这可能会导致错误。 此外,隐藏视频窗口,否则您可能会在屏幕上瞬间看到视频图像闪烁:

    pControl->Stop(); 
    pVidWin->put_Visible(OAFALSE);
    pVidWin->put_Owner(NULL);  

     

     

     

    无窗口模式

    Configure the VMR for Windowless Mode

    ·VMR-7

       1.创建过滤器图形管理器。

       2.创建VMR-7并将其添加到过滤器图形中。

       3.使用VMRMode_Windowless标志在VMR-7上调用IVMRFilterConfig :: SetRenderingMode。

       4.查询IVMRWindowlessControl接口的VMR-7。

       5.在VMR-7上调用IVMRWindowlessControl :: SetVideoClippingWindow。指定视频应该出现的窗口的句柄。

    ·VMR-9   

       1.创建过滤器图形管理器。

       2.创建VMR-9并将其添加到过滤器图形中。

       3.使用VMR9Mode_Windowless标志调用VMR-9上的IVMRFilterConfig9 :: SetRenderingMode。

       4.查询IVMRWindowlessControl9界面的VMR-9。

       5.在VMR-9上调用IVMRWindowlessControl9 :: SetVideoClippingWindow。 指定视频应该出现的窗口的句柄。

     

       以下代码显示了一个辅助函数,它可以创建VMR-7,将其添加到图形中,并设置无窗口模式。

    HRESULT InitWindowlessVMR( 
        HWND hwndApp,                  // Window to hold the video. 
        IGraphBuilder* pGraph,         // Pointer to the Filter Graph Manager. 
        IVMRWindowlessControl** ppWc   // Receives a pointer to the VMR.
        ) 
    { 
        if (!pGraph || !ppWc) 
        {
            return E_POINTER;
        }
        IBaseFilter* pVmr = NULL; 
        IVMRWindowlessControl* pWc = NULL; 
        // Create the VMR. 
        HRESULT hr = CoCreateInstance(CLSID_VideoMixingRenderer, NULL, 
            CLSCTX_INPROC, IID_IBaseFilter, (void**)&pVmr); 
        if (FAILED(hr))
        {
            return hr;
        }
        
        // Add the VMR to the filter graph.
        hr = pGraph->AddFilter(pVmr, L"Video Mixing Renderer"); 
        if (FAILED(hr)) 
        {
            pVmr->Release();
            return hr;
        }
        // Set the rendering mode.  
        IVMRFilterConfig* pConfig; 
        hr = pVmr->QueryInterface(IID_IVMRFilterConfig, (void**)&pConfig); 
        if (SUCCEEDED(hr)) 
        { 
            hr = pConfig->SetRenderingMode(VMRMode_Windowless); 
            pConfig->Release(); 
        }
        if (SUCCEEDED(hr))
        {
            // Set the window. 
            hr = pVmr->QueryInterface(IID_IVMRWindowlessControl, (void**)&pWc);
            if( SUCCEEDED(hr)) 
            { 
                hr = pWc->SetVideoClippingWindow(hwndApp); 
                if (SUCCEEDED(hr))
                {
                    *ppWc = pWc; // Return this as an AddRef'd pointer. 
                }
                else
                {
                    // An error occurred, so release the interface.
                    pWc->Release();
                }
            } 
        } 
        pVmr->Release(); 
        return hr; 
    } 

        此功能假定仅显示一个视频流,而不是在视频上混合静态位图。你可以这样调用这个函数:

    IVMRWindowlessControl *pWc = NULL;
    hr = InitWindowlessVMR(hwnd, pGraph, &g_pWc);
    if (SUCCEEDED(hr))
    {
        // Build the graph. For example:
        pGraph->RenderFile(wszMyFileName, 0);
        // Release the VMR interface when you are done.
        pWc->Release();
    }

     

     

     

    Positon the Video

    ·VMR-7

       1.调用IVMRWindowlessControl :: SetVideoPosition方法来指定两个矩形。

       2.源矩形必须等于或小于原始视频大小; 您可以使用IVMRWindowlessControl :: GetNativeVideoSize方法获取原生视频大小。

    ·VMR-9

       1.调用IVMRWindowlessControl9 :: SetVideoPosition方法来指定两个矩形。

       2.源矩形必须等于或小于原始视频大小; 您可以使用IVMRWindowlessControl9 :: GetNativeVideoSize方法来获取原生视频大小。

       例如,以下代码设置VMR-7的源矩形和目标矩形。 它将源矩形设置为等于整个视频图像,目标矩形等于整个窗口客户区:

    // Find the native video size.
    long lWidth, lHeight; 
    HRESULT hr = g_pWc->GetNativeVideoSize(&lWidth, &lHeight, NULL, NULL); 
    if (SUCCEEDED(hr))
    {
        RECT rcSrc, rcDest; 
        // Set the source rectangle.
        SetRect(&rcSrc, 0, 0, lWidth, lHeight); 
        
        // Get the window client area.
        GetClientRect(hwnd, &rcDest); 
        // Set the destination rectangle.
        SetRect(&rcDest, 0, 0, rcDest.right, rcDest.bottom); 
        
        // Set the video position.
        hr = g_pWc->SetVideoPosition(&rcSrc, &rcDest); 
    }
    

     

     

     

    Handle Window Messages

    ·VMR-7

        1.WM_PAINT。 调用IVMRWindowlessControl :: RepaintVideo。 此方法会导致VMR-7重新绘制最近的视频帧。                 2.WM_DISPLAYCHANGE:调用IVMRWindowlessControl :: DisplayModeChanged。 此方法通知VMR-7必须以新的分辨率或颜色深度显示视频。

        3.WM_SIZE或WM_WINDOWPOSCHANGED:重新计算视频的位置并在需要时调用IVMRWindowlessControl :: SetVideoPosition更新位置。

    ·VMR-9

       1.WM_PAINT。 调用IVMRWindowlessControl9 :: RepaintVideo。 此方法会导致VMR-9重新绘制最近的视频帧。                2.WM_DISPLAYCHANGE:调用IVMRWindowlessControl9 :: DisplayModeChanged。 此方法通知VMR-9必须以新的分辨率或颜色深度显示视频。

       3.WM_SIZE或WM_WINDOWPOSCHANGED:重新计算视频的位置并在需要时调用IVMRWindowlessControl9 :: SetVideoPosition更新位置。

     

        以下示例显示了一个WM_PAINT消息处理程序。 它绘制由客户矩形减去视频矩形定义的区域。 不要在视频矩形上绘制,因为VMR会覆盖它,导致闪烁。 出于同样的原因,不要在窗口类中设置背景画笔。

    void OnPaint(HWND hwnd) 
    { 
        PAINTSTRUCT ps; 
        HDC         hdc; 
        RECT        rcClient; 
        GetClientRect(hwnd, &rcClient); 
        hdc = BeginPaint(hwnd, &ps); 
        if (g_pWc != NULL) 
        { 
            // Find the region where the application can paint by subtracting 
            // the video destination rectangle from the client area.
            // (Assume that g_rcDest was calculated previously.)
            HRGN rgnClient = CreateRectRgnIndirect(&rcClient); 
            HRGN rgnVideo  = CreateRectRgnIndirect(&g_rcDest);  
            CombineRgn(rgnClient, rgnClient, rgnVideo, RGN_DIFF);  
            
            // Paint on window.
            HBRUSH hbr = GetSysColorBrush(COLOR_BTNFACE); 
            FillRgn(hdc, rgnClient, hbr); 
    
            // Clean up.
            DeleteObject(hbr); 
            DeleteObject(rgnClient); 
            DeleteObject(rgnVideo); 
    
            // Request the VMR to paint the video.
            HRESULT hr = g_pWc->RepaintVideo(hwnd, hdc);  
        } 
        else  // There is no video, so paint the whole client area. 
        { 
            FillRect(hdc, &rc2, (HBRUSH)(COLOR_BTNFACE + 1)); 
        } 
        EndPaint(hwnd, &ps); 
    } 

    参考:

    https://www.yuque.com/docs/share/6c6329ba-62e6-4b66-8d01-0c57d47828de

    展开全文
  • 1.视频渲染窗口上子窗口设置透明出现阴影问题 平时为了方便代码管理,一般窗口上设置窗口或者控件,都会设置Parent(setParent),这样对主窗口进行某种操作,不需要用代码去管理其他窗口。 但是在视频渲染窗口上...

    开发环境

    Qt5.9.6+VS2015

    1.视频渲染窗口上子窗口设置透明出现阴影问题

    平时为了方便代码管理,一般窗口上设置窗口或者控件,都会设置Parent(setParent),这样对主窗口进行某种操作,不需要用代码去管理其他窗口。
    但是在视频渲染窗口上设置子窗口或者子控件,哪怕将子窗口或者子控件设置透明无边框,还是会出现一个阴影背景。

    阴影问题出现的效果图:
    在这里插入图片描述

    出现的原因:由于视频窗口背景颜色一般情况下都是灰色阴影背景,当子窗口和子控件继承视频窗口时,会默认使用视频窗口的背景颜色,所以导致上述问题出现。

    Qt有三种窗口显示方式:Qt::Widget,Qt::Dialog,Qt::Windows。
    其中Widget强制使用父窗体背景。
    以下提供解决方法有两种。

    解决办法一:
    先设置无边框和透明化。

    MediaPlayer.setWindowFlags(Qt::FramelessWindowHint | Qt::SubWindow);
    MediaPlayer.setAttribute(Qt::WA_TranslucentBackground, true);
    

    然后重载MediaPlayer中paintEvent方法。

    void MediaPlayer::paintEvent(QPaintEvent *e)
    {
        QPainter painter(this);
        painter.fillRect(this->rect(), m_color);
    }
    

    这种解决办法可以解决问题,但是使用不方便。

    解决方法二:
    使用Dialog的显示方法,使用于窗口和控件。

    MediaPlayer.setWindowFlags(Qt::FramelessWindowHint | Qt::Dialog);
    MediaPlayer.setAttribute(Qt::WA_TranslucentBackground, true);
    

    阴影问题解决后的效果图:
    在这里插入图片描述

    2.主窗口缩放导致视频渲染窗口部分出现视频闪烁问题

    这种问题主要出现在调用第三方库渲染视频的时候缩放窗口就会出现视频闪烁问题。
    产生闪烁的主要原因是由于Qt自身的渲染引擎和第三方库渲染冲突造成的。
    因此解决办法可以采用屏蔽Qt自身的渲染。

    屏蔽方法有两种:
    第一种方法,重载QPaintEngine方法。
    首先在视频渲染窗口构造函数中添加。

    setAttribute(Qt::WA_PaintOnScreen,true);
    

    然后重载QPaintEngine接口,直接返回即可。

    QPaintEngine *MediaPlayer::paintEngine()
    {
    	return 0;
    }
    
    

    第二种方法,直接设置窗口关闭自动刷新。

    MediaPlayer.setUpdatesEnabled(false);
    

    以上的办法可以从根本上解决视频闪烁问题,但是在屏蔽Qt自身渲染的时候,一定要使用得当,毕竟Qt窗口初始化的时候,是需要调用Updates的,不然窗口会一片空白的哦

    下面还有一种方法,改变窗口缩放样式。
    windows下有一种窗口缩放样式:
    在这里插入图片描述
    因此也可以采用这种缩放模式,完美的避免了窗口闪烁的问题。
    实现的方式有两种:
    第一种是调用WinAPI实现。
    第二种是Qt调用橡皮筋类模拟阴影窗口实现。

    WinAPI实现代码部分:
    https://download.csdn.net/download/qq_36651243/11247196

    Qt调用橡皮筋类模拟阴影窗口实现效果图:
    在这里插入图片描述

    最后还有一种方法,叫双缓冲技术,有兴趣的可以去网上了解下。

    展开全文
  • 目前Unity 渲染成视频大部分朋友采用的是截屏录像的...针对这一问题Renderhead工作室推出了AVPro Movie Capture插件,简化了Unity渲染的步骤,极大的降低的使用Unity进行视频渲染的门槛,让人可以将精力集中在产品上
  • SDL2音视频渲染入门

    2019-06-10 10:50:30
    其主要用于游戏开发中的多媒体处理,如视频渲染,音频播放,鼠标/键盘控制等操作。它对外接供了一套统一的接口,但在内部,它会根据不同平台调用不同的底层 API库。如在 Linux 系统下,它会使用 opengl 做渲染,而在...
  • 视频渲染(显示)技术

    2011-02-23 14:16:00
    1. 常见播放器的视频渲染方法1.1 TCPMPTCPMP不是基于DirectShow架构的播放器,TCP是跨平台的,并可在移动设备上运行。在Windows以及Window Mobile上,TCPMP的视频渲染可以有DirectDraw,GDI,ASCII控制终端三种选择...
  • android 的视频渲染

    2014-10-17 14:39:50
    android平台视频渲染:surface -> ANativeWindow -> EGL ->open
  • 此部分为webrtc视频渲染显示,代码结构如下:    其实此部分代码与《webrtc视频引擎之vedio_capture_module介绍》的代码结构一样  1,图中能够直接看到的.h和.cc文件也是一个适配作用,用于根据系统平台适配采用...
  • IOS视频渲染相对编解码要简单一些,系统也提供了GLKView,当然我们也可以自定义实现。这里我就分享下自己实现的一点经验。 自定义的renderframe #import @class AVCaptureVideoPreviewLayer; class I420VideoFrame;...
  • madVR是一款高品质的DirectShow视频渲染器。该软件非常实用,能够兼容非常多的视频播放器,在播放器播放视频时,你可以通过该软件得到高质量的图像,madVR可以和绝大部分的播放器一起使用,像Media Player Classic -...
  • D3D11视频渲染

    2019-05-23 14:59:24
    我之前写的RTSP播放器D3D渲染部分使用的是D3D9的API,前面一篇文章已经提到渲染性能比较差,还不及OpenGL。我目前使用的电脑支持...经过一番摸索之后,终于渲染视频了。立马测一下性能,结果把我惊到了,渲染1000...
  • 我之前写过一个简单的RTSP播放器(https://github.com/greenjim301/rtsp),当时的视频渲染是用D3D实现的。一直想尝试一下用OpenGL来渲染视频,但却不得空,最近有时间就决定在之前的RTSP播放器基础上实现OpenGL渲染...
  • 目前大多数iOS端的视频渲染都使用OpenGLES,但如果仅仅为了渲染而不做其他的例如美颜等效果,其实可以使用iOS8.0新出的AVSampleBufferDisplayLayer。对AVSampleBufferDisplayLayer,官方说明中有一句话,“The ...
  • 1、视频覆盖:  大概在1995年,当mpeg1(VCD)回放在PC上开始流行的时候,pc的处理能力还么有强大到实时播放的地步。显卡制造厂商适时的推出了"video overlay(视频覆盖)"的技术。它就是种在显卡上用硬件完成同时...
  • 视频渲染连接过程

    2011-07-17 17:34:04
    要为CE做硬件解码的filter,除了驱动...视频渲染组件,是整个filter模型的最后一个环境,负责显示和输出。视频渲染只是显示驱动的控制者,不需要进行媒体sample的处理。 视频渲染有2个输出途径:1、 GDI2、 Ddraw
  • 在Windows平台下的视频播放技术主要有以下三种:GDI,Direct3D和OpenGL;也经常看到DirectDraw这个技术,根据维基介绍,DirectDraw是微软弃用的一个API,曾经是DirectX API的一部分。 二、GDI 图形设备接口...
  • iOS下 WebRTC 视频渲染

    2017-10-20 11:22:02
    点击上方“iOS开发”,选择... 关键时刻,第一时间送达! ...今天为大家介绍一下 iOS 下 WebRTC是如何渲染视频的。在iOS中有两种加速渲染视频的方法。一种是使用OpenGL;另一种是使用 Metal。 OpenGL的好处是
  • qt视频渲染画面闪烁

    2016-01-27 09:50:22
    用第三方库给qt窗口渲染时候,当移动窗口更改大小时候,画面出现闪烁现象。原因: widget属性updatesEnabled默认是true,这个时候按照qt文档说法就是 An updates enabled widget receives paint events and has a ...
  • D3D视频渲染入门程序.

    2017-11-10 10:44:04
    学习D3D必备的基础知识: ...5. 计算机图形学基础(三维变换,渲染,灯光等)。 一个D3D程序的基本结构: 一个基本的D3D程序,渲染显示一个空白窗口,代码如下: [cpp] view plain copy
1 2 3 4 5 ... 20
收藏数 75,067
精华内容 30,026
关键字:

视频渲染