Cordova開發app——短視訊拍攝

重慶崽兒brand發表於2019-03-06
APP

本文首發在我的個人部落格上：www.brandhuang.com

前一篇文章寫了傳送語音的功能，這片文章寫一下錄製短視訊的功能。

我現在所做的專案是一個客服系統（類似類似阿里旺旺吧？），之前產品的聊天功能就只是傳送文字、圖片和一些emoji表情，現在需要在專案中新增傳送語音和15秒的短視訊（限制時長的視訊，不一定要15秒）

如果我們用 讓使用者選擇裝置上已經錄好的視訊進行上傳的方式進行傳送其實也是可以的，但是我們就不好控制視訊的時長了，視訊時間太長檔案也必然很大，會佔用很多的空間，所以我們選擇了讓使用者在我們自己app中進行錄製的方案，這樣就可以根據控制視訊時間的長度，來把視訊的大小控制在較小的範圍內。

本文主要用到的外掛是：cordova-plugin-media-capture

外掛GitHub地址：cordova-plugin-media-capture

該外掛既可以錄音也可以錄製視訊，但是在安卓手機上，錄音的時候會開啟手機自帶的錄音機APP進行錄音，感覺體驗不是很好，所以我只用了該外掛錄視訊的功能。

簡單使用

安裝：
cordova plugin add cordova-plugin-media-capture
複製程式碼
需要在deviceReady後進行方法呼叫
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.device.capture);
}
複製程式碼
使用：
navigator.device.capture.captureVideo(
    this.videoSuccess,// 視訊錄製成功後的處理
    this.videoError, // 視訊錄製失敗後的處理
    {
        duration: 15,// 限制錄製的視訊時間長度，單位：/秒
        limit:1 // 非必填，不寫此項時，預設為1
        // 在ios一次只能錄一個視訊，
        //在Android上，連續錄製視訊的個數受limit的限制
    }
);
複製程式碼

視訊上傳外掛和前一篇文章用的一樣，方法就不在介紹了

上傳外掛的簡單使用可以看我的上一篇文章：Cordova開發app，使用外掛錄音並上傳伺服器

需要注意下！！

在Android上錄製的視訊是mp4格式的，在其他裝置上能很好的播放，但是在ios上，錄製的視訊是mov格式的，所以需要做轉碼處理後才能在其他裝置上播放（可以前端處理，也可以上傳到伺服器後在後端處理，）

轉碼後又一個問題需注意：

不是所有的mp4格式在ios裝置上都能正常播放！！！

之前轉碼的mp4在安卓上正常播放，但是在ios上，播放的視訊沒有聲音！！！

網上搜了下，說是音軌問題，

百度說：iphone自帶播放器只識別AAC的音訊，所以視訊轉換MP4，編碼方式選擇H264+AAC或 MPEG4+AAC就行了。

所以轉碼的時候需要注意，目前我們專案因為是在服務端轉碼的，所有後端正在處理這個問題～

這就是文章的全部內容了，感謝閱讀！

歡迎留言探討～

相關文章