The H265 video streaming media player EasyWasmPlayer integrated in the project reported an error Failed to execute'drawImage' on'CanvasRenderingContext2D'

As a video streaming media player developed by TSINGSEE Qingxi Video, the EasyPlayer series of projects support integration and secondary development. You can also download and try to get real test results. The new H265 player branch, EasywasmPlayer, is a web player. The mainstream player.

The H265 player EasywasmPlayer has been integrated and played in multiple user projects. Of course, there are also users who encounter errors during integration to consult us. For example, there is a user project integration error: 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)

60.png

The description of the error message indicates that the element in the screenshot does not exist, but there is no problem with the local test. Therefore, we entered the user site and found out that the user customized the player style during the on-site investigation, which resulted in the elements of taking screenshots according to the location, which could not be obtained.

61.png

Find the SyncPlayer.Js file, change the method of obtaining elements before, and optimize by referring to the figure below to solve the problem of user project integration.

62.png

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

63.png

The EasyPlayer project also includes players such as EasyPlayer RTSP, EasyPlayer RTMP, EasyPlayerPro and EasyPlayer.js, which have higher usability and lower latency. Welcome everyone to understand.

Guess you like

Origin blog.csdn.net/TsingSee/article/details/115246379