WebRTC学习六：MediaStream 常用API介绍

莫张周刘王  金牌会员 | 2024-11-1 19:47:08 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 920|帖子 920|积分 2760

系列文章目录

第一篇 基于SRS 的 WebRTC 情况搭建
第二篇 基于SRS 实现RTSP接入与WebRTC播放
第三篇 centos下基于ZLMediaKit 的WebRTC 情况搭建
第四篇 WebRTC学习一：获取音频和视频设备
第五篇 WebRTC学习二：WebRTC音视频数据采集
第六篇 WebRTC学习三：WebRTC音视频束缚
第七篇 WebRTC学习四：WebRTC常规视觉滤镜
第八篇 WebRTC学习五：从视频中提取图片
第九篇 WebRTC学习六：MediaStream 常用API介绍

  
前言

WebRTC（Web Real-Time Communication）是一个强盛的技能，可以让网页应用程序和网站举行实时音频、视频和数据共享。通过使用 WebRTC，开发者可以实现高质量的音视频通话，构建实时多媒体应用，而无需用户安装任何插件。本文将在前面文章的基础上进一步介绍 WebRTC 中的 MediaStream API，这是一组用于处理音频和视频流的常用方法。我们将深入探讨这些方法的用法，并给出一个简单的示例，帮助大家更好地理解如安在实际应用中运用这些 API。
一、WebRTC MediaStream API 常用方法

1.getUserMedia()

getUserMedia() 方法是 WebRTC 的焦点，用于请求访问用户的音频和视频设备。该方法接受一个束缚对象，指定请求的音频和视频选项。
  1. navigator.mediaDevices.getUserMedia({
  2.     video: true,
  3.     audio: true
  4. }).then(function(stream) {
  5.     // 处理成功获取的媒体流
  6. }).catch(function(error) {
  7.     // 处理错误
  8. });
复制代码
2.MediaStream.getTracks()

通过 getTracks() 方法，可以获取与媒体流相关的全部轨道。此方法返回一个包罗全部轨道的数组。
  1. const tracks = stream.getTracks();
复制代码
3.MediaStream.getAudioTracks()

getAudioTracks() 方法返回音频轨道的数组，便于单独使用或管理音频流。
  1. const audioTracks = stream.getAudioTracks();
复制代码
4.MediaStream.getVideoTracks()

getVideoTracks() 方法返回视频轨道的数组，开发者可以使用该方法来处理视频相关的使用。
  1. const videoTracks = stream.getVideoTracks();
复制代码
5.MediaStream.addTrack()

假如需要将新轨道添加到现有的媒体流，可以使用 addTrack() 方法。
  1. stream.addTrack(newTrack);
复制代码
6.MediaStream.removeTrack()

该方法允许从媒体流中移除指定的轨道。使用时，将要移除的轨道作为参数传入。
  1. stream.removeTrack(track);
复制代码
7.MediaStream.clone()

clone() 方法用于创建媒体流的副本，副本中的轨道是原轨道的副本，方便用于差别的目标。
  1. const clonedStream = stream.clone();
复制代码
8.MediaStream.active

该属性为只读布尔值，指示媒体流是否包罗至少一个活动的轨道。可以用来判断流的状态。
  1. if (stream.active) {
  2.     console.log("Stream is active");
  3. }
复制代码
2.MediaStream.getTracks()

通过 getTracks() 方法，可以获取与媒体流相关的全部轨道。此方法返回一个包罗全部轨道的数组。
  1. const tracks = stream.getTracks();
复制代码
9.事件处理

onactive 和 oninactive 事件可以用于跟踪轨道的活动状态。当轨道变为活动或非活动时，会触发相应的事件。
  1. stream.onactive = function() {
  2.     console.log("At least one track is active");
  3. };
  5. stream.oninactive = function() {
  6.     console.log("All tracks are inactive");
  7. };
复制代码
二、示例

1.html代码

