php与js实现视频分片二进制blob加密解密播放

php与js实现视频分片二进制blob加密解密播放

php与js实现视频分片二进制blob加密解密播放

最近在看视频的时候,本想下载视频,于是我打开了调试模式,结果发现video标签中的src是blob:https//

php与js实现视频分片二进制blob加密解密播放

这是一种二进制流传输模式,比较适合保护视频版权和防止恶意下载,服务器输出一段加密的二进制流,浏览器端对二进制流进行解密后传给video播放器进行播放,由于视频文件比较大,所以在实际操作中会进行分片操作,我们今天就演示一下后端php,前端js来进行视频二进制流传输。

php端代码

<?php
    header("Content-type:text/html;charset=utf-8");
    $file_name = "demo.mp4";
    //用以解决中文不能显示出来的问题
    $file_name = iconv("utf-8", "gb2312", $file_name);
    $file_sub_path = "../video/";
    $file_path = $file_sub_path.$file_name;
    //首先要判断给定的文件存在与否
    if (!file_exists($file_path)) {
        echo "没有该文件";
        return;
    }
    $fp = fopen($file_path, "r");
    $file_size = filesize($file_path);
    //下载文件需要用到的头
    Header("Content-type: application/octet-stream");
    Header("Accept-Ranges: bytes");
    Header("Accept-Length:".$file_size);
    Header("Content-Length:".$file_size);
    Header("Content-Disposition: attachment; filename=".$file_name);

    $buffer = 1024;
    $file_count = 0;
    //向浏览器返回数据
    while (!feof($fp) && $file_count < $file_size) {
        $file_con = fread($fp, $buffer);
        $file_count += $buffer;
        echo $file_con;
    }
    fclose($fp);
?>

html js 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PHP PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        /**
        * base64  to blob二进制
        */
        function dataURItoBlob(dataURI) {
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
            var byteString = atob(dataURI.split(',')[1]); //base64 解码
            var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
            var intArray = new Uint8Array(arrayBuffer); //创建视图

            for (var i = 0; i < byteString.length; i++) {
                intArray[i] = byteString.charCodeAt(i);
            }
            return new Blob([intArray], {
                type: mimeString
            });
        }

        /**
        *
        * blob二进制 to base64
        **/
        function blobToDataURI(blob, callback) {
            var reader = new FileReader();
            reader.onload = function (e) {
                callback(e.target.result);
            }
            reader.readAsDataURL(blob);
        }
        bready(function() {
            let xhr = new XMLHttpRequest();
            xhr.open('POST', '', true);
            xhr.responseType = 'blob';
            xhr.onload = function(e) {
                if (this.status === 200) {
                    // 获取blob对象
                    let blob = this.response;
                    console.log(blob);
                    // 获取blob对象地址,并把值赋给容器
                    $("#demovideo").attr("src", URL.createObjectURL(blob));
                    $("#demovideo").trigger("play"); //
                }
            }
            xhr.send();
        });
    </script>
    <style>
    </style>
</head>
<body>

    <video id="demovideo"></video>

</body>
</html>

上面演示了只是视频的二进制传输,那么加密呢

加密的办法有2种

1、后端对二进制流进行aes加密,前端js对二进制流解密

2、后端将二进制流转成base64字符串,前端js对base64解码转成blob二进制流

这两种传输的Accept-Ranges不一样,第一种是bytes,第二种是none

完整的webide项目地址http://studio.bfw.wiki/Studio/Open.html?projectid=15783967437932910028

{{collectdata}}

网友评论0

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章