时间:2021-05-08
最近在做一个直播功能,查阅了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视频调用内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
示例简单,运行地址为:http://chendd.cn/demo/html/canvas/elsfk.html,得需要支持html5浏览器的环境。实现的功能:方
使用Html5的时候,在Canvas上绘制的东西是不能相应鼠标事件的,但是使用jTopo添加事件非常简单,效果如下:代码示例:复制代码代码如下:varnode=
示例使用HTML5的canvas标签和Javascript脚本,简单的编写了装载图片效果,请使用支持HTML5的浏览器预览效果:下图为以逐渐横向栅格的效果图ht
HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通过大量的JS代码来实现;HTML5中引入了直
复制代码代码如下:HTML5示例#container{border:1pxsolid#ccc;width:800px;height:600px;position