WebRTC[28]-一款非常简单的基于WebRTC的视频预览播放器(具有贴图、视频特效)

目录

前言

正文

1. 开启摄像头和麦克风

2. 增加播控按钮

3. 本地预览拍照

4. 保存预览照片

5. 显示贴图效果(封面)

6. 视频预览特效(多种效果)

6.1 曝光效果

6.2 悬浮立体效果

6.3 磨皮效果

6.4 反色效果

结论


前言

今天这篇文章给大家介绍一款非常简单的基于WebRTC采集端的视频预览播放器。

《WebRTC工作原理精讲》系列-总览

正文

我们需要做的是本地预览的视频播放器,那么首先肯定是要打开摄像头,然后显示播放器控制按钮,最后再增加一些辅助功能,比如拍照、保存照片、贴图、视频特效等。接下来,我们就具体看看某个环节的操作。为了保证演示效果,建议尝试的小伙伴使用chrome浏览器。

1. 开启摄像头和麦克风

打开摄像头可以使用WebRTC三大接口之一的getUserMedia方法来实现,具体可以参考如下代码:

let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    getUserMedia.call(navigator,{ video:true },function(localMediaStream){ let video =document.getElementById('video1');
        video.srcObject = localMediaStream;
    },function(e) { console.log("error: ",e);
    });

正常情况下,chrome浏览器会在左上角弹出授权提示框,让我们选择,此时,我们选择“允许”。

授权后,浏览器就打开了我们的摄像头,此时,我们会看到本地的视频预览画面,如下图所示:

当然,我们也可以在调用getUserMedia方法的时候,设置“audio=true”请求打开我们本地的麦克风。

2. 增加播控按钮

打开摄像头后,我们可以预览自己的本地视频,但是我们如何操作自己的摄像头和扬声器?如果我们想要控制自己的摄像头和扬声器,就需要设置一下 video 标签的另外一个属性设置:controls参数。具体使用情况可以参考如下代码:

<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>

设置好后,我们再次启动播放器,我们就会发现视频预览画面多

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

WebRTC工作原理精讲 文章被收录于专栏

WebRTC 作为当下最热门的实时音视频通讯框架,涉及非常多的过程,比如采集、编码、组包、发包、传输、收包、丢包重传、解封装、解码、音视频同步、渲染等,同时还包括很多功能特性,比如ANS、AGC、AEC,REMB、GCC、CNG、FEC、PLI、SVC等,需要一点点深入理解其中的奥秘。

全部评论

相关推荐

避坑恶心到我了大家好,今天我想跟大家聊聊我在成都千子成智能科技有限公司(以下简称千子成)的求职经历,希望能给大家一些参考。千子成的母公司是“同创主悦”,主要经营各种产品,比如菜刀、POS机、电话卡等等。听起来是不是有点像地推销售公司?没错,就是那种类型的公司。我当时刚毕业,急需一份临时工作,所以在BOSS上看到了千子成的招聘信息。他们承诺无责底薪5000元,还包住宿,这吸引了我。面试的时候,HR也说了同样的话,感觉挺靠谱的。于是,我满怀期待地等待结果。结果出来后,我通过了面试,第二天就收到了试岗通知。试岗的内容就是地推销售,公司划定一个区域,然后你就得见人就问,问店铺、问路人,一直问到他们有意向为止。如果他们有兴趣,你就得摇同事帮忙推动,促进成交。说说一天的工作安排吧。工作时间是从早上8:30到晚上18:30。早上7点有人叫你起床,收拾后去公司,然后唱歌跳舞(销售公司都这样),7:55早课(类似宣誓),8:05同事间联系销售话术,8:15分享销售技巧,8:30经理训话。9:20左右从公司下市场,公交、地铁、自行车自费。到了市场大概10点左右,开始地推工作。中午吃饭时间大约是12:00,公司附近的路边盖饭面馆店自费AA,吃饭时间大约40分钟左右。吃完饭后继续地推工作,没有所谓的固定中午午休时间。下午6点下班后返回公司,不能直接下班,需要与同事交流话术,经理讲话洗脑。正常情况下9点下班。整个上班的一天中,早上到公司就是站着的,到晚上下班前都是站着。每天步数2万步以上。公司员工没有自己的工位,百来号人挤在一个20平方米的空间里听经理洗脑。白天就在市场上奔波,公司的投入成本几乎只有租金和工资,没有中央空调。早上2小时,晚上加班2小时,纯蒸桑拿。没有任何福利,节假日也没有3倍工资之类的。偶尔会有冲的酸梅汤和西瓜什么的。公司的晋升路径也很有意思:新人—组长—领队—主管—副经理—经理。要求是业绩和团队人数,类似传销模式,把人留下来。新人不能加微信、不能吐槽公司、不能有负面情绪、不能谈恋爱、不能说累。在公司没有任何坐的地方,不能依墙而坐。早上吃早饭在公司外面的安全通道,未到上班时间还会让你吃快些不能磨蹭。总之就是想榨干你。复试的时候,带你的师傅会给你营造一个钱多事少离家近的工作氛围,吹嘘工资有多高、还能吹自己毕业于好大学。然后让你早点来公司、无偿加班、抓住你可能不会走的心思进一步压榨你。总之,大家在找工作的时候一定要擦亮眼睛,避免踩坑!———来自网友
qq乃乃好喝到咩噗茶:不要做没有专业门槛的工作
点赞 评论 收藏
分享
评论
点赞
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务