基于海思3519DV500的网页无插件视频播放方案

柔情的菜刀

于 2024-04-23 20:22:31 发布

阅读量1.6k

点赞数 40

文章标签：音视频

本文链接：https://blog.csdn.net/qq_34912332/article/details/138135909

版权

一、什么是基于网页无插件播放视频？

基于IPC的网页无插件播放视频，是指通过利用网络摄像机技术，将视频流直接传输到网页上，实现无需安装任何插件即可播放视频的功能。这种技术充分利用了现代浏览器的功能，通过WebRTC（Web Real-Time Communication，网页实时通信）等协议，实现视频流的实时传输和播放。

二、基于网页无插件播放视频的优势

实时性强：基于IPC的网页无插件播放视频能够实时传输视频流，保证用户能够实时观看到最新的视频内容，无需等待视频文件下载完成。
高效稳定：基于这种技术的网页视频播放，不仅能够保证视频的流畅播放，还能有效减少卡顿和延迟现象。
安全可靠：无需安装任何插件，避免了插件可能带来的安全风险。同时，基于IPC的视频播放还支持加密传输，保障视频内容的安全性。

三、如何实现基于网页无插件播放视频？

如上图所示，板端配置如下：

#define HTTP_URL    "http://192.168.0.34:8080/live/01.flv"
#define RTMP_URL    "rtmp://192.168.0.34:1935/live/01"
#define RTSP_URL    "rtsp://admin:a123456789@192.168.0.34"

在实际应用中，我们使用ffmpeg工具从本机拉取RTSP视频流（相比直接从venc取数，这种方式会有一定的延时）。随后，我们将拉取到的原始视频数据转换为flv格式，并推送至RTMP服务器。这一过程的关键代码如下所示：

avformat_alloc_output_context2(&ofmt_ctx, nullptr, "flv", rtmp_info->szRtmpUrl);
if (!ofmt_ctx)
{
    ERROR_LOG("Could not create output context\n");
    Sleep(3);
    goto RTSP_START;
}

for (int i = 0; i < pFormatCtx->nb_streams; i++)
{
    AVStream* in_stream = pFormatCtx->streams[i];
    AVStream* out_stream = avformat_new_stream(ofmt_ctx, pFormatCtx->video_codec);
    if (!out_stream)
    {
        ERROR_LOG("Failed allocating output stream ");
        break;
    }

    s32Ret = avcodec_parameters_copy(out_stream->codecpar, in_stream->codecpar);
    if (s32Ret < 0)
    {
        ERROR_LOG("Failed to copy context from input to output stream codec context IR\n");
        break;
    }

    //ofmt_ctx->video_codec->codec_tags
    //out_stream->codec->codec_tag = 0;
    //if (ofmt_ctx->oformat->flags & AVFMT_GLOBALHEADER)
    //    out_stream->codec->flags |= AV_CODEC_FLAG_GLOBAL_HEADER;
}

av_dump_format(ofmt_ctx, 0, rtmp_info->szRtmpUrl, 1);
if (!(ofmt_ctx->oformat->flags & AVFMT_NOFILE))
{
    s32Ret = avio_open(&ofmt_ctx->pb, rtmp_info->szRtmpUrl, AVIO_FLAG_WRITE);
    if (s32Ret < 0)
    {
        ERROR_LOG("Could not open output URL rtmp %d", s32Ret);
        Sleep(3);
        goto RTSP_START;
    }
}

s32Ret = avformat_write_header(ofmt_ctx, NULL);
if (s32Ret < 0)
{
    ERROR_LOG("occurred when opening output URL");
    Sleep(3);
    goto RTSP_START;
}

也可使用一下命令：

ffmpeg -i rtsp://admin:a123456789@192.168.0.34/path/to/stream -c:v libx264 -an -f flv rtmp://192.168.0.34:1935/live/01

