欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

詳解js的視頻和音頻采集

今天要寫的，不是大家平時會用到的東西。因?yàn)榧嫒菪詫?shí)在不行，只是為了說明下前端原來還能干這些事。
大家能想象前端是能將攝像頭和麥克風(fēng)的視頻流和音頻流提取出來，再為所欲為的么。或者說我想把我canvas畫板的內(nèi)容錄制成一個視頻，這些看似js應(yīng)該做不到的事情，其實(shí)都是可以做到的，不過兼容性不好。我在這里都是以chrome瀏覽器舉的例子。

吉林網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,吉林網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為吉林成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的吉林做網(wǎng)站的公司定做！

這里先把用到的api列一下：

  • getUserMedia：打開攝像頭和麥克風(fēng)的接口（文檔鏈接）
  • MediaRecorder：采集音視頻流（文檔鏈接）
  • srcObject：video標(biāo)簽可直接播放視頻流,這是一個大家應(yīng)該很少用到其實(shí)兼容性很好的屬性，推薦大家了解（文檔鏈接）
  • captureStream：可以將canvas輸出流，其實(shí)不單單是canvas這里只是舉有這個功能，具體的可以看文檔（文檔鏈接）

1、從攝像頭展示視頻

一、打開攝像頭

// 這里是打開攝像頭和麥克設(shè)備（會返回一個Promise對象）
navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
}).then(stream => {
 console.log(stream) // 放回音視頻流
}).catch(err => {
 console.log(err) // 錯誤回調(diào)
})

上面我們成功打開了攝像頭和麥克風(fēng)，并獲取到視頻流。那接下來就是要把流呈現(xiàn)到交互界面中了。

二、展示視頻

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <video id="video" width="500" height="500" autoplay></video>
</body>
<script>
 var video = document.getElementById('video')
 navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
 }).then(stream => {
 // 這里就要用到srcObject屬性了，可以直接播放流資源
 video.srcObject = stream
 }).catch(err => {
 console.log(err) // 錯誤回調(diào)
 })
</script>

效果如下圖：

詳解js的視頻和音頻采集

到這里為止我們已經(jīng)成功的將我們的攝像頭在頁面展示了。下一步就是如何將采集視頻，并下載視頻文件。

2、從攝像頭采集視頻

這里用到的是MediaRecorder對象：

創(chuàng)建一個新的MediaRecorder對象,返回一個MediaStream 對象用來進(jìn)行錄制操作,支持配置項(xiàng)配置容器的MIME type (例如"video/webm" or "video/mp4")或者音頻的碼率視頻碼率

MediaRecorder接收兩個參數(shù)第一個是stream音視頻流，第二個是option配置參數(shù)。下面我們可以把上面攝像頭獲取的流加入MediaRecorder中。

var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
}).then(stream => {
 // 這里就要用到srcObject屬性了，可以直接播放流資源
 video.srcObject = stream
 var mediaRecorder = new MediaRecorder(stream, {
 audioBitsPerSecond : 128000, // 音頻碼率
 videoBitsPerSecond : 100000, // 視頻碼率
 mimeType : 'video/webm;codecs=h364' // 編碼格式
 })
}).catch(err => {
 console.log(err) // 錯誤回調(diào)
})

在上面我們創(chuàng)建了MediaRecorder的實(shí)例mediaRecorder。接下來就是控制mediaRecorder的開始采集和停止采集的方法了。
MediaRecorder提供了一些方法和事件供我們使用：

  • MediaRecorder.start(): 開始錄制媒體,這個方法調(diào)用時可以通過給timeslice參數(shù)設(shè)置一個毫秒值,如果設(shè)置這個毫秒值,那么錄制的媒體會按照你設(shè)置的值進(jìn)行分割成一個個單獨(dú)的區(qū)塊, 而不是以默認(rèn)的方式錄制一個非常大的整塊內(nèi)容.
  • MediaRecorder.stop(): 停止錄制. 同時觸發(fā)dataavailable事件,返回一個存儲Blob內(nèi)容的錄制數(shù)據(jù).之后不再記錄
  • ondataavailable事件： MediaRecorder.stop觸發(fā)該事件，該事件可用于獲取記錄的媒體（Blob在事件的data屬性中可用作對象）
// 這里我們增加兩個按鈕控制采集的開始和結(jié)束
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
}).then(stream => {
 // 這里就要用到srcObject屬性了，可以直接播放流資源
 video.srcObject = stream
 var mediaRecorder = new MediaRecorder(stream, {
 audioBitsPerSecond : 128000, // 音頻碼率
 videoBitsPerSecond : 100000, // 視頻碼率
 mimeType : 'video/webm;codecs=h364' // 編碼格式
 })
 // 開始采集
 start.onclick = function () {
 mediaRecorder.start()
 console.log('開始采集')
 }
 // 停止采集
 stop.onclick = function () {
 mediaRecorder.stop()
 console.log('停止采集')
 }
 // 事件
 mediaRecorder.ondataavailable = function (e) {
 console.log(e)
 // 下載視頻
 var blob = new Blob([e.data], { 'type' : 'video/mp4' })
 let a = document.createElement('a')
 a.href = URL.createObjectURL(blob)
 a.download = `test.mp4`
 a.click()
 }
}).catch(err => {
 console.log(err) // 錯誤回調(diào)
})

ok，現(xiàn)在執(zhí)行一波操作；

詳解js的視頻和音頻采集

上圖可以看到結(jié)束采集后ondataavailable事件返回的數(shù)據(jù)中有一個Blob對象，這就是視頻資源了，再接下來我們就可以通過URL.createObjectURL()方法將Blob為url下載到本地了。視頻的采集到下載就結(jié)束了，很簡單粗暴。

上面是視頻采集下載的例子，如果只要音頻采集的，同樣道理的設(shè)置“mimeType”就好了。這里我就不舉例了。下面我在介紹將canvas錄制為一個視頻文件

2、canvas輸出視頻流

這里用到的是captureStream方法，將canvas輸出流，再用video展現(xiàn)，或者用MediaRecorder采集資源也是可以的。

// 這里就閑話少說直接上重點(diǎn)了因?yàn)楹蜕厦嬉曨l采集的是一樣的道理的。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <canvas width="500" height="500" id="canvas"></canvas>
 <video id="video" width="500" height="500" autoplay></video>
</body>
<script>
 var video = document.getElementById('video')
 var canvas = document.getElementById('canvas')
 var stream = $canvas.captureStream(); // 這里獲取canvas流對象
 // 接下來你先為所欲為都可以了，可以參考上面的我就不寫了。
</script>

下面我再貼一個gif(這是結(jié)合我上次寫的canvas事件的demo結(jié)合這次視頻采集的結(jié)合)傳送門（Canvas事件綁定）

希望大家可以實(shí)現(xiàn)下面的效果，其實(shí)還可以在canvas視頻里插入背景音樂什么的，這些都比較簡單。

詳解js的視頻和音頻采集

當(dāng)前標(biāo)題：詳解js的視頻和音頻采集
標(biāo)題網(wǎng)址：http://chinadenli.net/article8/gsjiip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、Google、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站維護(hù)、微信公眾號、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司