webRTC（四）：Webrtc音视频数据采集&录制&采集屏面数据

时间：2024-11-17 07:31:36
  • WebRTC音视频数据采集

var constraints={

video: true,

audio: true,

}

(constraints)

.then(gotMediaStream)

.then(gotDevices)

.catch(handleError)

function gotMediaStream(stream){

=stream;

}

音视频数据采集主要使用getUserMedia方法获取媒体数据，constraints配置采集轨道的参数，video,audio的true表示采集，false表示不采集，然后将数据流通过gotMediaStream方法添加到视频组建上。

  • WebRTC_API_适配

添加官方的adapter-latest支持即可

  • 获取音视频设备的访问权限

function gotMediaStream(stream){

=stream;

return ();

}

function gotDevices(deviceInfos){

(function(deviceinfo){

var option= (‘option’);

=;

=;

if(===‘audioinput’){

(option);

}else if(===‘audiooutput’){

(option);

}else if(===‘videoinput’){

(option);

}

})

}

在gotMediaStream方法返回return ()，这时gotDevices方法中就可以获取音视频设备

  • 视频约束

var constraints={

video: {

width:640,

height:480,

frameRate:30,

//environment:后置摄像头，user：前置摄像头

facingMode:“user”,

deviceId: {exact:deviceId ? deviceId:undefined}

},

视频约束所有的配置都在constraints中进行配置，更多详细可以查看官方api

  • 音频约束

var constraints={

video: {

width:640,

height:480,

frameRate:30,

//environment:后置摄像头，user：前置摄像头

facingMode:“user”,

deviceId: {exact:deviceId ? deviceId:undefined}

},

audio: {

//降噪

noiseSuppression:true,

//回音消除

echoCancellation:true

},

}

音频约束和视频约束一样，在constraints中进行配置，更多详细可以查看官方api

  • 视屏特效

None blur Grayscale Invert sepia

//特效

= function(){

=;

}

设置特效直接设置视频源video的className即可

  • 从视频中获取图片

Take snapshot

//从视频中获取图片

var snapshot =(“button#snapshot”);

var picture =(“canvas#picture”);

=480;

=640;

//从视频中获取图片

snapshot.οnclick=function(){

=

(‘2d’).drawImage(videoplay,

0,0,

,

);

}

从视频中获取图片主要使用的是canvas来绘制的

  • MediaStreamAPI及获取视频约束

//获取屏幕约束

var divConstraints = (‘div#constraints’)

function gotMediaStream(stream){

var videoTrack = ()[0];

var videoConstraints = ();

= (videoConstraints,null,2);

=stream;

return ();

}

结果

{ “aspectRatio”: 1.3333333333333333, “deviceId”: “97953df027728ab0acac98c670d59f654a1e7f36f9faf70f2e0fd7a479394fe3”,

“frameRate”: 29.969999313354492, “groupId”: “1b83734781c08e3c51519598002aa1d5acb1bcd73772f5d2db4b976586af3666”,

“height”: 480, “width”: 640, “videoKind”: “color” }

获取视频约束，在gotMediaStream方法中获取视频轨道，信息都在轨道中获取

  • 录制音频视屏

//视频录制

btnRecord.οnclick=()=>{

if(===‘Start Record’){

startRecord();

=‘Stop Record’

=true;

=true;

}else{

stopRecord();

=‘Start Record’

=false;

=false;

}

}

function gotMediaStream(stream){

…

=stream;

…

return ();

}

//开始录制

function startRecord(){

buffer=[];

var options={

mimeType: ‘video/webm;codecs=vp8’

}

if(!()){

console.error(‘${} is not supported’);

return;

}

try {

mediaRecorder= new (,options);

} catch (e) {

(‘failed to create MediaRecorder:’,e);

return;

}

= handleDataAvailable;

(10);

}

//停止录制

function stopRecord(){

();

}

  • 播放录制视频

btnPlay.οnclick=()=>{

var blob =new Blob(buffer,{type: ‘video/webm’});

=(blob);

=null;

=true;

();

}

  • 下载录制视频

btnDownload.οnclick=()=>{

var blob =new Blob(buffer,{type:‘video/webm’});

var url = (blob);

var a=(‘a’);

=url;

=‘none’;

=‘’;

();

}

  • 采集屏面数据

//getDisplayMedia 捕获桌面 ，getUserMedia 捕获摄像头数据

function start(){

//捕获桌面

if (!||

!) {

(“getUserMedia is not supported!”)

return;

} else {

//捕获桌面

var constraints1={

video: true,

audio: true,

}

//getDisplayMedia 捕获桌面 ，getUserMedia 捕获摄像头数据

(constraints1)

.then(gotMediaStream)

.then(gotDevices)

.catch(handleError)

}

}

采集屏幕数据其实和采集音视频信息一直，只是将getUserMedia替换成getDisplayMedia即可.

注意：要使用google浏览器打开Experimental Web Platform features

在这里插入图片描述

全部代码

  • html

WebRtc capture video and audio

None blur Grayscale Invert sepia

Start Record

Play

Download

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-HAuuK56V-1712235504232)]

[外链图片转存中…(img-sl9Kx2Oq-1712235504233)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-HaVW6ZWh-1712235504233)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

[外链图片转存中…(img-BtQ3kgfL-1712235504233)]

[外链图片转存中…(img-GPxaoJFg-1712235504234)]

相关文章