音视频采集和播放
打开摄像头并将画面显示到页面
1. 初始化button、video控件
2. 绑定"打开摄像头"响应事件onOpenCamera
3. 如果要打开摄像头则点击 "打开摄像头"按钮,以触发onOpenCamera事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件,即是getUserMedia函数的入参
b. getUserMedia有两种情况,一种是正常打开摄像头,使用handleSuccess处理;一种是打开摄像头失败,使
用handleError处理
c. 当正常打开摄像头时,则将getUserMedia返回的stream对象赋值给video控件的srcObject即可将视频显示出
来
js
<!DOCTYPE html>
<html >
<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>
打开麦克风并在页面播放捕获的声音
1. 初始化button、audio控件
2. 绑定"打开麦克风"响应事件onOpenMicrophone
3. 如果要打开麦克风则点击 "打开麦克风"按钮,以触发onOpenMicrophone事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件,即是getUserMedia函数的入参
b. getUserMedia有两种情况,一种是正常打开麦克风,使用handleSuccess处理;一种是打开麦克风失败,使
用handleError处理
c. 当正常打开麦克风时,则将getUserMedia返回的stream对象赋值给audio控件的srcObject即可将声音播放出
来
js
<!DOCTYPE html>
<html>
<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 onOpenMicro(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone);
</script>
</html>
打开摄像头和麦克风
主要区别是
js
const constraints = (window.constraints = {
audio: true,
video: true
});
js
<!DOCTYPE html>
<html>
<body>
//muted消除回声
<video id="local‐video" autoplay playsinline muted></video>
<button id="showVideo">打开音视频</button>
<div id="errorMsg"></div>
<p>通过 <code>getUserMedia()</code> 获取音视频.</p>
<script>
const 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>