js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现

js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现

Your browser is too old which doesn't support HTML5 video.

开始 暂停 停止 跳转 截图 下载

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
<script>
    var player = document.getElementById('videoElement');
    if (flvjs.isSupported()) {
		//alert("test");
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            "isLive": true,
			url:'http://127.0.0.1:8086/live?port=1935&app=live&stream=mystream'
			//http://192.168.1.106:8086/live?port=1935&app=live&stream=mystream  33.mp4
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load(); //加载
        flv_start();
    }

    function flv_start() {
        player.play();
    }

    function flv_pause() {
        player.pause();
    }

    function flv_destroy() {
        player.pause();
        player.unload();
        player.detachMediaElement();
        player.destroy();
        player = null;
    }

    function flv_seekto() {
        player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
    }
	
	$(function(){
	       function htmlToImage() {
                var canvas = document.getElementById("V2I_canvas");
                if (!canvas.getContext) {
                    alert("您的浏览器暂不支持canvas");
                    return false;
                } else {
                    var context = canvas.getContext("2d");
                    var video = document.getElementById("videoElement");
                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
                    return mySrc = canvas.toDataURL("image/png");
                }
            }
            $("#screen_shot_btn").click(function(event) {
                console.info("正在截图.....")
                htmlToImage();
                $("#image_el").attr("src", mySrc);
            });

            $("#screen_save_btn").click(function() {
                console.info("正在保存.....")
                htmlToImage();
                if ($("#image_el").attr("src") != "") {
                    downloadFile(mySrc);
                } else {
                    alert("内容为空");
                }
            })

            function downloadFile(src) {
                var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");

            }

            //图片下载方法
            var funDownload = function(domImg, filename) {
                    // 创建隐藏的可下载链接
                    var eleLink = document.createElement('a');
                    eleLink.download = filename;
                    eleLink.style.display = 'none';
                    // 图片转base64地址
                    var canvas = document.createElement('canvas');
                    var width = domImg.naturalWidth;
                    var height = domImg.naturalHeight;
                    canvas.width = width;
                    canvas.height = height;
                    var context = canvas.getContext('2d');
                    console.log(`${width}+${height}`);
                    context.drawImage(domImg, 0, 0,width,height);
                    // 如果是PNG图片，则context.toDataURL('image/png')
                    eleLink.href = canvas.toDataURL('image/png');
                    // 触发点击
                    document.body.appendChild(eleLink);
                    eleLink.click();
                    // 然后移除
                    document.body.removeChild(eleLink);
                    };

            //文本类 文件下载：
            var fileDownload = function (content, filename) {
            // 创建隐藏的可下载链接
            var elLink = document.createElement('a');
            elLink.download = filename;
            elLink.style.display = 'none';
            // 字符内容转变成blob地址
            var blob = new Blob([content]);
            elLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(elLink);
            elLink.click();
            // 然后移除
            document.body.removeChild(elLink);
            };
	
	});
</script>