最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Html5 webRTC简单实现视频调用的示例代码
时间:2025-07-13 16:00:01 编辑:袖梨 来源:一聚教程网
最近在做一个直播功能,查阅了webRTC相关资料,下面是简单实现的栗子哟(基于vue.js)!
子组件
<template> <video id="rtc"></video></template><script>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); }); }};</script>
亲测有效,会有回声,后端可以进行处理
到此这篇关于Html5 webRTC简单实现视频调用的示例代码的文章就介绍到这了,更多相关Html5 webRTC视频调用内容请搜索一聚教程网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持一聚教程网!
相关文章
- Dreamweaver图片的亮度和对比度怎么设置? 07-13
- 对爱的人说的话95句 07-13
- 绝区零仪玄偶遇事件怎么过-仪玄偶遇事件攻略 07-13
- PS磨皮教程 欧美人像超质感磨皮教程 07-13
- Dreamweaver2018怎么快速插入文本框? 07-13
- 魔兽世界净化水体怎么做-净化水体任务攻略 07-13