zoukankan      html  css  js  c++  java
  • H265视频流媒体播放器EasyWasmPlayer在项目中集成报错Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

    作为TSINGSEE青犀视频开发的视频流媒体播放器,EasyPlayer系列项目都是支持集成以及二次开发的,也可以通过下载试用获得真是的测试效果,其中新的H265播放器分支EasywasmPlayer播放器是网页播放的主流播放器。

    H265播放器EasywasmPlayer已经在多个用户项目中实现了集成和播放,当然也有用户在集成中遇到报错情况来咨询我们,比如有用户项目集成报错:SyncPlayer.js:642 Uncaught TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)

    从错误信息描述提示截图的元素是不存在的,但是本地测试并没有问题。因此我们进入用户现场,在现场排查发现用户自定义了播放器样式,导致了按照位置取获取截图的元素,无法获取。

    找到SyncPlayer.Js文件,更改之前获取元素的方法,参照下图做优化,即可解决该用户项目集成的问题。

        var video = this.playerUI.getElementsByTagName('canvas')[0];
        if (video == undefined) {
          video = this.playerUI.getElementsByTagName('video')[0];
        }
    

    EasyPlayer项目还包括EasyPlayer RTSP、EasyPlayer RTMP、EasyPlayerPro 和EasyPlayer.js 等播放器,具备更高的可用性和更低的延时性,欢迎大家了解。

  • 相关阅读:
    工资低的.Net程序员,活该你工资低
    React- jsx的使用 使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px
    React 使用jsx
    node.js 简介
    转换成数值 parseInt与parseFloat; (toString) 转化为字符串
    函数 封装性划分私有空间
    favicon 不显示的问题总结1
    js进阶 offset
    前端缓存技术
    图片的预加载与懒加载
  • 原文地址:https://www.cnblogs.com/TSINGSEE/p/14597923.html
Copyright © 2011-2022 走看看