Merge branch 'dev' into master

whaozl · May 18, 2020 · 069a258 · 069a258
2 parents cdfc24e + eb214c3
commit 069a258
Show file tree

Hide file tree

Showing 13 changed files with 2,500 additions and 340 deletions.
diff --git a/README.md b/README.md
@@ -314,6 +314,8 @@ IOS其他浏览器||
 
 *2020-04-26* Safari Bug：据QQ群内`1048506792`、`190451148`开发者反馈研究发现，IOS ?-13.X Safari内打开录音后，如果切换到了其他标签、或其他App并且播放了任何声音，此时将会中断已打开的录音（系统级的？），切换回正在录音的页面，这个页面的录音功能将会彻底失效，并且刷新也无法恢复录音；表现为关闭录音后再次打开录音，能够正常获得权限，但浏览器返回的采集到的音频为静默的PCM，此时地址栏也并未显示出麦克风图标，刷新这个标签也也是一样不能正常获得录音，只有关掉此标签新打开页面才可正常录音。如果打开录音后关闭了录音，然后切换到其他标签或App播放声音，然后返回录音页面，不会出现此问题。此为Safari的底层Bug（也许是少给临时工工钱了吧，无能为力）。使用长按录音类似的用户交互可大幅度避免踩到这坨翔。
 
+*2020-04-26* Safari Bug：据QQ群内`1048506792`、`190451148`开发者反馈研究发现，IOS ?-13.X Safari内打开录音后，如果切换到了其他标签、或其他App并且播放了任何声音，此时将会中断已打开的录音（系统级的？），切换回正在录音的页面，这个页面的录音功能将会彻底失效，并且刷新也无法恢复录音；表现为关闭录音后再次打开录音，能够正常获得权限，但浏览器返回的采集到的音频为静默的PCM，此时地址栏也并未显示出麦克风图标，刷新这个标签也也是一样不能正常获得录音，只有关掉此标签新打开页面才可正常录音。如果打开录音后关闭了录音，然后切换到其他标签或App播放声音，然后返回录音页面，不会出现此问题。此为Safari的底层Bug（也许是少给临时工工钱了吧，无能为力）。使用长按录音类似的用户交互可大幅度避免踩到这坨翔。
+
 
 
 

