let videoPlayer = document.querySelector('video#player');
let gotMediaStream = (stream) => {
// stream 流里面包含 视频轨和音频轨
videoPlayer.srcObject = stream
}
let handleError = (err) => {
console.log(`getUserMedia errpr:${err}`)
}
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.log('getUserMedia is not supported!');
}else {
// 同时有视频数据和音频数据
let constrants = {
video: true,
audio: true
}
navigator.mediaDevices.getUserMedia(constrants)
.then(gotMediaStream)
.catch(handleError)
}
<html>
<head>
<title>WebRTC capture video and audio</title>
</head>
<body>
<video autoplay playsinline id='player'></video>
<script src='./client.js'></script>
</body>
</html>
打开index.html页面显示结果
image.png
let constrants = {
video: true，设置为true 可以获取视频信息
audio: true，设置为true 可以获取音频信息
}
在WebRTC1.0规范文档中使用的是navigator.getUserMedia,但不同浏览器使用的API是不同的，如
Google：webkitGetUserMedia
Firefox：mozGetUserMedia
手动实现兼容需要 navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia 比较麻烦
使用Google开源库，适配各个浏览器不同的API https://webrtc.github.io/adapter/adapter-latest.js 直接在script标签中引入，或下载到本地
亲测移动端浏览器支持情况
| 机型 | 自带浏览器 | Chrome | Firefox | QQ浏览器（微信） |
|---|---|---|---|---|
| iPhone（Safari） | ✔ | ✘ | ✘ | ✘ |
| 华为 | ✘ | ✔ | ✔ | ✔ |
| 三星 | ✔ | ✔ | ✔ | ✔ |
| 魅族 | ✔ | ✔ | ✔ | ✔ |
| 小米 | ✘ | ✔ | ✔ | ✔ |
| vivo | ✘ | ✔ | ✔ | ✔ |
| 锤子 | ✔（无色彩） | ✔ | ✔ | ✔ |