接下来，我们将创建一个HTTP服务器，用于响应Web端的数据请求。HTTP服务器的主要功能是监听特定的端口，接收来自客户端的HTTP请求，并返回相应的数据或执行特定的操作。

    /* rtmp server */
    std::thread rtmp_thread(vdec_sendframe_thread,&_AF_RTMP_INFO);
	auto rtmp_server = RtmpServer::Create(&event_loop);
	rtmp_server->SetChunkSize(60000);

	rtmp_server->SetEventCallback([](std::string type, std::string stream_path)
		{
		printf("[Event] %s, stream path: %s\n\n", type.c_str(), stream_path.c_str());
		});
	if (!rtmp_server->Start("192.168.0.34", 1935))
	{
		printf("RTMP Server listen on 1935 failed.\n");
	}

	/* http-flv server */
	HttpFlvServer http_flv_server;
	http_flv_server.Attach(rtmp_server);
	if (!http_flv_server.Start("192.168.0.34", 8080)) 
	{
		printf("HTTP FLV Server listen on 8080 failed.\n");
	}

为了将包含video元素的HTML和JavaScript文件放在HTTP服务器的目录下，并使其能够通过浏览器访问，你需要首先确保你的HTTP服务器正在运行，并且已经配置好了正确的目录来提供文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <script src="vue.js"></script>
  <script src="flvExtend.js"></script>

  <style>
    video::-webkit-media-controls-enclosure {
      display: none;
    }
  </style>
</head>

<body>
  <div class="video">
    <video id="video" width="1024" height="576" autoplay controls muted preload="none"></video>
  </div>

  <script>
    var player = document.getElementById('video');
    var flv = this.flv = new FlvExtend({
      element: video,
      frameTracking: true, // 追帧设置
      updateOnStart: true, // 点击播放按钮后实时更新视频
      updateOnFocus: true, // 回到前台后实时更新
      reconnect: true, // 断流后重连
      reconnectInterval: 2000, // 重连间隔(ms)
      maxReconnectAttempts: 10, // 最大重连次数
      trackingDelta: 2, // 追帧最大延迟
      showLog: true
    })

    this.player = this.flv.init(
      {
        type: 'flv',
        url: 'http://192.168.0.34:8080/live/01.flv',
        isLive: true,
        hasAudio: false,
        withCredentials: false
      },
      {
        enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
        autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
        stashInitialSize: 128, // 减少首帧显示等待时长
        enableWorker: true // 启用分离的线程进行转换
      }
    )
    this.player.play()
  </script>
</body>

</html>

为了确保通过输入http://192.168.0.34:80能够在网页上看见视频，你需要确保以下几点：

HTTP服务器配置：你的HTTP服务器应该运行在IP地址192.168.0.34上，并且监听80端口。如果你使用的是Python的http.server，你需要确保你的计算机的网络配置允许在192.168.0.34这个IP地址上启动服务，并且没有其他服务占用了80端口。
文件位置：你的index.html和js文件需要放在HTTP服务器能够访问到的目录中。如果你使用的是http.server，并且你已经在包含这些文件的目录下运行了服务器，那么这部分应该已经配置好了。
HTML和JavaScript代码：确保你的index.html文件中的video元素的src属性指向了正确的视频文件路径。如果视频文件和index.html在同一目录下，那么使用相对路径（如url: 'http://192.168.0.34:8080/live/01.flv'）应该就可以。
防火墙和网络设置：你需要确保防火墙允许80端口上的入站连接。此外，如果你的网络配置有特殊要求（如NAT转发、端口映射等），你需要确保这些配置正确无误。

最后，相较于编写代码，撰写博客往往显得力不从心。然而，上述所述的大致框架为您提供了一个出发点。我们诚挚地欢迎各位技术大咖共襄盛举，一同交流学习，共同提升我们的技术水平。

柔情的菜刀

关注

40
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
基于海思3519DV500的网页无插件视频播放方案

基于IPC的网页无插件播放视频，是指通过利用网络摄像机技术，将视频流直接传输到网页上，实现无需安装任何插件即可播放视频的功能。这种技术充分利用了现代浏览器的功能，通过WebRTC（Web Real-Time Communication，网页实时通信）等协议，实现视频流的实时传输和播放。
复制链接

扫一扫