要实现AES128位加解密,可以使用JavaScript的crypto-js
库。以下是一个简单的示例:
HTML代码:
<video controlsList="nodownload" controls>video>
首先,需要安装crypto-js
库:
npm install crypto-js
然后,可以使用以下代码进行AES128加解密:
- import CryptoJS from 'crypto-js';
-
- const secretKey = 'your-secret-key'; // 替换为你的 AES 密钥
- const iv = 'your-iv'; // 替换为你的 AES IV
- const videoSourceUrl = 'your-video-url'; // 替换为你的视频的url,即video的src
-
- /**
- *
- * @param {*} iv AES IV
- * @param {*} key AES 密钥
- * @param {*} url 视频的url
- * @param {*} start 需要请求的视频段的起始位置
- * @param {*} end 需要请求的视频段的结束位置
- * @returns 解密后的视频
- */
- const fetchAndDecryptSegment=async (iv,key,url, start, end='')=>{
- // 调用后端接口获取加密的视频流
- const response = await fetch(url, {
- headers: {'Range': `bytes=${start}-${end}`}
- });
- const encryptedData = await response.arrayBuffer(); // 将获取到的加密的视频流转为Buffer类型
- const encryptedWordArray = CryptoJS.lib.WordArray.create(encryptedData);// 将Buffer类型的视频流转为WordArray类型
- // 解密视频流
- const decrypted = CryptoJS.AES.decrypt(
- {ciphertext: encryptedWordArray},
- CryptoJS.enc.Utf8.parse(key),
- {
- iv: CryptoJS.enc.Utf8.parse(iv),
- mode: CryptoJS.mode.CBC,
- padding: CryptoJS.pad.Pkcs7,
- }
- );
- // 对解密后的视频流进行编码
- const uint8Array = new Uint8Array(decrypted.sigBytes);
- for (let i = 0; i < decrypted.sigBytes; i++) {
- uint8Array[i] = (decrypted.words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff;
- }
- return uint8Array;
- }
-
- const loadVideo=async ()=>{
- // 获取解密后的视频流,start 传0,end 不传,表示加载完整视频
- const decryptedData=await fetchAndDecryptSegment(iv,secretKey,videoSourceUrl,0)
- // 将解密后的视频流转成Blob对象
- const blob = new Blob([decryptedData], { type: "video/mp4" });
- // 创建Blob对象的临时URL
- const url = URL.createObjectURL(blob);
- const videoElement = document.getElementsByTagName('video')[0];
- // 将URL赋值给video的src
- videoElement.src=url
- }
-
- loadVideo()
上述代码中,通过fetch获取视频数据,其中在 Headers 中配置了 'Range': `bytes=${start}-${end}` 是准备做视频分段加载播放的,经过调研,目前只有 fmp4 格式的视频才支持视频分段播放,所以,如果需要进行分段播放需要后端将视频转码成 fmp4 格式的视频。