生活随笔
收集整理的這篇文章主要介紹了
webrtc简单案例——音视频采集和播放
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
webrtc簡單案例——音視頻采集和播放
目錄
打開攝像頭并將畫面顯示到頁面打開麥克風并在頁面播放捕獲的聲音同時打開攝像頭和麥克風，并在頁面顯示畫面和播放捕獲的聲音
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
>
結果展示：
2. 打開麥克風并在頁面播放捕獲的聲音
html代碼
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>Title
</title
>
</head
>
<body
>
<audio id
="local-audio" autoplay controls
>播放麥克風捕獲的聲音
</audio
>
<button id
="playAudio">打開麥克風
</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. 同時打開攝像頭和麥克風，并在頁面顯示畫面和播放捕獲的聲音
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
>
效果展示如前兩個示例
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生
總結
以上是生活随笔為你收集整理的webrtc简单案例——音视频采集和播放的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
