WebRTC获取用户媒体流--->视频

一、概述

　　1.主要是实现WebRTC调用相机的预览功能

　　2.实现视频约束条件

　　3.获取媒体流并展示到<video>标签中

二、代码案例

　　1.html代码　

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取用户媒体流</title>
</head>

<body>
    <h1><code>getUserMedia()</code> very simple demo</h1>
    <video></video>
</body>
<script src="../js/user_media.js"></script>

</html>

　　2.js代码

/**
 * 获取用户的媒体流案例代码
*/

/**
 * 多浏览器适配
 */
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

//获取video标签
const localVideo = document.querySelector('video');

//创建MediaStreamConstraints，用于指定音频轨和视频轨
const constraints = { audio: false, video: {
    width:480,//宽
    height:320,//高
    frameRate:30,//帧率
    facingMode:'environment'//后置摄像头
} };
/**
 * 获取媒体流成功，并调用video标签的播放按钮展示
 * @param {流} stream 
 */
function successCallback(stream) {
    localVideo.srcObject = stream;
    localVideo.play();
}

/**
 * 出现异常时打印异常信息
 */
function errorCallback(error) {
    console.error("navigator.getUserMedia error:", error);
}
/**
 * 以下是获取用户媒体流的方法，设置约束条件以及成功和失败的回调函数
 * 
 */
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback);
} else {
    navigator.getUserMedia(constraints, successCallback, errorCallback);
}

posted on 2021-06-10 11:13 飘杨...... 阅读(390) 评论(0) 编辑收藏举报

WebRTC获取用户媒体流--->视频

搜索

常用链接

我的标签

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论