WebRTC 如何推送本地视频流

、需求

使用 webrtc 协议做直播，常见的音视频源是摄像头和麦克风，高级一点的就是桌面分享。虽然使用桌面分享可以实现推送本地流（原理就是对屏幕录制），但依赖本地播放器，并且观众可以看到主播的任何操作。

有一种伪直播需求，需要将本地视频无感知推送给用户，让用户感觉就像直播一样。

使用webrtc协议，大多数情况是在浏览器中做主播端。众所周知，出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。那么如何将本地视频源进行加载到浏览器并推送出去呢？

二、核心API

HTMLCanvasElement.captureStream()

该方法返回一个CanvasCaptureMediaStream实时视频捕获的画布。

使用例子：

//获取所需要截取媒体流的canvas element
var canvasElt=document.querySelector('canvas'); // 或者 video 标签

//截取到媒体流
var stream=canvasElt.captureStream(25); // 25 FPS

//使用媒体流
// E.g.使用RTCPeerConnection来传输给其它的电脑
// 下面的pc是其他地方创建的一个RTCPeerConnection
pc.addStream(stream);

通过以上例子，是不是恍然大雾。

此时我们的方案可以是：

上传一段视频到服务器或者云存储
使用 video 标签加载视频
使用 captureStream 捕获视频流
使用 addStream 将视频流发布

此时解决了推送视频流，但是要推送本地视频怎么做呢？

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

三、最终解决方案

出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用 input file 和 FileReader 来实现。虽然 FileReader 可以读文件，但是需要经过base-64编码，如果读大文件肯定会影响效率。所以我们只能考虑 input file，可以使用 URL.createObjectURL 对视频进行预览。

那么我的最终方案就是使用 captureStream + input file预览 模式来解决这个问题。

简要代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <video width="500" controls>
        <source src="my_video.mp4" id="video_here">
    </video>
    <input type="file" name="file[]" class="file_video" accept="video/*">
    <script>
        $(document).on("change", ".file_video", function (evt) {
            var $source=$('#video_here');
            $source[0].src=URL.createObjectURL(this.files[0]);
            $source.parent()[0].load();
        })
    </script>
</body>

</html>

四、总结

通过以上步骤，我们可以总结如下步骤：

使用 input 标签进行文件选择
使用 video标签配合 input标签进行视频预览
使用 captureStream 捕获视频流
使用 addStream 将视频流发布

原文 https://zhuanlan.zhihu.com/p/291399800

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

1.认识<img/><map><area/></map>基本结构

首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>图片区域链接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加区域链接的图片的路径，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

让<img>标签通过<map>的名字来驱使<map>为自己工作。

需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。

第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。

示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面来划分区域。

2.为图片划分区域的方法

<area>是用来划分区域的标签，area也是“”区域“”的意思。

默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。

分别添加三个形状，示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。

为<area>添加coords属性可以指定区域的位置和范围。

如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：

如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如

这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：

这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？

3.使用Gimp软件精准定位图片区域

使用Gimp软件可以解决这个问题。

Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。

下载地址：https://www.gimp.org/

双击安装即可，注意选择一下安装目录。

完成安装之后打开，界面如下：

点击“文件”找到“打开”：

选择要打开的图片名字：

点击名称后，右边会有图像预览，点击“打开”即可：

打开后如图：

把鼠标放到图像的任意位置，看左下角：

这里就会显示我们鼠标所在的像素坐标数值。

这样我们就能方便地写“poly”的coords了。

请在空闲时找一张图片演练一下吧！

4.为区域添加链接

在<area/>标签中添加href属性即可指定链接路径，如下：

href="https://www.zhihu.com/question/284642168"

添加title属性可以在鼠标滑过链接区域时提示读者，如下：

title="歼20气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商

WebRTC 如何推送本地视频流

、需求

二、核心API

三、最终解决方案

四、总结

图片添加区域链接的基本写法

目录

您的项目需求