index.html文件内容如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>WebRTC获取视频约束</title>
  7.     <link rel="stylesheet" href="./css/style.css"> <!-- 引入CSS文件 -->
  8. </head>
  9. <body>
  10.     <div id="controls">
  11.         <div>
  12.             <label>Audio Source:</label>
  13.             <select id="audioSource"></select>
  14.         </div>
  16.         <div>
  17.             <label>Audio Output:</label>
  18.             <select id="audioOutput"></select>
  19.         </div>
  21.         <div>
  22.             <label>Video Source:</label>
  23.             <select id="videoSource"></select>
  24.         </div>
  26.         <div>
  27.             <label>Filter:</label>
  28.             <select id="filter">
  29.                 <option value="none">None</option>
  30.                 <option value="blur">Blur</option>
  31.                 <option value="grayscale">Grayscale</option>
  32.                 <option value="invert">Invert</option>
  33.                 <option value="sepia">sepia</option>
  34.             </select>
  35.         </div>
  36.     </div>
  38.     <div id="videoContainer">
  39.         <table>
  40.             <tr>
  41.                 <td><video autoplay playsinline id="player"></video></td>
  42.                 <td><div id="video-tracks" class="Output"></div></td>
  43.                 <td><div id="audio-tracks" class="Output"></div></td>
  44.             </tr>
  45.         
  46.         </table>
  47.     </div>
  48.    
  49.    
  50.     <script src="../adapter.js"></script>
  51.     <script src="./js/client.js"></script>
  52. </body>
  53. </html>
复制代码
2.css代码

style.css文件内容如下:
  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     font-family: Arial, sans-serif;
  6.     margin: 0;
  7.     padding: 20px;
  8. }
  10. #controls {
  11.     display: flex;
  12.     justify-content: space-between;
  13.     width: 100%;
  14.     max-width: 800px; /* 设置一个最大宽度 */
  15.     margin-bottom: 20px; /* 控件与视频和画布的间距 */
  16. }
  18. #videoContainer {
  19.     display: flex;
  20. }
  22. #player {
  23.     width: 400px; /* 设置视频宽度 */
  24.     height: auto; /* 自动高度 */
  25.     border: 1px solid #ccc; /* 可选，给视频一个边框 */
  26. }
  28. .Output {
  29.     font-family: Arial, sans-serif;
  30.     font-size: 14px;
  31.     line-height: 1.1;
  32.     padding: 10px;
  33.     border: 1px solid #7c6464;
  34.     border-radius: 5px;
  35.     background-color: #f9f9f9;
  36. }
  38. .Output div {
  39.     margin-bottom: 2px;
  40. }
  42. button {
  43.     margin-top: 10px; /* 按钮与其它元素之间的间距 */
  44. }
  46. select {
  47.     margin-right: 10px; /* 下拉框之间的间距 */
  48. }
  50. .none {
  51.     -webkit-filter:none;
  52. }
  53. .blur {
  54.     -webkit-filter: blur(3px);
  55. }
  56. .grayscale {
  57.     -webkit-filter: grayscale(1);
  58. }
  59. .invert {
  60.     -webkit-filter: invert(1);
  61. }
  62. .sepia {
  63.     -webkit-filter: sepia(1);
  64. }
复制代码
3.js代码

