音视频(01)

男娘i 2021-11-29 19:42 673阅读 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 条评论，673人围观）

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

相关阅读

相关 SDL音视频渲染

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

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

相关音视频技术

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

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

相关音视频同步记录

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

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

相关音视频采集

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

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

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

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

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

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

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

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

相关 01背包入门学习（附带视频讲解）

视频请自行腾讯视频 “01背包”，讲的特别好 0-1 背包问题：给定 n 种物品和一个容量为 C 的背包，物品 i 的重量是 wi，其价值为 vi 。问：

小鱼儿/ 2022年05月04日 08:57/ 0 赞/ 190 阅读

相关 Maven -01- 简介+视频+教程+学习路线

Maven -01- 简介+视频+教程+学习路线 Maven 简介： Maven 是 Apache 下的一个纯 Java 开发的开源项目。基于项目对象模型（缩写：

超、凢脫俗/ 2022年03月31日 09:35/ 0 赞/ 311 阅读

相关音视频开发学习

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

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

相关音视频(01)

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

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