生活随笔
收集整理的這篇文章主要介紹了
webrtc简单案例——音视频采集和播放
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
webrtc簡單案例——音視頻采集和播放
目錄
打開攝像頭并將畫面顯示到頁面打開麥克風(fēng)并在頁面播放捕獲的聲音同時打開攝像頭和麥克風(fēng)，并在頁面顯示畫面和播放捕獲的聲音
1. 打開攝像頭并將畫面顯示到頁面
html代碼：
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>Title
</title
>
</head
>
<body
>
<video id
="local-video" autoplay playsinline
></video
>
<button id
="showVideo">打開攝像頭
</button
>
<p
>通過
getUserMedia()獲取視頻
</p
>
</body
><script
>const constraints
= {audio
: false,video
: true}function
handleSuccess(stream
) {const video
= document
.querySelector("#local-video");video
.srcObject
= stream
;}function
handleError(error) {console
.error("getUserMedia error: " + error)}function
onOpenCamera(e
) {navigator
.mediaDevices
.getUserMedia(constraints
).then(handleSuccess
).catch(handleError
);}document
.querySelector("#showVideo").addEventListener("click", onOpenCamera
)</script
>
</html
>
結(jié)果展示：
2. 打開麥克風(fēng)并在頁面播放捕獲的聲音
html代碼
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>Title
</title
>
</head
>
<body
>
<audio id
="local-audio" autoplay controls
>播放麥克風(fēng)捕獲的聲音
</audio
>
<button id
="playAudio">打開麥克風(fēng)
</button
>
<p
>通過
getUserMedia()獲取音頻
</p
>
</body
><script
>const constraints
= {audio
: true,video
: false}function
handleSuccess(stream
) {const audio
= document
.querySelector("#local-audio");audio
.srcObject
= stream
;}function
handleError(error) {console
.error("getUserMedia error: " + error)}function
onOpenMicrophone(e
) {navigator
.mediaDevices
.getUserMedia(constraints
).then(handleSuccess
).catch(handleError
);}document
.querySelector("#playAudio").addEventListener("click", onOpenMicrophone
)</script
>
</html
>
效果展示：
3. 同時打開攝像頭和麥克風(fēng)，并在頁面顯示畫面和播放捕獲的聲音
html代碼
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>Title
</title
>
</head
>
<body
>
<video id
="local-video" autoplay playsinline
></video
>
<button id
="showVideo">打開音視頻
</button
>
<p
>通過
getUserMedia()獲取音視頻
</p
>
</body
><script
>const constraints
= {audio
: true,video
: {width
: 640, height
: 480}}function
handleSuccess(stream
) {const video
= document
.querySelector("#local-video");video
.srcObject
= stream
;}function
handleError(error) {console
.error("getUserMedia error: " + error)}function
onOpenAV(e
) {navigator
.mediaDevices
.getUserMedia(constraints
).then(handleSuccess
).catch(handleError
);}document
.querySelector("#showVideo").addEventListener("click", onOpenAV
)</script
>
</html
>
效果展示如前兩個示例
超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生
總結(jié)
以上是生活随笔為你收集整理的webrtc简单案例——音视频采集和播放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
