关于web前端如何播放二次加密m3u8视频的问题

Question

前端web项目，使用videojs或者aliplayer播放m3u8格式的视频时，服务器返回m3u8文件如下图

是加密播放，使用#EXT-X-KEY的url获取到key文件后，发现服务器对key文件进行了二次加密（加密方式是公司自己开发的），需要我在前端获取到key文件里的加密数据后进行解密，然后再让浏览器根据我解密后的key下载播放视频，这个需求如何实现

问题补充:不能暴露解密后的key文件，AI搜的就别发了，没有一个靠谱的

Answer 1

以下答案是由GPT4-pro回答，本人整理后的结果，如有帮助，还请采纳！
要在前端实现播放二次加密的 m3u8 视频，涉及到几个主要步骤：

1. 解析 m3u8 文件：获取 #EXT-X-KEY 标签，并从中提取出 key 的 URL。
2. 获取并解密 Key：从 key 的 URL 获取加密的 key 文件，使用前端提供的解密方法对其进行解密。
3. 解析加密后的 Media Playlist：下载并解析 m3u8 文件中的媒体分段。
4. 播放视频：通过解密后的 key 下载并播放视频分段。

以下是实现这一流程的详细步骤和示例代码。

1. 解析 m3u8 文件

使用 fetch 函数请求 m3u8 文件，提取 #EXT-X-KEY 标签中的 URL。

async function fetchM3U8(url) {
    const response = await fetch(url);
    const text = await response.text();
    return parseM3U8(text);
}

function parseM3U8(m3u8Text) {
    const lines = m3u8Text.split('\n');
    const keyUrl = lines.find(line => line.startsWith('#EXT-X-KEY'));
    return keyUrl ? keyUrl.split('URI="')[1].split('"')[0] : null;
}

2. 获取并解密 Key

从 #EXT-X-KEY 提取的 URL 进行请求，并使用自定义解密函数解密返回的 key 文件。

async function fetchAndDecryptKey(keyUrl, decryptionFunction) {
    const response = await fetch(keyUrl);
    const encryptedKey = await response.arrayBuffer();
    return decryptionFunction(encryptedKey);
}

// 示例解密函数
function customDecrypt(encryptedKey) {
    // 实现自定义解密逻辑
    // 假设解密后的数据是 Uint8Array
    return new Uint8Array(encryptedKey);
}

3. 解析加密后的 Media Playlist

获取并解析媒体播放列表中的分段信息。用解密后的 key 来解密视频分段。

async function fetchMediaPlaylist(url) {
    const response = await fetch(url);
    const text = await response.text();
    return parseMediaPlaylist(text);
}

function parseMediaPlaylist(playlistText) {
    const lines = playlistText.split('\n');
    const segments = lines.filter(line => line.startsWith('#'));
    // 提取媒体分段 URL
    return segments;
}

4. 播放视频

使用 video.js 或 aliplayer 播放视频。在视频加载前，确保已解密 key，并在播放时提供正确的解密机制。

import videojs from 'video.js';

// 播放视频
function playVideo(videoElementId, videoSrc, key) {
    const player = videojs(videoElementId, {
        sources: [{ src: videoSrc, type: 'application/x-mpegURL' }],
    });

    player.ready(() => {
        player.src({
            src: videoSrc,
            type: 'application/x-mpegURL',
        });
        
        player.on('loadedmetadata', () => {
            // 可以在这里实现对 key 的解密和应用
        });
    });
}

综合实现

以下是综合上述步骤的代码示例：

async function playEncryptedM3U8(m3u8Url, decryptionFunction) {
    const keyUrl = await fetchM3U8(m3u8Url);
    if (!keyUrl) {
        throw new Error('Key URL not found in M3U8 file');
    }

    const key = await fetchAndDecryptKey(keyUrl, decryptionFunction);
    const mediaPlaylistUrl = await fetchM3U8(m3u8Url); // 假设 media playlist 和 m3u8Url 相同

    const mediaPlaylist = await fetchMediaPlaylist(mediaPlaylistUrl);
    const videoSrc = mediaPlaylist.find(segment => segment.startsWith('http'));

    playVideo('my-video-element', videoSrc, key);
}

playEncryptedM3U8('your-m3u8-url', customDecrypt);

注意事项

1. 安全性：前端解密操作可能会暴露密钥，确保你的解密逻辑和加密方法足够安全。
2. 兼容性：不同的浏览器和播放器可能对加密视频的支持程度不同，请测试兼容性。
3. 性能：解密操作可能影响性能，尤其是在低性能设备上。

总结

通过上述步骤，你可以在前端实现播放二次加密的 m3u8 视频。虽然涉及到前端解密，但具体实现可能会因业务需求和安全要求而有所不同。确保对加密解密逻辑有足够的了解，并测试实现的可行性和安全性。