需求描述
最近有需求实现浏览器直接播放摄像头视频
鉴于Camera本身支持了rtsp流,本想web直接播放rtsp,但是还不行,搜了一下webRTC实现的效果和延迟会好一些。于是就使用了mediaMTX转了下rtsp的流,变为webRTC。
随便写了个h5页面对视频进行播放,使用下面代码的话替换一下src地址即可
点击查看代码
<!DOCTYPE html>
<html>
<head><title>WebRTC Video Stream Example</title><style>#video-frame {width: 640px;height: 480px;border: 1px solid black;}</style>
</head>
<body><div><iframe id="webrtc-frame" src="http://172.16.1.28:8889/stream" width="1280" height="720" scrolling="no" frameborder="0" allowfullscreen></iframe><button id="fullscreen-button">Toggle Fullscreen</button> </div><script>var iframeElement = document.getElementById("webrtc-frame");function enterFullscreen() {if (iframeElement.requestFullscreen) {iframeElement.requestFullscreen();} else if (iframeElement.mozRequestFullScreen) {iframeElement.mozRequestFullScreen();} else if (iframeElement.webkitRequestFullscreen) {iframeElement.webkitRequestFullscreen();} else if (iframeElement.msRequestFullscreen) {iframeElement.msRequestFullscreen();}}function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}}document.getElementById("fullscreen-button").addEventListener("click", function() {if (isFullScreen()) {exitFullscreen();} else {enterFullscreen();}});function isFullScreen() {return document.fullscreenElement ||document.mozFullScreenElement ||document.webkitFullscreenElement ||document.msFullscreenElement;}</script>
</body>
</html>
报错排查
上面代码没啥问题第一个摄像头正常播放,但加了个其他的摄像头却不行,一直报错
the stream doesn't contain any supported codec, which are currently AV1, VP9, VP8, H264, Opus, G722, G711, LPCM, retrying in some seconds
排查了下发现:
新的摄像头推的是h265的流,而mediaMTX版本193还不支持,看了下最新版29天前刚刚更新,已经支持h265了,于是升级了下版本就解决掉了。
紧接着下一个报错就来了:
[WebRTC] [session 03d8bba9] closed: codecs not supported by client
Emmmmmm,这一打眼看就是客户端的事情呗,难道我的chrome有问题?
于是看了别的博客写了127版本就支持了WebRTC的h265解码,只需要加参数就行了
但是试过依然不行。。。。。
于是依次尝试:
1、排查是否是硬件不支持
使用DXVAChecker检测是否是硬件本身不支持的原因,发现是有hevc解码功能
2、开启/关闭chrome的硬件加速模式
手动切换chrome://flags中的decode的enabled/disabled模式,发现硬件加速模式已经开启了
3、查看chrome://gpu
其中Video Acceleration Information确实发现没有h265相关信息
解决方案
gitlib中找到对应的chrome浏览器内核chromium
链接: https://github.com/StaZhu/enable-chromium-hevc-hardware-decoding/releases
直接找对应的版本下载,安装成功后是这样的
然后打开运行直接播放了
最后的最后,纠结的是浏览器啥时候能普遍支持啊。。。。。