V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
shidu2003
V2EX  ›  JavaScript

如何在前端统计用户观看视频所消耗的流量?求教啊,大神们!

  •  
  •   shidu2003 · 38 天前 · 1458 次点击
    这是一个创建于 38 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题说明

    项目背景

    项目使用腾讯云点播服务进行视频内容分发。需要实现前端视频流量监控功能,当用户观看视频消耗的流量达到特定阈值时,自动终止视频播放。同时会将相关数据记录到数据库,为统计页面做准备。

    技术环境

    • 前端框架:uni-app ( Web 端)
    • 视频播放器:腾讯云视立方·播放器 SDK ( TCPlayer )

    已尝试方案

    1. 使用 Performance API 监控
      • 尝试通过 performance.getEntriesByType('resource') 获取视频资源的 transferSize
      • 问题:transferSize 始终返回 0 ,无法获取实际流量数据
    2. 通过播放器的 buffered() 方法估算流量
      • 实现思路:使用公式 (已缓冲时长 / 视频总时长) × 视频文件大小 计算流量消耗
      • 问题:当视频首次缓冲到 100% 后,即使用户拖动进度条触发新的数据下载,缓冲进度依然显示为 100%,导致无法统计到新增的流量消耗

    待解决问题

    1. 如何准确获取视频播放过程中的实时流量消耗
    9 条回复    2024-11-19 22:00:35 +08:00
    collen
        1
    collen  
       38 天前
    Performance
    pangzipp
        2
    pangzipp  
       38 天前
    类似使用 TS 切片。服务端下一个切片地址
    因为码率对应的流量是固定的。 应该可以算出流量统计
    realpg
        3
    realpg  
       38 天前
    ts 切片 head 请求每一个 ts 记录文件大小 相加
    shidu2003
        4
    shidu2003  
    OP
       38 天前
    @pangzipp
    @realpg
    好的大佬们,我这就去试一下。
    defaw
        5
    defaw  
       38 天前
    视频内容全部走 js 请求,然后把返回的 stream 包装一层,在包装层里统计流量消耗
    encro
        6
    encro  
       38 天前
    需求简化下,改为观看时长不就行了,其他正规网站都是这样做的呢。
    shidu2003
        7
    shidu2003  
    OP
       38 天前
    @encro 大佬你好,这个因为公司项目使用了`腾讯云点播服务`,用的视频链接是腾讯托管的,走这个是服务是要消耗购买的腾讯云点播流量,所以公司要求统计这个消耗的流量。

    云点播 VOD
    面向音视频、图片等媒体,提供制作上传、存储、转码、媒体处理、媒体 AI 、加速分发播放、版权保护等一体化的高品质媒体服务。
    lanced
        8
    lanced  
       38 天前   ❤️ 1
    仅靠前端没有办法准确获取视频流量消耗,跟视频传输协议,缓存策略,网络环境这些不可控因素有关,使用码率乘以播放时长可以得到一个大概的流量消耗。
    虚假建议:统计流量限制用户的一般是 VPN 软件,可以参考 VPN 软件的统计思路。尝试在 app 中启动一个 nodejs 服务,用来代理 App 发出的所有请求,通过这个代理来准确统计流量。
    真诚建议:跟产品讨论一下,修改需求。
    shidu2003
        9
    shidu2003  
    OP
       33 天前
    @lanced 确实啊,感觉前端搞这个老抽象了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5497 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 08:41 · PVG 16:41 · LAX 00:41 · JFK 03:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.