WebRTC音视频采集和播放示例

最新推荐文章于 2024-09-12 15:18:43 发布

我爱大西瓜~

最新推荐文章于 2024-09-12 15:18:43 发布

阅读量224

点赞数 2

文章标签： webrtc 音视频

本文链接：https://blog.csdn.net/wxxnb/article/details/141721311

版权

1. 用户音视频弹窗授权

 // 从chrome81版本开始,enumerateDevices需要在获取到用户授权后才可以获取到完整的列表信息
let tmpStream = await navigator.mediaDevices.getUserMedia(constraints);//用于获取用户授权

2. 获取音视频设备列表

//获取用户授权后需要重新获取音视频设备列表
let devices = await navigator.mediaDevices.enumerateDevices();
let audioinputDevices = [];
let audiooutputDevices = [];
let videoDevices = [];
devices.forEach(item => {
     if (item.kind == "audioinput") {
           audioinputDevices.push(item);
         } else if (item.kind == "audiooutput") {
           audiooutputDevices.push(item); 
         } else if (item.kind == "videoinput") {
           videoDevices.push(item);
         }
})

3: 捕获音视频流

let constraints = createConstraints("video", '设备id', '分辨率')

navigator.mediaDevices.getUserMedia(constraints).then(stream => {
         
         
}).catch(error => {
         
        
});

function createConstraints(_mediaType, _deviceId, _quality) {

    if (_mediaType == "video") {
        //视频
        let qualityInfo = Constant.videoQualityAry[_quality];
        return {
            audio: false,
            video: { deviceId: { exact: _deviceId }, width: { max: qualityInfo.width, min: qualityInfo.width }, height: { max: qualityInfo.height, min: qualityInfo.height }, frameRate: { ideal: qualityInfo.fps, min: 10 } }
        };
    } else if (_mediaType == "audio") {
        //音频
        return {
            audio: { deviceId: { exact: _deviceId } },
            video: false
        };
    }
}
// Constant 下的分辨率配置
export const videoQualityAry = [{ width: 160, height: 90, fps: 30, maxbitrate: 64 },
{ width: 320, height: 180, fps: 30, maxbitrate: 256 },
{ width: 640, height: 360, fps: 30, maxbitrate: 800 },
{ width: 1280, height: 720, fps: 30, maxbitrate: 1800 },
{ width: 1920, height: 1080, fps: 30, maxbitrate: 2500 }];

3: 捕获桌面共享流

  /**
   * 捕获屏幕共享流
   * @param isShareAudio 是否共享音频
   * @return 捕获的流
   */
  async function captureStream(isShareAudio, quality = 0, frameRate) {
    let qualityInfo = Constant.videoQualityAry[quality];
    if (!frameRate) {
      frameRate = Constant.SCREEN_SHARE_DEFAULT_FRAMERATE;
    }
    let option = {
      audio: isShareAudio,
      video: {
        width: {max: qualityInfo.width},
        height: {max: qualityInfo.height},
        frameRate: {ideal: frameRate}
      }
    };
    return await navigator.mediaDevices.getDisplayMedia(option);
  }
// Constant 下的fps配置
 export const SCREEN_SHARE_DEFAULT_FRAMERATE = 15;

4：渲染捕获的音视频流（简单的例子）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebRTC Demo</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #video-container {
        width: 400px;
        margin: 0 auto;
    }
</style>

<body>
    <div id="video-container">
        <video id="local-video" autoplay playsinline></video>
        <button id="showVideo" onclick="openVideo()">打开</button>
    </div>

</body>

<script>
    const constraints = {
        audio: false, // true 的时候，捕获的流同时包含视频流和音视频
        video: { width: 640, height: 480 }
    }

    // 处理打开摄像头成功
    function handleSuccess(mediaStream) {
        const video = document.querySelector("#local-video");
        video.srcObject = mediaStream;
    }

    // 异常处理
    function handleError(error) {
        console.error("getUserMedia error: " + error)
    }

    function openVideo(e) {
        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
    }
</script>

</html>