音视频(01)

男娘i 2021-11-29 19:42 590阅读 0赞

李超 从0打造音视频直播系统
    https://time.geekbang.org/column/intro/207

# 1.采集音视频 #

**编写`HTML`**

<!DOCTYPE html>
    <html>
        <head>
            <title>Realtime communication with WebRTC</title>
        </head>
        <body>
            <h1>获取音视频流</h1>
            <h1>使用WebRTC进行实时通信</h1>
            <video autoplay playsinline></video>
            <script src="js/client.js"></script>
        </body>
    </html>

autoplay    #自动播放
    playsinline #表示在 HTML5 页面内播放视频，而不是使用系统播放器播放视频

**编写`client.js`**

'use strict';
     
    const mediaStreamContrains = { //采集音视频的参数
        video: { 
            frameRate: { min: 20},
            width: { min: 640, ideal: 640},
            height: { min: 360, ideal: 360},
            aspectRatio: 16/9
        },
        audio: { 
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        }
    };
     
    const localVideo = document.querySelector('video');//获取元素
     
    function gotLocalMediaStream(mediaStream){ 
        localVideo.srcObject = mediaStream;
    }
     
    function handleLocalMediaStreamError(error){ 
        console.log('navigator.getUserMedia error: ', error);
    }
     
    navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
        gotLocalMediaStream
    ).catch(
        handleLocalMediaStreamError
    );

音视频采集 只要调用getUserMedia这个 API 即可
    var promise = navigator.mediaDevices.getUserMedia(constraints);

发表评论取消回复

表情：

评论列表（有 0 条评论，590人围观）

还没有评论，来说两句吧...

相关阅读

相关 SDL音视频渲染

SDL音视频渲染 -------------------- 目录 1. SDL简介 2. SDL窗口显示 3. SDL Event事件 4. SDL Th

淩亂°似流年/ 2022年11月11日 14:55/ 0 赞/ 184 阅读

相关 Electron 开发音视频

废话不多说，咱直接进入正题！创建 Electron 项目前提条件 > 在使用Electron进行开发之前，需要安装 Node.js。要检查 Node.js

忘是亡心i/ 2022年10月06日 05:45/ 0 赞/ 224 阅读

相关音视频研究方向

作者：武晓阳链接：https://www.zhihu.com/question/27005982/answer/51158064 来源：知乎著作权归作者所有。商

阳光穿透心脏的1/2处/ 2022年09月27日 06:47/ 0 赞/ 164 阅读

相关音视频技术

openssl https://www.jianshu.com/p/3950b84d64a1 https.createServer log4js WebRTC

快来打我*/ 2022年09月15日 11:49/ 0 赞/ 300 阅读

相关音视频同步记录

学习资源链接：[链接1][1] [链接2][2] [链接3][3] [ffmpeg中的时间][ffmpeg] 目录 \[[hid

旧城等待，/ 2022年07月16日 23:09/ 0 赞/ 242 阅读

相关音视频采集

原文：[http://www.cnblogs.com/tjpfly/archive/2011/06/08/2074735.html][http_www.cnblogs.com_

桃扇骨/ 2022年06月18日 09:09/ 0 赞/ 354 阅读

相关音视频开发进阶指南--音视频基础

FFmpeg API的介绍与使用 ![70][] ![70 1][] FFmpeg的整体架构： ![70 2][] FFmpeg的默认编译会产生四个可执行文件和8个静

客官°小女子只卖身不卖艺/ 2022年05月21日 13:38/ 0 赞/ 389 阅读

相关音视频开发进阶指南--音视频概念基础

音频概念基础：采样、量化和编码：首先要对模拟信号进行采样，所谓采样就是在时间轴上对信号进行数字化。根据奈奎斯特定理（也称为采样定理），按比声音最高频率高2倍以上的频率对

蔚落/ 2022年05月21日 01:22/ 0 赞/ 484 阅读

相关音视频开发学习

音视频开发学习： 1.[《视频编码扫盲篇》][Link 1] 2.[《软解/硬解/码率》][Link 2] 3.[《视频编解码器流程概述》][Link 3] 4.[

叁歲伎倆/ 2021年12月17日 12:01/ 0 赞/ 464 阅读

相关音视频(01)

李超从0打造音视频直播系统 https://time.geekbang.org/column/intro/207 1.采集音视频编写`HTML`

男娘i/ 2021年11月29日 19:42/ 0 赞/ 591 阅读