chrome播放webRTC的H265视频方法

需求描述

最近有需求实现浏览器直接播放摄像头视频

鉴于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相关信息

解决方案

gayhub中找到对应的chrome浏览器内核chromium

链接: https://github.com/StaZhu/enable-chromium-hevc-hardware-decoding/releases

直接找对应的版本下载，安装成功后是这样的

然后打开运行直接播放了

最后的最后，纠结的是浏览器啥时候能普遍支持啊。。。。。