微信小程式web-view 外部參考h5頁面呼叫攝像頭錄制視頻 配有提示音
- 1、目前的需求是什么
- 2、都踩了那些坑
- 1、小程式
- 2、h5語音提示
- 3、語音合成聲音錄制不進去，ios有時候是麥克風，有時候是聽筒發音！
- 4、語音合成聲音錄制不進去，
- 5、以為這樣這樣就結束了碼？沒有！ios結束的時候 有時候會不能點擊結束
1、目前的需求是什么
因為專案是銀行審批貸款的，所以需要一個視頻面簽的功能，進入頁面時，用戶點擊開始錄制，會提示有第一個問題提示音，用戶回答，點擊下一個問題，會有第二個，沒有問題時，會有結束錄制按鈕，結束后可以看回放，再點擊上傳就可以提交到后臺了，
2、都踩了那些坑
1、小程式
因為之前沒有做過視頻錄制，對這一塊不是很熟悉，先用的是微信小程式頁面內直接做的，用的是小程式內置的組件，功能完成后發現最長只能錄制30秒，比較雞肋，重新找解決方案，
2、h5語音提示
后來就想著web-view 外部參考一個h5點頁面吧，然后就看到了 recordrtc 這個，發現可以用，挺好，就開始用這個，然后接下來就開始用語音提示，用的是h5，因為我手機是ios 的 ，我在我手機上邊測驗都是沒有問題的，然后就用同時手機測了一下，發現沒有聲音，我的手機是正常的，后來發現 好像 h5的語音合成好像不支持安卓？換掉，用的是 百度提示的，
3、語音合成聲音錄制不進去，ios有時候是麥克風，有時候是聽筒發音！
呼叫百度api后，安卓這邊錄制都是沒有問題的，ios這邊有時候是聽筒發音，有時候是麥克風發音，就好奇怪，好氣，后來我讓后臺這邊呼叫百度api語音合成，暫存服務器，我直接獲取就可以了，ok解決問題，
4、語音合成聲音錄制不進去，
這邊聲音都正常后，看錄制回放的時候，發現語音提示音錄制不進去，被降噪了！人傻了，
后來找了好久，發現了一個設定的地方（之前沒做過這塊，所以不是很懂，別噴），就是錄制的時候可以在audio中設定
captureCamera(callback) {
navigator.mediaDevices.getUserMedia({
audio: { volume: { min: 0.0, max: 1.0 }, noiseSuppression: false, echoCancellation: false },
video: { facingMode: "user" }
}).then((camera) => {
callback(camera);
}).catch(function (error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
},
這樣聲音就好了
5、以為這樣這樣就結束了碼？沒有！ios結束的時候 有時候會不能點擊結束
因為我這邊問題又很多個，最后發現，在4個問題的時候是可以點擊結束的，在4個以上的時候是不能點擊結束的，它也不報錯，然后debugger,下載recordrtc .js 研究源檔案代碼，發現是因為在事實結束后，會有個回呼函式的，但是這邊是沒有回呼的，
mediaRecorder.ondataavailable //這個應該是會自己回呼的，但是沒有
我以為要涼了，后來找大神指點
因為我這個是官網例子改寫的，用的是這樣錄制的
that.recorder = RecordRTC(camera, {
// type: 'video'
// })
大神將這串代碼改成了
var config = {
mimeType: 'video/webm', // vp8, vp9, h264, mkv, opus/vorbis
audioBitsPerSecond : 256 * 8 * 1024,
videoBitsPerSecond : 256 * 8 * 1024,
bitsPerSecond: 256 * 8 * 1024, // if this is provided, skip above two
checkForInactiveTracks: true,
timeSlice: 1000, // concatenate intervals based blobs
ondataavailable: function() {} // get intervals based blobs
}
that.recorder = new MediaStreamRecorder(camera, config);
功能就可以使用了！
因為最近都是在用vue 開發，原生的都不是很熟練，所以雖然是一個單頁面應用，我用的還是vue axios…別噴
上全套代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script>
<script crossorigin="anonymous"
integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg=="
src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<style type="text/css">
.demo {
width: 80%;
height: 20px;
position: absolute;
top: 480px;
left: 6%;
border: 2px solid #BBDEFB;
border-radius: 8px;
}
.shixin {
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #BBDEFB;
position: relative;
top: -39px;
left: 9%;
}
.kongxin {
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #fff;
position: relative;
top: -52px;
left: 9%;
}
.center {
display: flex;
justify-content: center;
}
audio {
display: none;
}
button {
width: 70%;
padding: 3px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 15px;
/* future proofing */
-khtml-border-radius: 10px;
/* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size: 125%
}
</style>
<title></title>
</head>
<body>
<div id="app">
<h4 class="center">視頻認證</h4>
<hr>
<video controls autoplay playsinline ref="video" width="100%" height="400px"></video>
<div v-if="showIos" class="demo" style="text-align: center;">
<span > 請點擊開始按鈕</span>
<div class="shixin"></div>
<div class="kongxin"></div>
</div>
<span class="center" style="margin-top: 30px;" v-show="nextQuestion">{{value}}</span>
<div class="center" style="margin-top: 30px;">
<button @click="StartRecording" v-if="startRecording" size="small">開始視頻認證</button>
<button @click="StopRecording" v-else-if="stopRecording" size="small" id="btn-stop-recording">結束視頻認證
</button>
<button @click="question(problem)" v-else-if="nextQuestion">{{nameButton}}</button>
<button v-else>上傳視頻</button>
</button>
</div>
</div>
<script>
new Vue({
el: '#app',
//model
data: {
nameButton: "開始提問",
startRecording: true,
stopRecording: false,
nextQuestion: false,
index: 0,
video: null,
value: "",
equipmentType:"",
videoStart: false,
recorder: null,
blob: "",
showIos:false,
problem: [
"請問您是李先生或女士嗎?您的身份證號碼是11111111122嗎?",
"您此次購買的車型是奔馳E300嗎？",
"您的家人是否知曉并同意您辦理的此筆個人汽車金融貸款業務？",
"您對此筆個人汽車金融貸款業務是否仍存有異議？",
"如您未按時足額償還每期月供，將會產生逾期，影響您的央行征信，是否已知曉？",
"辦理此筆汽車金額貸款是您本人的真實意識表達，承諾提供資料均真實有效，若存在欺詐行為，xxxx有權以合同詐騙提報公安機關立案偵查并追究相應的法律責任，您是否已知曉？",
]
},
//函式
mounted() {
this.video = document.querySelector('video');
this. detect()
},
methods: {
detect() {
var agent = navigator.userAgent.toLowerCase();
var android = agent.indexOf("android");
var iphone = agent.indexOf("iphone");
var ipad = agent.indexOf("ipad");
if (android != -1) {
this.equipmentType = "android";
}
if (iphone != -1 || ipad != -1) {
this.equipmentType = "ios";
}
return this.equipmentType;
},
question(problem) {
this.nameButton = "下一個問題"
this.value = problem[this.index]
this.baiduToken(this.value)
if (this.index < (problem.length - 1)) {
this.index = this.index + 1
} else {
this.nextQuestion = false
this.stopRecording = true
}
},
baiduToken(value) {
axios.get(`xxxxx?text=${value}` //向后臺呼叫獲取音頻路徑 ，如果是測驗的可以先寫一個固定的本地因為路徑
).then(response => {
if (response.status === 200) {
// this.src = response.data.msg
this.Audio(response.data.msg)
} else {
alert(response)
}
})
},
Audio(src) {
console.log("111", src)
var audio = document.createElement('audio');
audio.autoplay = true;
audio.preload = true;
audio.controls = true;
audio.src = src;
// this.src =
audio.addEventListener('ended', function () {
// 設定則播放完后移除audio的dom物件
document.body.removeChild(audio);
}, false);
audio.addEventListener('error', function () {
document.body.removeChild(audio);
console.log('合成出錯url：' + this.src + '\nAudio錯誤碼：' + audio.error.code);
}, false);
audio.loop = false;
audio.volume = 1;
// 在body元素下apppend音頻控制元件
document.body.append(audio);
},
stopRecordingCallback() {
this.video.src = this.video.srcObject = null;
this.video.muted = false;
this.video.volume = 1;
// let Blob = this.recorder.getBlob()
console.log("let ", this.blob)
this.video.src = URL.createObjectURL(this.blob);
this.recorder.camera.stop();
this.recorder.destroy();
this.recorder = null;
this.stopRecording = false
// alert("點擊了3")
},
StartRecording() {
if(this.equipmentType ==="ios" ){
this.showIos = true
}
let that = this
this.startRecording = false
this.nextQuestion = true
this.captureCamera((camera) => {
that.video.muted = true;
that.video.volume = 0;
that.video.srcObject = camera;
var config = {
mimeType: 'video/webm', // vp8, vp9, h264, mkv, opus/vorbis
audioBitsPerSecond : 256 * 8 * 1024,
videoBitsPerSecond : 256 * 8 * 1024,
bitsPerSecond: 256 * 8 * 1024, // if this is provided, skip above two
checkForInactiveTracks: true,
timeSlice: 1000, // concatenate intervals based blobs
ondataavailable: function() {} // get intervals based blobs
}
that.recorder = new MediaStreamRecorder(camera, config);
that.recorder.record();
// release camera on stopRecording
that.recorder.camera = camera;
});
},
StopRecording() {
let that = this
// console.log("this", this.blob)
// console.log("1111".this.recorder.stopRecording())
this.recorder.stop(
function (blob) {
// alert("222")
console.log("this", this)
that.blob = blob;
// that.stopRecordingCallback()
that.video.src = that.video.srcObject = null;
console.log("this.video.srcObject", that.video.srcObject)
that.video.muted = false;
that.video.volume = 1;
// let Blob = this.recorder.getBlob()
console.log("let ", that.blob)
that.video.src = URL.createObjectURL(that.blob);
that.recorder.camera.stop();
//that.recorder.destroy();
that.recorder = null;
that.stopRecording = false
}
)
},
captureCamera(callback) {
navigator.mediaDevices.getUserMedia({
audio: { volume: { min: 0.0, max: 1.0 }, noiseSuppression: false, echoCancellation: false },
video: { facingMode: "user" }
}).then((camera) => {
callback(camera);
}).catch(function (error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
},
}
})
</script>
</body>
</html>
對了，有個小bug,最后一個問題是沒有顯示的，有語音播報,v-if判斷有點問題，你們修改吧~我懶，哈哈哈哈，
如若又描述不清楚、代碼不規范之處 ，請指出，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/290689.html
標籤：其他