处理浏览器中的媒体 · PHP/Python/前端/Linux 等等学习笔记

[TOC] > [参考](https://a-wing.github.io/webrtc-book-cn/02_handling-media-in-the-browser.html#webrtc-%E7%9A%84-10-%E4%B8%AA%E6%AD%A5%E9%AA%A4) ## 三个逻辑组： 1. 本地和远程音频和视频的获取和管理： `MediaStream` 界面（以及 HTML5 `<audio>` 和 `<video>` 标签的相关用法） 2. 连接管理： `RTCPeerConnection` 接口 3. 管理任意数据： `RTCDataChannel` 接口 ## WebRTC 的 10 个步骤 1. 从本地设备（如麦克风、网络摄像头）创建一个`MediaStream`对象。 2. 从本地`MediaStream`获取*URL Blob* 3. 使用获取的*URL Blob*进行本地预览 4. 创建一个`RTCPeerConnection`对象 5. 将本地流添加到新创建的连接 6. 将你自己的会话描述发送到远程对等点 Send your own session description to the remote peer. 7. 从您的对等方接收远程会话描述 Receive the remote session description from your peer. 8. 处理收到的会话描述，并将远程流添加到您的`RTCPeerConnection` 9. 从远程流获取*URL Blob* 10. 使用获取的*URL Blob*播放远程对等方的音频和/或视频 ## 媒体捕获及数据流 ![](https://a-wing.github.io/webrtc-book-cn/assets/img/rcwr_0201.9228fb61.png) 由一个视频轨道和两个音频轨道组成的`MediaStream` ### 获取本地多媒体内容 `getUserMedia(constraints, successCallback, errorCallback)` ### URL `createObjectUrl()`方法指示浏览器创建和管理与本地文件或二进制对象（blob）关联的唯一URL： ``` createObjectURL(stream) ``` 它在 WebRTC 中的典型用法是从`MediaStream`对象开始创建*Blob URL*。然后，将在 HTML 页面内使用*Blob URL*。实际上，本地和远程流都需要此过程 ## 使用 getUserMedia() API <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html> <head> <title>getUserMedia very simple demo</title> </head> <body> <div id="mainDiv"> <h1><code>getUserMedia()</code> very simple demo</h1> <p>With this example, we simply call <code>getUserMedia()</code> and display the received stream inside an HTML5 <video> element</p> <p>View page source to access both HTML and JavaScript code...</p> <video autoplay></video> </div> <script language="JavaScript"> // API method: // Opera --> getUserMedia // Chrome --> webkitGetUserMedia // Firefox --> mozGetUserMedia navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; var constraints = {audio: false, video: true}; var video = document.querySelector("video"); function successCallback(stream) { // 赋值给window,可供浏览器在console 输入 steam 检查 window.stream = stream; video.srcObject=stream; video.play(); } function errorCallback(error) { console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback); </script> </body> </html> ``` </details> <br /> ## 媒体模型浏览器提供了从源(sources)到接收器(sinks)的媒体管道(pipeline)。在浏览器中，**接收器**是`<img>`，`<video>`和`<audio>`标记。 **来源**可以是物理网络摄像头，麦克风，来自用户硬盘驱动器的本地视频或音频文件，网络资源或静态图像 ### 媒体约束约束是一项可选功能，用于限制`MediaStream`轨道源上允许的可变性范围。约束通过`Constrainable`接口在轨道上公开，该接口包括用于动态更改约束的 API getUserMedia() 调用还允许在首次获取轨道时应用一组初始约束（例如，设置视频分辨率的值） ### 使用约束 >[warning] WebRTC 浏览器中的 `getUserMedia()` 约束支持 <details> <summary>调节分辨率 index.html</summary> ``` <!DOCTYPE html> <html> <head> <title>getUserMedia very simple demo</title> </head> <body> <div id="mainDiv"> <h1><code>getUserMedia()</code>: playing with video constraints</h1> <p>Click one of the below buttons to change video resolution...</p> <div id="buttons"> <button id="qvga">320x240</button> <button id="vga">640x480</button> <button id="hd">1280x960</button> </div> <p id="dimensions"></p> <video autoplay></video> </div> <script lang="JavaScript"> // API method: // Opera --> getUserMedia // Chrome --> webkitGetUserMedia // Firefox --> mozGetUserMedia navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; var constraints = {audio: false, video: true}; var video = document.querySelector("video"); var vgaButton = document.querySelector("button#vga"); var qvgaButton = document.querySelector("button#qvga"); var hdButton = document.querySelector("button#hd"); var qvgaConstraints = { video: { mandatory: { maxWidth: 100, maxHeight: 100 } } }; // Constraints object for standard resolution video var vgaConstraints = { video: { mandatory: { maxWidth: 200, maxHeight: 200 } }, }; // Constraints object for high resolution video var hdConstraints = { video: { mandatory: { maxWidth: 300, maxHeight: 300 } }, }; // Associate actions with buttons: qvgaButton.onclick = function () { getMedia(qvgaConstraints) }; vgaButton.onclick = function () { getMedia(vgaConstraints) }; hdButton.onclick = function () { getMedia(hdConstraints) }; function getMedia(constraints) { if (!!stream) { video.src = null; } navigator.getUserMedia(constraints, successCallback, errorCallback); } function successCallback(stream) { // 赋值给window,可供浏览器在console 输入 steam 检查 window.stream = stream; video.srcObject = stream; video.play(); } function errorCallback(error) { console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback); </script> </body> </html> ``` </details> <br />