client.js文件内容如下:
  1. 'use strict';
  3. const audioSource = document.querySelector('select#audioSource');
  4. const audioOutput = document.querySelector('select#audioOutput');
  5. const videoSource = document.querySelector('select#videoSource');
  6. const filterSelect = document.querySelector('select#filter');
  8. const snapshot = document.querySelector('button#snapshot');
  9. const picture = document.querySelector('canvas#picture');
  11. const videoplay = document.querySelector('video#player');
  12. // const audioplay = document.querySelector('audio#audioplayer');
  13. var videoTrackConstraints = document.querySelector('div#video-tracks');
  14. var audioTrackContainer = document.querySelector('div#audio-tracks');
  15.    
  17. // 获取设备列表
  18. function gotDevices(deviceInfos) {
  19.     deviceInfos.forEach(deviceInfo => {
  20.         const option = document.createElement('option');
  21.         option.text = deviceInfo.label;
  22.         option.value = deviceInfo.deviceId;
  24.         switch (deviceInfo.kind) {
  25.             case "audioinput":
  26.                 audioSource.appendChild(option);
  27.                 break;
  28.             case "audiooutput":
  29.                 audioOutput.appendChild(option);
  30.                 break;
  31.             case "videoinput":
  32.                 videoSource.appendChild(option);
  33.                 break;
  34.         }
  35.     });
  36. }
  38. // 获取媒体流
  39. function gotMediaStream(stream) {
  40.      videoplay.srcObject = stream;
  41.     var videoTracks = stream.getVideoTracks()[0];
  42.     var videoConstraints = videoTracks.getSettings();
  43.     // 将 JSON 对象转换为 HTML 字符串
  44.     let constraintsHTML = '';
  45.     constraintsHTML = '<h2>视频轨道</h2>';
  46.     for (const [key, value] of Object.entries(videoConstraints)) {
  47.         constraintsHTML += `<div><strong>${key}:</strong> ${value}</div>`;
  48.     }
  49.    
  50.     // 插入到 div 元素中
  51.     videoTrackConstraints.innerHTML = constraintsHTML;
  53.     // 显示音频轨道信息
  54.     const audioTracks = stream.getAudioTracks()[0];
  55.     var audioConstraints = audioTracks.getSettings();
  56.     let audioconstraintsHTML = '';
  57.     audioconstraintsHTML= '<h2>音频轨道</h2>';
  58.    
  59.     for (const [key, value] of Object.entries(audioConstraints)) {
  60.         audioconstraintsHTML += `<div><strong>${key}:</strong> ${value}</div>`;
  61.     }
  62.     audioTrackContainer.innerHTML = audioconstraintsHTML;
  64.     return navigator.mediaDevices.enumerateDevices();
  65. }
  67. // 处理错误
  68. function handleError(err) {
  69.     console.error('getUserMedia error:', err);
  70. }
  72. // 启动媒体流
  73. function start() {
  74.     if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  75.         console.error('getUserMedia is not supported!');
  76.         return;
  77.     }
  79.     const constraints = {
  80.         video: {
  81.             width: 640,
  82.             height: 480,
  83.             frameRate: 30,
  84.             facingMode: "environment",
  85.             deviceId: videoSource.value ? { exact: videoSource.value } : undefined, // 确保使用确切的设备ID
  86.         },
  87.         
  88.         audio: {
  89.             noiseSuppression: true,
  90.             echoCancellation: true
  91.         }
  92.     };
  94.     navigator.mediaDevices.getUserMedia(constraints)
  95.         .then(gotMediaStream)
  96.         .then(gotDevices)
  97.         .catch(handleError);
  98. }
  100. // 滤镜选择更改事件
  101. filterSelect.onchange = function () {
  102.     videoplay.className = filterSelect.value;
  103. };
  106. // 初始化
  107. start();
  108. videoSource.onchange = start;
复制代码
二、演示效果

在欣赏器中打开 index.html 文件，运行成功的话可以看到左边是视频画面，中间是获取的视频轨道信息，右边是音频轨道信息，下图是我的欣赏器上显示的效果。

总结

WebRTC 的 MediaStream API 提供了一系列强盛而灵活的方法，可以轻松访问和管理用户的音频与视频流。通过使用这些 API，开发者可以大概构建高质量的实时通讯应用。本文介绍的常用 API 及其用法，结合示例代码，希望能帮助大家更好地理解如何使用这些接口。
假如你对 WebRTC 另有其他题目或希望相识更多内容，请随时留言或分享你的看法。
   你好，我是阿灿，慢慢理解世界，慢慢更新自己。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莫张周刘王

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表