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