html5 webrtc语音,Html5 webRTC简单实现视频调用的示例代码

最近在做一个直播功能,查阅了webRTC相关资料,下面是简单实现的栗子哟(基于vue.js)!

子组件

export default {

name: "LiveDetails",

data() {

return {};

},

mounted() {

let video = document.querySelector("#rtc");

// 参数表示需要同时获取到音频和视频

// 获取到优化后的媒体流

// { audio: true, video: true }

const constraints = {

audio: { echoCancellation: { exact: false } },

video: true

};

navigator.mediaDevices

.getUserMedia(constraints)

.then(stream => {

console.log(stream) //此处打印请看下方

video.srcObject = stream;

video.onloadedmetadata = e => {

video.play();

};

})

.catch(err => {

console.log(err);

});

}

};

05c2f31c93b3b6e428e5f81e816af71f.png

亲测有效,会有回声,后端可以进行处理

到此这篇关于Html5 webRTC简单实现视频调用的示例代码的文章就介绍到这了,更多相关Html5 webRTC视频调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值