EasyPlayer.js如何实现Windows播放器实时流即时回放功能

H5流媒体播放器，作为基于HTML5技术的创新产品，近年来在音频和视频播放领域取得了显著的发展。它不仅为用户提供了流畅、稳定的播放体验，还通过丰富的交互功能增强了用户的参与感。

那么在实际应用中，如何实现Windows播放器实时流进行本地缓冲区即时回放功能呢？

1、背景说明

参照国内视频监控行业监控软件，实现当前视频的即时回放功能，例如：监控人员发现刚刚的某个视频点有可疑，就像录像回放一样，想倒回去看一下，但又不想切换到录像回放界面，此处就体现即时回放的价值了，还可将回放片段保存为录像文件。

2、操作办法

• 在视频播放时，将收到的帧数据写入待解码播放队列；
• 当用户切换到即时回放功能，则停止解码当前的帧；
• 在解码线程中修改使用者ID（涉及缓冲队列的设计）；
• 解码线程一直读取历史队列中的帧进行解码显示；
• 当读到队列的最后一帧时，再从头开始循环。

3、代码实现

int ChannelManager::InstantReplayProcess(MEDIA_VIDEO_CHANNEL_OBJ_T *pMediaChannel, CONSUMER_HANDLE *handle, 
                    BUFFER_TYPE_ENUM *bufferType, int *headerSize, char *headerData, int *payloadSize, char *payloadData)
{
if (NULL == pMediaChannel)      return -1;

int     ret = -1;
CONSUMER_HANDLE consumerHandle = *handle;

if (NULL == pMediaChannel->pInstantReplay)      return -1;

if ( pMediaChannel->pInstantReplay->instantReplay == 0x01 )
{
    if (NULL == pMediaChannel->pInstantReplay->bufQueueHandle)      //创建即时回放缓冲队列
    {
        //创建即时回放缓冲区
        int queueSize = pMediaChannel->pSourcePtr->GetQueueSize();
        BUFQUE_Create(&pMediaChannel->pInstantReplay->bufQueueHandle, 0, NULL, queueSize, MAX_PRE_RECORDING_SECS, 0, 1);

        //此处将sourcePtr中的bufqueue拷贝到 即时回放中的缓冲区
        CONSUMER_HANDLE consumerHandleInstantReplay = BUFQUE_RegisterConsumer(pMediaChannel->pInstantReplay->bufQueueHandle, 
                                                                                (unsigned int)pMediaChannel, 0x00);
        if (NULL == consumerHandleInstantReplay)
        {
            _TRACE(TRACE_LOG_DEBUG, "channel[%d]注册即时回放调用者失败.\n", pMediaChannel->id);

            BUFQUE_Release(&pMediaChannel->pInstantReplay->bufQueueHandle);
            return ret;
        }
        *handle = consumerHandleInstantReplay;
        consumerHandle = consumerHandleInstantReplay;
        pMediaChannel->pInstantReplay->consumerHandle = BUFQUE_RegisterConsumer(pMediaChannel->pInstantReplay->bufQueueHandle, 
                                                                            (unsigned int)pMediaChannel->pInstantReplay, 
                                                                            0x00);  //再注册一个，用于和consumerHandleInstantReplay循环使用


        pMediaChannel->pInstantReplay->frameNum = 0;
        pMediaChannel->pInstantReplay->frameNo  = 0;

        BUFFER_TYPE_ENUM    bufferType = BUFFER_TYPE_UNKNOWN;
        CONSUMER_HANDLE     consumerHandleTmp = NULL;
        consumerHandleTmp = pMediaChannel->pSourcePtr->RegisterConsumer((unsigned int)&pMediaChannel->pInstantReplay, 0x01);

        //从当前正在播放的缓冲队列中，拷贝数据到即时回放队列
        if (NULL != consumerHandleTmp)
        {
            int     headerSize = 0;
            EASY_FRAME_INFO     tmpFrameInfo;
            memset(&tmpFrameInfo, 0x00, sizeof(EASY_FRAME_INFO));

            BUFF_T      buffSource;
            memset(&buffSource, 0x00, sizeof(BUFF_T));
            BUFF_MALLOC(&buffSource, MAX_ENCODE_FRAME_SIZE);            //最大编码帧大小为MAX_ENCODE_FRAME_SIZE(1024*1024)

            int     writeKeyFrame = 0x00;
            int     bufferId = 0;
            do
            {
                //从队列中获取音视频和事件数据
                bufferType = BUFFER_TYPE_UNKNOWN;
                if (0 != pMediaChannel->pSourcePtr->GetSourceData(consumerHandleTmp, NULL, &bufferType, 
                                            &headerSize, (char *)&tmpFrameInfo, &buffSource.bufpos, buffSource.pbuf, 0x01))
                {
                    break;
                }

                //保证第一帧为视频关键帧
                if (writeKeyFrame == 0x01 || ( BUFFER_TYPE_VIDEO == bufferType && tmpFrameInfo.type == FRAME_TYPE_I) )
                {
                    BUFQUE_AddData(pMediaChannel->pInstantReplay->bufQueueHandle, ++bufferId, bufferType, headerSize, (char *)&tmpFrameInfo, buffSource.bufpos, buffSource.pbuf);
                    writeKeyFrame = 0x01;

                    pMediaChannel->pInstantReplay->frameNum ++;
                    //pMediaChannel->pInstantReplay->frameNo = 0;
                }

EasyPlayer.js播放器不仅支持H.264与H.265视频编码格式，也能支持WebSocket-FLV、HTTP-FLV、HLS（m3u8）、WebRTC、ws-fmp4、http-fmp4等格式的视频流，并具备直播、点播、录像、快照截图、MP4播放、多屏播放、倍数播放、全屏播放等功能特性。

随着5G技术的普及和互联网技术的进一步发展，H5流媒体播放器将迎来更加广阔的发展前景。一方面，5G技术将实现更高的传输速度和更低的延迟，为用户提供更加流畅、稳定的播放体验。另一方面，随着互动功能的不断丰富和完善，H5流媒体播放器将更好地满足用户的个性化需求。