Video.js 截图 Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘

最新推荐文章于 2024-07-25 15:10:30 发布

wgg_126

最新推荐文章于 2024-07-25 15:10:30 发布

阅读量2.9k

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wgg_126/article/details/115372991

版权

Video.js 截图 Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

流媒体服务有一项功能是抓图，也就是从正在播放的视频流中获取图片。这个功能可以在服务

端实现，具体的思路也比较简单从视频流中获取一帧关键帧，解码后保存成一张图片并推送给请求

客户端就可以了。服务端实现简单但存在一个缺点-：实时性不高。经常抓到的图是数秒以后的图片。

其原因是客户端有播放延时，一般情况下公网下Web客户端播放rtmp及rtsp流延时在1-2S之间，播放

hls流延时在3-5S，这就意味着从正在播放的rtmp及rtsp流中抓图，基本上是1-2S以后的图片，从正

在播放的hls流抓图基本上是3-5秒以后图片。为此，再提供一种抓图模式：Web前端抓图。

H5 可以直接利用“video标签” 截图，基本代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>视频截图</title>

<script>

window.onload = function () {

var button = document.querySelectorAll('.screen')[0];

var video = document.querySelectorAll('video')[0];

var canvas = document.querySelectorAll('canvas')[0];

var ctx = canvas.getContext('2d');

var width = 640;

var height = 480;

canvas.width = width;

canvas.height = height;

video.src = ”http://192.168.1.102:12345/cgmedia/hls/getstream/addr=live/34020000001320000001@192.168.1.64_5060/34020000001320000001@192.168.1.64_5060.m3u8“;

video.width = width;

video.height = height;

video.controls = true;

video.autoplay = true;

button.onclick = function () {

ctx.drawImage(video, 0, 0, width, height);

};

};

</script>

</head>

</html>

　如果视频使用video.js播放请注意drawImage方法第一个参数不能直接传video,需要传video.childNodes[0]

否则会获取图片失败，报“Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value

is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVide oElement or

HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'错误。

如需交流可加QQ群766718184，1038388075 或者QQ3501870，

视频下载地址：http://www.chungen90.com/?news_33/

Demo下载地址： http://www.chungen90.com/?news_34

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。