冀州网站建设,北京网站定制开发,家庭组网方案,义乌做站外推广的公司音视频采集和播放
打开摄像头并将画面显示到页面
1. 初始化button、video控件
2. 绑定“打开摄像头”响应事件onOpenCamera
3. 如果要打开摄像头则点击 “打开摄像头”按钮#xff0c;以触发onOpenCamera事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件#xff0c…音视频采集和播放
打开摄像头并将画面显示到页面
1. 初始化button、video控件
2. 绑定“打开摄像头”响应事件onOpenCamera
3. 如果要打开摄像头则点击 “打开摄像头”按钮以触发onOpenCamera事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件即是getUserMedia函数的入参
b. getUserMedia有两种情况一种是正常打开摄像头使用handleSuccess处理一种是打开摄像头失败使
用handleError处理
c. 当正常打开摄像头时则将getUserMedia返回的stream对象赋值给video控件的srcObject即可将视频显示出
来!DOCTYPE html
html body video idlocal-video autoplay playsinline/videobutton idshowVideo 打开摄像头/buttonp通过getUserMedia()获取视频/p/bodyscript 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打开麦克风并在页面播放捕获的声音
1. 初始化button、audio控件
2. 绑定“打开麦克风”响应事件onOpenMicrophone
3. 如果要打开麦克风则点击 “打开麦克风”按钮以触发onOpenMicrophone事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件即是getUserMedia函数的入参
b. getUserMedia有两种情况一种是正常打开麦克风使用handleSuccess处理一种是打开麦克风失败使
用handleError处理
c. 当正常打开麦克风时则将getUserMedia返回的stream对象赋值给audio控件的srcObject即可将声音播放出
来!DOCTYPE htmlhtmlbodyaudio idlocal‐audio autoplay controls播放麦克风捕获的声音/audiobutton idplayAudio打开麦克风/buttonp通过getUserMedia()获取音频/p/body scriptconst constraints{audio:true,video:false};//处理打开麦克风成功function handleSuccess(stream){const audio document.querySelector(#local-audio);audio.srcObjectstream;}// 异常处理function handleError(error){console.error(getUserMedia error: error);}function onOpenMicro(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector(#playAudio).addEventListener(click, onOpenMicrophone);/script /html 打开摄像头和麦克风
主要区别是
const constraints (window.constraints {audio: true,video: true});!DOCTYPE html
htmlbody//muted消除回声video idlocal‐video autoplay playsinline muted/videobutton idshowVideo打开音视频/buttondiv iderrorMsg/divp通过 codegetUserMedia()/code 获取音视频./pscriptconst constraints (window.constraints {audio: true,video: true});// 处理打开摄像头麦克风成功function handleSuccess(stream) {const video document.querySelector(#local‐video);video.srcObject stream;}function handleError(error) {console.error(getUserMedia error: error);}async function onOpenAV(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector(#showVideo).addEventListener(click,onOpenAV);/script/body
/html
