joewang1988 最近的时间轴更新

joewang1988

V2EX 第 648159 号会员，加入于 2023-09-12 15:41:35 +08:00

joewang1988 提问技术话题好玩工作信息交易信息城市相关

joewang1988 最近回复了

101 天前

回复了 newbie111 创建的主题 › React › 100u 有偿请前端老哥实现解密播放 m3u8 文件

@Yaavi 看你代码写得不错。方便留个 wx 不有前端的活。200 刀一个。

101 天前

回复了 newbie111 创建的主题 › React › 100u 有偿请前端老哥实现解密播放 m3u8 文件

@azhangbing 感谢

101 天前

回复了 newbie111 创建的主题 › React › 100u 有偿请前端老哥实现解密播放 m3u8 文件

@newbie111

会提示跨域 --- 你把 m3u8 文件和 ts 文件放在同一个 domain 下就不会有跨域问题了。

我贴代码也是做个社会性测试。

呵呵果然是不公平啊

102 天前

回复了 newbie111 创建的主题 › React › 100u 有偿请前端老哥实现解密播放 m3u8 文件

收款账号信息

Address ：TD8j8Z76JP4t9PZPdtspZVbgwnFt2FDAUf
Token：USDT
Network：Tron

原理

使用 hlsjs 的 custom loader 在请求到 m3u8 和 ts 文件时，分别进行相对应的解密操作。

以下是完整代码

<html>

<head>
<title>Hls.js demo - basic usage</title>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.15/hls.min.js"></script>
<script src="./crypto-js.min.js"></script>

<center>
<h1>Hls.js demo - basic usage</h1>
<video height="600" id="video" controls></video>
</center>

<script>

async function process(playlist) {

const key = '1111111111111111';

const keyBytes = CryptoJS.enc.Utf8.parse(key);

console.log(playlist);

const byteArray = new Uint8Array(playlist);
const wordArray = CryptoJS.lib.WordArray.create(byteArray);

// Decrypt the data
const decrypted = CryptoJS.AES.decrypt(
{ ciphertext: wordArray },
keyBytes,
{ mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
);

console.log(decrypted)
// Convert decrypted data to text
const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
console.log(decryptedText);
return decryptedText;
}

// 转换 decrypted 为 ArrayBuffer
function wordArrayToArrayBuffer(wordArray) {
// 计算需要的长度
const length = wordArray.sigBytes;
const words = wordArray.words;
const bytes = new Uint8Array(length);

// 将 wordArray 的每个 word 转换为 byte
for (let i = 0; i < length; i++) {
bytes[i] = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xFF;
}

return bytes.buffer;
}

async function processData(data) {
console.log(data);

const key = '1111111111111111';

const keyBytes = CryptoJS.enc.Utf8.parse(key);

console.log(data);

const byteArray = new Uint8Array(data);
const wordArray = CryptoJS.lib.WordArray.create(byteArray);

// Decrypt the data
const decrypted = CryptoJS.AES.decrypt(
{ ciphertext: wordArray },
keyBytes,
{ mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
);

console.log(decrypted)

const arrayBuffer = wordArrayToArrayBuffer(decrypted);

return arrayBuffer;
}

class CustomLoader extends Hls.DefaultConfig.loader {
constructor(config) {
super(config);
var load = this.load.bind(this);
//var xhrSetup = this.xhrSetup.bind(this);

this.load = function (context, config, callbacks) {
context.responseType = 'arraybuffer';

if (context.type == 'manifest') {
var onSuccess = callbacks.onSuccess;
callbacks.onSuccess = function (response, stats, context, networkDetails) {
console.log(networkDetails)
process(response.data)
.then(data => {
response.data = data;
onSuccess(response, stats, context);
})
.catch(err => {
console.error(err);
})

};
} else {
const onSuccess = callbacks.onSuccess;
callbacks.onSuccess = function (response, stats, context) {

processData(response.data)
.then(data => {
response.data = data;
onSuccess(response, stats, context);
})
.catch(err => {
console.error(err);
})

};
}
load(context, config, callbacks);
};
}
}

// Create the Hls instance with the custom fetch loader
const myHls = new Hls({
//debug: true,
loader: CustomLoader,
xhrSetup: function (xhr, url) {

xhr.open('GET', url, true);
xhr.setRequestHeader('id', 1)
xhr.setRequestHeader('token', 456)
xhr.responseType = '111'; // do send cookies
console.log("XXXXXXX")
}

});

const video = document.getElementById('video');
myHls.loadSource('./index.e.m3u8');
myHls.attachMedia(video);
myHls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});

myHls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
console.error('HLS.js Error:', data);
}
});

</script>
</body>

</html>

102 天前

回复了 newbie111 创建的主题 › React › 100u 有偿请前端老哥实现解密播放 m3u8 文件

做完了，怎么交付？

» joewang1988 创建的更多回复