音视频相关的知识点_video new mediastream(-CSDN博客

本文链接：https://blog.csdn.net/lln0001/article/details/121741170

video

如果需要用户自己手动播放的视频，最好指定 preload属性

preload=none

MP4格式视频的编码方式有3种，mpg4(xdiv),mpg4(xvid)，avc(h264), html 5 的 video 只支持 avc(h264) 格式的视频编码方式。所以，不符合格式的视频，可能只显示音频而无画面。
video黑屏的原因，如果视频流是存在的，那么可能是自动播放权限被限制了，需要用户手动点击，或者权限开放。

WebRTC

WebRTC 是一个可以在 Web 应用程序中实现音频，视频和数据的实时通信的开源项目
常用API

getUserMedia：获取音频和视频流（MediaStream）
RTCPeerConnection：点对点通信
RTCDataChannel：数据通信

getUserMedia

用户获取用户的音视频流
官方网址说明
使用

// 判断是否有 navigator.mediaDevices，没有赋成空对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }

    // 继续判断是否有 navigator.mediaDevices.getUserMedia，没有就采用 navigator.getUserMedia
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia = function(prams) {
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            // 兼容获取
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function(resolve, reject) {
                getUserMedia.call(navigator, prams, resolve, reject);
            });
        };
    }
navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 
    // 参数表示需要同时获取到音频和视频
        .then(stream => {
          // 获取到优化后的媒体流
          let video = document.querySelector('#rtc');
          video.srcObject = stream;
        })
        .catch(err => {
          // 捕获错误
        });

RTCPeerConnection

RTCPeerConnection 接口代表一个由本地计算机到远端的 WebRTC 连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。—— MDN

本地webrtc流查看地址

chrome://webrtc-internals/

canvas

一些对于视频画面的调整、截屏、动画录制，通常借助于canvas

H5 input:file capture

由于getUserMedia的兼容性问题，往往我们还会用h5的input:file capture属性

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

获取时

var file = document.querySelector('input[capture="camera"]').files[0];
var url = URL.createObjectURL(file);

document.getElementById("video").src = url;