二、视频数据采集

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)
}

打开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	✘	✔	✔	✔
锤子	✔（无色彩）	✔	✔	✔