WebRTC配合websocket

是一个互联网浏览器间的实时通信平台

WebRTC虽然冠以’web’之名，但不仅仅受限于传统互联网应用或浏览器的终端运行环境，
实际上无论终端环境是浏览器，桌面应用，移动设备，
只要ip连接可到达且符合WebRTC规范就可以互通

前端获取摄像头流程

1.初始化button，video控件
2.绑定打开摄像头响应事件onOpenCamera
3.如果要打开摄像头则点击”打开摄像头按钮”，触发onOpenCamera事件的调用
4.当触发onOpenCamera调用时：
a.设置约束条件，即getUserMedia函数的入参
b.getUserMedia有两种情况，一是正常打开摄像头，使用handleSuccess处理：
一种是打开摄像头失败，使用handleError处理
c.当正常打开摄像头时，则将getUserMedia返回的stream对象赋值给video控件的srcObject,
即可将视频显示出来

html文件

<video id="vid" autoplay playsinline></video>
<button id="btn">打开摄像头<button>

js文件

const constrains = {
    audio:true,
    video:{width:1200,height:720}
    }
//获取成功的结果
function handleSuccess(stream) {
    const video = document.querySelector('#vid')
    video.srcObject = stream
}
//失败的结果
function handleError(error) {
    console.log(error)
}
/*他这个就是利用navigator.mediaDevices.getUserMedia(constrains)
的成功拿到它成功的结果，而constrains配置项则是指定了请求的媒体类型和相对应的参数，
例如是音频还是视频？
分辨率是多少？分辨率的最大值是多少，最小值是多少？同时能设置你所理想的值通过ideal*/
function onOpenCamera(){
    navigator.mediaDevices.getUserMedia(constrains)
        .then(handleSuccess)
        .catch(handleError)
}
document.querySelector('#btn').addEventListener('click',onOpenCamera)

前端获取音频流程

// html文件
<radio id="rad" autoplay controls></radio>
<button id="btn">播放录音<button>

// js文件
const constrains = {
    audio:true,
    video:{width:1200,height:720}
    }
//获取成功的结果
function handleSuccess(stream) {
    const video = document.querySelector('#rad')
    audio.srcObject = stream
}
//失败的结果
function handleError(error) {
    console.log(error)
}
/*他这个就是利用navigator.mediaDevices.getUserMedia(constrains)的成功拿到它成功的结果，
而constrains配置项则是指定了请求的媒体类型和相对应的参数，例如是音频还是视频？分辨率是多少？
分辨率的最大值是多少，最小值是多少？同时能设置你所理想的值通过ideal*/
function onOpenCamera(){
    navigator.mediaDevices.getUserMedia(constrains)
        .then(handleSuccess)
        .catch(handleError)
}
document.querySelector('#btn').addEventListener('click',onOpenCamera)

navigator.mediaDevices.getUserMedia()

用于获取媒体流，用于音视频采集和播放。

navigator.mediaDevices.getUserMedia(constraints)返回的是一个promise对象，
使用then可以拿到他成功的结果，而他的成功的结果即视频的实时流

constraints这个形参是一个对象
1.可以配置是否显示音频/视频

{ audio: true, video: true }

2.同样可以配置屏幕的分辨率，浏览器会尝试满足

{audio: true,video: { width: 1280, height: 720 }}

3.同样可以强制要求配置你的分辨率的最大值/最小值，浏览器会强制满足

以下参数表示要求获取最低为 1280x720 的分辨率
{audio: true,
  video: {width: { min: 1280 },height: { min: 720 }
}}

4.在第三点的强制下，可能会满足不了，因此promise会返回失败的结果，
因此我们可以给他设置一个理想值

{audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

5.开启前置摄像头

{ audio: true, video: { facingMode: "user" } }

6.开启后置摄像头

{ audio: true, video: { facingMode: { exact: "environment" } } }

视频完整代码：

//html   
//playsinline该属性标识内联播放，如果不设置，那么它将会全屏播放
<video id="vid" autoplay playsinline></video>
<button id="btn">打开摄像头<button>
//js
document.querySelector('#btn').addEventListener('click',()=>{
    navigator.mediaDevices.getUserMedia(a).then(res=>{
    //res则是成功的一个媒体内容的流.
    //因此你此时只需要把这个媒体内容的流.赋值给video的实时流即可
          document.querySelector('#vid').srcObject = res
        })
        .catch(null)
})

音频完整代码与视频一致，只需要将video改为audio即可

<audio id="rad" autoplay controls></audio>
<button id="btn">播放录音<button>
  <script>
    navigator.mediaDevices.getUserMedia({audio:true})
    .then(res=>{
        document.querySelector('#btn').addEventListener('click',()=>{
          document.querySelector('#rad').srcObject = res
        })
      }
    )
  </script>