zoukankan      html  css  js  c++  java
  • 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: {
        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);
    }
  • 相关阅读:
    德信创业系2014版
    [学习笔记]矩形面积并
    第六章 深入分析ClassLoader工作机制
    第五章 深入class文件结构
    设计模式
    第四章 Javac编译原理
    第三章 深入分析Java Web中的中文编码问题
    第2章 深入分析java I/O的工作机制(下)
    linnx常用命令学习
    jenkins学习(1)
  • 原文地址:https://www.cnblogs.com/tony-yang-flutter/p/14870300.html
Copyright © 2011-2022 走看看