diff --git a/asset-record-sdk/LICENSE b/asset-record-sdk/LICENSE
@@ -0,0 +1,6 @@
+RecordSDK为收费项目，版权归xiangyuecn([email protected])所有；付费订购可获得对应功能的使用权或源码的使用权。
+
+1. 订购者在所订购功能的使用期限或用量范围内可使用相应功能；当使用期限到期或用量用尽时，将不可继续使用相应功能。
+2. 订购的功能存在多种套餐的情况下，以套餐的服务内容为准，如是否提供技术支持、接口对接支持等。
+3. 涉及使用到我方服务器的功能，受网络、服务器自身等影响，我方不保证服务100%可用。
+4. 对于会提供源码的功能，订购者仅可自己（公司、个人）使用，禁止转售、分发、或其他途径手段将源码提供给其他人。
diff --git a/asset-record-sdk/README.md b/asset-record-sdk/README.md
diff --git a/asset-record-sdk/index.html b/asset-record-sdk/index.html
@@ -0,0 +1,318 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+<link rel="shortcut icon" type="image/png" href="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/assets/icon.png">
+
+<title>RecordSDK测试</title>
+
+<script src="record-sdk/src/record-web-sdk.js"></script>
+<script src="record-sdk/src/libs/qrcode.js"></script>
+
+</head>
+<body>
+
+
+<div class="main">
+	<div class="mainBox">
+		<span style="font-size:32px;color:#f60;">RecordSDK测试</span>
+		<a href="https://github.com/xiangyuecn/Recorder">GitHub >></a>
+
+		<div style="padding-top:10px;color:#666">
+			更多Demo：
+			<a class="lb" href="https://xiangyuecn.github.io/Recorder/">Recorder H5</a>
+			<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx">RecordApp</a>
+			<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx?path=/app-support-sample/QuickStart.html">RecordApp QuickStart</a>
+		</div>
+	</div>
+
+	<div class="mainBox">
+		<!-- 按钮控制区域 -->
+		<div class="pd btns">
+			<div>
+				<button onclick="recOpen()" style="margin-right:10px">打开录音,请求权限</button>
+				<button onclick="recClose()" style="margin-right:0">关闭录音,释放资源</button>
+			</div>
+
+			<button onclick="recStart()">录制</button>
+			<button onclick="recStop()" style="margin-right:80px">停止</button>
+
+			<span style="display: inline-block;">
+				<button onclick="recPause()">暂停</button>
+				<button onclick="recResume()">继续</button>
+			</span>
+			<span style="display: inline-block;">
+				<button onclick="recPlay()">播放</button>
+				<button onclick="recUpload()">上传</button>
+			</span>
+		</div>
+
+		<!-- 波形绘制区域 -->
+		<div class="pd recpower">
+			<div style="height:40px;width:300px;background:#999;position:relative;">
+				<div class="recpowerx" style="height:40px;background:#0B1;position:absolute;"></div>
+				<div class="recpowert" style="padding-left:50px; line-height:40px; position: relative;"></div>
+			</div>
+		</div>
+		<div class="pd waveBox">
+			<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block" class="recwave"></div>
+		</div>
+	</div>
+
+	<!-- 日志输出区域 -->
+	<div class="mainBox">
+		<div class="reclog"></div>
+
+		<div id="oldBrowserLog" class="pd"></div>
+	</div>
+</div>
+
+
+
+
+
+<script>
+//古董浏览器测试简单兼容
+if(!document.querySelector){
+	document.querySelector=function(cls){
+		return document.querySelectorAll(cls)[0];
+	};
+	document.querySelectorAll=function(cls){
+		console.warn("querySelectorAll",cls);
+		var elems=document.getElementsByTagName("*");
+		var exp=new RegExp("\\b"+cls.substr(1)+"\\b");
+		var rtv=[];
+		for(var i=0;i<elems.length;i++) {
+			if(exp.test(elems[i].className)){
+				rtv.push(elems[i]);
+			};
+		};
+		return rtv;
+	};
+};
+if(!window.console){
+	window.console={
+		out:function(t,arr){
+			var msg=[];
+			for(var i=0;i<arr.length;i++){
+				msg.push(arr[i]+"");
+			};
+			var div=document.createElement("div");
+			div.innerHTML='<div style="color:'
+				+(t=="error"?"#f00":t=="warn"?"#f60":"")
+				+'">[console.'+t+']'+msg.join(" ")+'</div>';
+			oldBrowserLog.insertBefore(div,oldBrowserLog.firstChild);
+		}
+		,debug:function(){this.out("debug",arguments)}
+		,log:function(){this.out("log",arguments)}
+		,info:function(){this.out("info",arguments)}
+		,warn:function(){this.out("warn",arguments)}
+		,error:function(){this.out("error",arguments)}
+	};
+};
+
+
+function reclog(s,color){
+	var now=new Date();
+	var t=("0"+now.getHours()).substr(-2)
+		+":"+("0"+now.getMinutes()).substr(-2)
+		+":"+("0"+now.getSeconds()).substr(-2);
+	var div=document.createElement("div");
+	var elem=document.querySelector(".reclog");
+	elem.insertBefore(div,elem.firstChild);
+	div.innerHTML='<div style="color:'+(!color?"":color==1?"red":color==2?"#0b1":color)+'">['+t+']'+s+'</div>';
+};
+window.onerror=function(message, url, lineNo, columnNo, error){
+	//https://www.cnblogs.com/xianyulaodi/p/6201829.html
+	reclog('<span style="color:red">【Uncaught Error】'+message+'<pre>'+"at:"+lineNo+":"+columnNo+" url:"+url+"\n"+(error&&error.stack||"不能获得错误堆栈")+'</pre></span>');
+};
+</script>
+
+
+<script>
+//立即进行一次配置，执行初始化
+RecordSDK.Config();
+
+setTimeout(function(){
+
+reclog("<span class='aaa'></span>");
+document.querySelector(".aaa").appendChild(RecordSDK.QRCode(location.href));
+
+},1000);
+
+
+
+
+
+
+
+
+/**播放**/
+function recPlay(){
+	if(!recBlob){
+		reclog("请先录音，然后停止后再播放",1);
+		return;
+	};
+	var cls=("a"+Math.random()).replace(".","");
+	reclog('播放中: <span class="'+cls+'"></span>');
+	var audio=document.createElement("audio");
+	audio.controls=true;
+	document.querySelector("."+cls).appendChild(audio);
+	//简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
+	audio.src=(window.URL||webkitURL).createObjectURL(recBlob);
+	audio.play();
+
+	setTimeout(function(){
+		(window.URL||webkitURL).revokeObjectURL(audio.src);
+	},5000);
+};
+
+/**上传**/
+function recUpload(){
+	var blob=recBlob;
+	if(!blob){
+		reclog("请先录音，然后停止后再上传",1);
+		return;
+	};
+
+	//本例子假设使用原始XMLHttpRequest请求方式，实际使用中自行调整为自己的请求方式
+	//录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传
+	var api="https://xx.xx/test_request";
+	var onreadystatechange=function(title){
+		return function(){
+			if(xhr.readyState==4){
+				if(xhr.status==200){
+					reclog(title+"上传成功",2);
+				}else{
+					reclog(title+"没有完成上传，演示上传地址无需关注上传结果，只要浏览器控制台内Network面板内看到的请求数据结构是预期的就ok了。", "#d8c1a0");
+
+					console.error(title+"上传失败",xhr.status,xhr.responseText);
+				};
+			};
+		};
+	};
+	reclog("开始上传到"+api+"，请求稍后...");
+
+	/***方式一：将blob文件转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传***/
+	var reader=new FileReader();
+	reader.onloadend=function(){
+		var postData="";
+		postData+="mime="+encodeURIComponent(blob.type);//告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
+		postData+="&upfile_b64="+encodeURIComponent((/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1]) //录音文件内容，后端进行base64解码成二进制
+		//...其他表单参数
+
+		var xhr=new XMLHttpRequest();
+		xhr.open("POST", api);
+		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
+		xhr.onreadystatechange=onreadystatechange("上传方式一【Base64】");
+		xhr.send(postData);
+	};
+	reader.readAsDataURL(blob);
+
+	/***方式二：使用FormData用multipart/form-data表单上传文件***/
+	var form=new FormData();
+	form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
+	//...其他表单参数
+
+	var xhr=new XMLHttpRequest();
+	xhr.open("POST", api);
+	xhr.onreadystatechange=onreadystatechange("上传方式二【FormData】");
+	xhr.send(form);
+};
+</script>
+
+
+
+
+
+
+
+
+<!--以下这坨可以忽略-->
+<script>
+reclog("Recorder H5使用简单，功能丰富，支持PC、Android，但IOS上仅Safari支持录音"+unescape("%uD83D%uDCAA"),"#f60;font-weight:bold;font-size:24px");
+reclog("RecordApp除Recorder支持的外，支持Hybrid App，IOS上支持微信网页和小程序web-view"+unescape("%uD83C%uDF89"),"#0b1;font-weight:bold;font-size:24px");
+//reclog(Tips);
+</script>
+
+<!-- 加载打赏挂件 -->
+<script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/assets/zdemo.widget.donate.js"></script>
+<script>
+var donateView=document.createElement("div");
+document.querySelector(".reclog").appendChild(donateView);
+if(donateView.addEventListener){//兼容古董浏览器
+	DonateWidget({
+		log:function(msg){reclog(msg)}
+		,mobElem:donateView
+	});
+};
+</script>
+
+<style>
+body{
+	word-wrap: break-word;
+	background:#f5f5f5 center top no-repeat;
+	background-size: auto 680px;
+}
+pre{
+	white-space:pre-wrap;
+}
+a{
+	text-decoration: none;
+	color:#06c;
+}
+a:hover{
+	color:#f00;
+}
+
+.main{
+	max-width:700px;
+	margin:0 auto;
+	padding-bottom:80px
+}
+
+.mainBox{
+	margin-top:12px;
+	padding: 12px;
+	border-radius: 6px;
+	background: #fff;
+	--border: 1px solid #f60;
+	box-shadow: 2px 2px 3px #aaa;
+}
+
+
+.btns button{
+	display: inline-block;
+	cursor: pointer;
+	border: none;
+	border-radius: 3px;
+	background: #f60;
+	color:#fff;
+	padding: 0 15px;
+	margin:3px 20px 3px 0;
+	line-height: 36px;
+	height: 36px;
+	overflow: hidden;
+	vertical-align: middle;
+}
+.btns button:active{
+	background: #f00;
+}
+
+.pd{
+	padding:0 0 6px 0;
+}
+.lb{
+	display:inline-block;
+	vertical-align: middle;
+	background:#00940e;
+	color:#fff;
+	font-size:14px;
+	padding:2px 8px;
+	border-radius: 99px;
+}
+</style>
+
+</body>
+</html>
diff --git a/asset-record-sdk/record-sdk/record-web-sdk.js b/asset-record-sdk/record-sdk/record-web-sdk.js
diff --git a/asset-record-sdk/record-sdk/src/ios-weixin-config.js b/asset-record-sdk/record-sdk/src/ios-weixin-config.js
Original file line number	Diff line number	Diff line change
Expand Up		@@ -314,6 +314,8 @@ IOS其他浏览器\|\|

		2020-04-26 Safari Bug：据QQ群内`1048506792`、`190451148`开发者反馈研究发现，IOS ?-13.X Safari内打开录音后，如果切换到了其他标签、或其他App并且播放了任何声音，此时将会中断已打开的录音（系统级的？），切换回正在录音的页面，这个页面的录音功能将会彻底失效，并且刷新也无法恢复录音；表现为关闭录音后再次打开录音，能够正常获得权限，但浏览器返回的采集到的音频为静默的PCM，此时地址栏也并未显示出麦克风图标，刷新这个标签也也是一样不能正常获得录音，只有关掉此标签新打开页面才可正常录音。如果打开录音后关闭了录音，然后切换到其他标签或App播放声音，然后返回录音页面，不会出现此问题。此为Safari的底层Bug（也许是少给临时工工钱了吧，无能为力）。使用长按录音类似的用户交互可大幅度避免踩到这坨翔。

		2020-04-26 Safari Bug：据QQ群内`1048506792`、`190451148`开发者反馈研究发现，IOS ?-13.X Safari内打开录音后，如果切换到了其他标签、或其他App并且播放了任何声音，此时将会中断已打开的录音（系统级的？），切换回正在录音的页面，这个页面的录音功能将会彻底失效，并且刷新也无法恢复录音；表现为关闭录音后再次打开录音，能够正常获得权限，但浏览器返回的采集到的音频为静默的PCM，此时地址栏也并未显示出麦克风图标，刷新这个标签也也是一样不能正常获得录音，只有关掉此标签新打开页面才可正常录音。如果打开录音后关闭了录音，然后切换到其他标签或App播放声音，然后返回录音页面，不会出现此问题。此为Safari的底层Bug（也许是少给临时工工钱了吧，无能为力）。使用长按录音类似的用户交互可大幅度避免踩到这坨翔。




Expand Down