浏览器屏幕共享
作者:互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video autoplay playsinline muted></video>
<button id="startButton">开始</button>
<div id="errorMsg" style="color:red;">这里显示错误信息</div>
<script>
// let voices=[] //用了存放预设的人物信息
// speechSynthesis.onvoiceschanged=function(){
// voices=speechSynthesis.getVoices().filter(i=>i.lang.includes('zh'))
// console.log(voices);
// let sayer=new SpeechSynthesisUtterance(`
// 我叫你好`)
// sayer.voice=voices[0]
// speechSynthesis.speak(sayer)
// }
const startButton=document.getElementById('startButton')
startButton.addEventListener('click',()=>{
navigator.mediaDevices.getDisplayMedia({video:true}).then(handleSuccess,handleError)
})
function handleSuccess(stream){
startButton.disabled=true
const video=document.querySelector('video')
video.srcObject=stream
stream.getVideoTracks()[0].addEventListener('ended',()=>{
errorMsg('The user has ended sharing the screen')
startButton.disabled=false
})
}
function handleError(error){
errorMsg(`getDisplayMedia error:${error.name}`,error)
}
function errorMsg(msg,error){
const errorElement=document.querySelector('#errorMsg')
errorElement.innerHTML+=`<p>${msg}</p>`
if(typeof error!=='undefined'){
console.error(error);
}
}
</script>
</body>
</html>
标签:function,浏览器,errorMsg,voices,startButton,video,error,屏幕,共享 来源: https://www.cnblogs.com/7c89/p/16515450.html