随笔 - 632  文章 - 17  评论 - 54  阅读 - 93万

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   飘杨......  阅读(391)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
历史上的今天:
2015-06-10 Android 百度sdk5.0定位
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示