关于ckplayer 截图-rtmp（附：js将base64图片下载到本地）

ckplayer 截图下载到本地实现：

官网http://www.ckplayer.com/down/ 下载ckplayer x版本（2017.11.01）修改了一些取消控制栏、去logo、广告等样式功能

截图效果：

测试页面代码：

<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
<div id="video" style="width:600px;height:400px;"></div>
<div><button onclick="allScreenshot1(1)">截图</button></div>
 <img src="" id="img1" alt="" />
<script type="text/javascript">
	var videoObj="videoObject1";
	var player="player1";
	var playerUrl="rtmp://58.200.131.2:1935/livetv/hunantv";
	var conDic = "#video";
	var crossXmlUrl ="192.168.1.123:8080/VFCManagePlatform/crossdomain.xml";
	window[videoObj] = {
				container: conDic, //容器的ID或className
				variable: player,//播放函数名称
				autoplay:true,
				live:true,
				video: playerUrl,
				loaded: 'callBackFunctionw',
				flashplayer:true,
				//crossdomain:crossXmlUrl,
				overspread:true,
				volume:0
	};
	window[player] = new ckplayer(window[videoObj]);
	
	
	function callBackFunctionw(){
		player1.changeControlBarShow(false);
		player1.addListener('screenshot', allScreenshot1);
	}
	function allScreenshot1(obj){
		if(obj==1){//点击调用
			console.log(player1);
			player1.screenshot("player",false,"2-26.jpg");
		}else if(obj!=0&&obj!=null){//监听回调 保存数据
			document.getElementById('img1').setAttribute( 'src', obj.base64 );
			let imgData =obj.base64;
			downloadFile('测试.png', imgData);
			obj=0;
		}else{//返回数据为null
			
		}
	}
    //下载
    function downloadFile(fileName, content) {
      let aLink = document.createElement('a');
      let blob = base64ToBlob(content); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
      //aLink.click()
      aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
    }
    //base64转blob
    function base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
    }
</script>

截图部分涉及到跨域问题参考官网付费教程￥12 限时6小时。购买后记得录屏，反正很坑。

本次不需要跨域，只需要获取到base64值通过js下载到本地，所以去掉//crossdomain:crossXmlUrl。

ckplayer自带截图接口需配合监听事件，修改第二个参数不知道保存到哪了，在不改ckplayer.js情况下想出此办法： allScreenshot1为改造后可用方法（点击调用和监听回调冲突解决）。

完整demo地址，包含ckplayer.js：（放入web项目中运行即可）

https://download.****.net/download/qq_41605446/11004401

js下载base64格式的图片参考：

https://blog.****.net/qq_35844177/article/details/79094249

关于ckplayer 截图-rtmp（附：js将base64图片下载到本地）

相关推荐