通过JS脚本检查浏览器对视频编码的支持情况

在开发包含音视频功能的前端项目的时候，很多时候我们需要通过web组件播放一些音视频文件。但是和一些万能的播放器不一样，很多音视频封装格式、编码格式浏览器并不支持。因此，我们在播放视频之前需要检查浏览器是否支持对应的编码格式。这里就介绍一下如何通过js脚本检查当前浏览器是否支持某个编码格式。

在介绍检查方法之前，我们先介绍一下常用的编码格式:

H264编码格式

H.264是一种视频压缩编码标准，也称为Advanced Video Coding(AVC)。H.264 Baseline、H264 Main和H.264 High是H.264编码中的三个不同的配置文件。
H.264 Baseline 配置文件定位为较低的编码复杂度和较低的视频质量要求。它通常用于低性能设备、低带宽网络或对设备功耗要求较高的场景。与其他配置文件相比，它提供了较低的编码效率和功能。
H.264 Main 配置文件提供了更好的压缩效率和更高的视频质量，适用于大多数应用场景。它在编码效率和视频质量之间取得了平衡，可以在具有适度计算能力的设备上实现高质量的视频编码和解码。
H.264 High 配置文件提供了最高的编码效率和视频质量，适用于对视频质量要求非常高的场景，如高清视频和蓝光光盘。然而，编码和解码过程中需要更大的计算资源。

H.264 Baseline 对应的编码编号是codecs=“avc1.42E01E”
H.264 Main 对应的编码编号是codecs=“avc1.4D401E”
H.264 High 对应的编码编号是codecs=“avc1.64001E”

H265编码(HEVC)

HEVC(High Efficiency Video Coding)是一种视频压缩编码标准，也被称为H.265。HEVC Main和HEVC Main 10是HEVC编码中的两个不同的配置文件，表示不同的编码特性和功能。
HEVC Main配置文件是HEVC编码中最基本的配置文件，也是最常用的配置文件之一。它提供了较高的编码效率和视频质量，适用于大多数应用场景。HEVC Main配置文件支持8位色深(8 bits per sample)，在大多数普通视频播放和传输中提供了良好的性能。
HEVC Main 10配置文件提供了更高的色深支持，即10位色深(10 bits per sample)。相比于HEVC Main配置文件的8位色深，HEVC Main 10可以提供更加细腻和逼真的色彩表现，特别适用于需要更高级别图像细节的场景，如高动态范围(HDR)和广色域视频。

hevc main 对应的编码编号是codecs=“hev1.1.6.L93.B0”
hevc main 10 对应的编码编码是codecs=“hev1.2.4.L120.B0”

其它的编码格式信息参考下面的链接
https://cconcolato.github.io/media-mime-support/

如果只想判断当前浏览器是否能支持某个编码格式，我们可以创建一个video标签，通过canPlayType接口检查是否能播放该编码，如果返回probably或者maybe则代表能够播放，对应的实现如下所示:

//判断是否支持对应的编码格式
function isVideoDecodeHardwareAccelerated() {
    // 检查是否支持 WebGPU
    if (!navigator.gpu) {
    return false;
    }
    const video = document.createElement('video');
    // 尝试播放带有特定编解码器的视频
    const canPlayTypeResult = video.canPlayType('video/mp4; codecs="avc1.42E01E"');

    // 检查结果来判断是否支持
    if (canPlayTypeResult === 'probably' || canPlayTypeResult === 'maybe') {
    return true;
    }
    return false;
}

如果想进一步确定特定参数(分辨率、码率、帧率、编码方式)的视频，播放器能否播放，我们可以通过调用navigator.mediaCapabilities.decodingInfo接口来进行检查，通过判断对应的返回值来检查浏览器的支持情况。下面我通过示例，对常见的视频格式进行了检查。

async function getVideoAccelerationInformation() {
    const formats = [
    { type: 'file', video: { contentType: 'video/mp4; codecs="avc1.42E01E"',width:1920,height:1080,bitrate: 1000,framerate:24 }},       // h264 baseline
    { type: 'file', video: { contentType: 'video/mp4; codecs="avc1.4D401E"',width:1920,height:1080,bitrate: 1000,framerate:24 }},       // h264 main
    { type: 'file', video: { contentType: 'video/mp4; codecs="avc1.64001E"',width:1920,height:1080,bitrate: 1000,framerate:24 }},       // h264 high
    { type: 'webrtc', video: {  contentType: 'video/vp9', width: 1920, height: 1080, bitrate: 3000, framerate: 24  }},                  // vp9 profile 0
    //{ type: 'webrtc', video: {  contentType: 'video/vp9.2', width: 1920, height: 1080, bitrate: 3000, framerate: 24  }},              // vp9 profile 2
    { type: 'file', video: { contentType: 'video/mp4; codecs="hev1.1.6.L93.B0"',width:1920,height:1080,bitrate: 1000,framerate:24 }},   // hevc main
    { type: 'file', video: { contentType: 'video/mp4; codecs="hev1.2.4.L120.B0"',width:1920,height:1080,bitrate: 1000,framerate:24 }}    // hevc main 10
    ];

    const results = [];
    for (const format of formats) {
    //supported.supported       支持状态
    //supported.smooth          平滑度
    //supported.powerEfficient  功耗效率
    const supported = await navigator.mediaCapabilities.decodingInfo(format);
    results.push({
        mimeType: format.video.contentType,
        supported: supported.supported,
        smooth: supported.smooth,
        powerEfficient: supported.powerEfficient
        });
    }
    return results;
}
//获取各种视频编码的加速信息
let result = getVideoAccelerationInformation();
console.log(result);

检查了视频对应的参数之后，再进行浏览器播放，就可以避免由于浏览器的不兼容而导致的播放失败的问题了。