博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实践:《从头到脚撸一个多人视频聊天 — 前端 WebRTC 实战(一)》
阅读量:7210 次
发布时间:2019-06-29

本文共 3020 字,大约阅读时间需要 10 分钟。

hot3.png

请先阅读原文,链接:,本文只涉及实践过程中的问题

1、video元素的srcObject属性

先看chrome时,没看到该属性,也显示没有这属性。但后测试Chrome ,Safari,  ff ,又发现都有该属性

d1f9bad6f0e783ea9a29d06cda91f2a9392.jpg  9178d931b5703674bb353d9ca729b9bb884.jpg

2、是否要启动本地服务器

谷歌,ff 不需要,Safari需要!

3、获取音、视频流信息及相应事件

除了文中提到的: getAudioTracks()、getVideoTracks()   ,还有stream.getTracks() 可以获取它们。  通过音、视频的Track,可以监听它们的设备名字,静音或结束时的事件。  注意的是,<video>元素只有play,seek,end,volumechange 等事件,没有mute事件的。   

19be9040b8a1fc5631e60034d396a270aa7.jpg

但是在我测试中,无法监听到Track的onmute事件,  而且muted属性一直是false.

4、本地 1 v 1 对等连接 的过程

整个过程看得不是太懂,由于源码我安装npm不成功,所以把代码摘出来。看一下它的执行流程:

 

A
B
let peerA,peerB;async function init() {    //1、 保存本地流到全局    this.localstream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });    let video = document.querySelector('#rtcA');    video.srcObject = this.localstream;        //2、 创建A,B输出端      let PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;    peerA = new PeerConnection();    peerA.addStream(this.localstream); // 添加本地流    console.log("1、        打开A 视频流,并放入peerA")    // 监听 A 的ICE候选信息    如果收集到,就添加给 B    peerA.onicecandidate = (event) => {        console.log('9、 10、    A  onicecandidate', event);        if (event.candidate) {            peerB.addIceCandidate(event.candidate);        }    };    peerB = new PeerConnection();    // 监听 B 的ICE候选信息   如果收集到,就添加给 A    peerB.onicecandidate = (event) => {        console.log('4、5、12、  B  onicecandidate', event);        if (event.candidate) {            peerA.addIceCandidate(event.candidate);        }    };    //3、 监听是否有媒体流接入,如果有就赋值给 rtcB 的 src    peerB.onaddstream = (event) => {        console.log('11、        event-stream', event);        let video = document.querySelector('#rtcB');        video.srcObject = event.stream;    };}document.getElementById("call").addEventListener("click", async function () {    //4、B发起呼叫    let offer = await peerB.createOffer( {        offerToReceiveAudio: 1,        offerToReceiveVideo: 1    }); // 创建 offer    console.log("2、       创建offer")    await peerB.setLocalDescription(offer); // 呼叫端设置本地 offer 描述    console.log("3、       B set offer后")    await peerA.setRemoteDescription(offer); // 接收端设置远程 offer 描述    console.log(" 6、       A set offer 后")    //A响应    let answer = await peerA.createAnswer(); // 接收端创建 answer    console.log("7、       创建answer")    await peerA.setLocalDescription(answer); // 接收端设置本地 answer 描述    console.log(" 8、       A set answer 后")    await peerB.setRemoteDescription(answer); // 呼叫端设置远程 answer 描述    console.log("13、       B set answer 后")});document.getElementById("hangup").addEventListener("click", function () {    //5、 断开    peerA.close();    peerB.close();    peerA = null;    peerB = null;    this.allowCall = false;    this.allowHangup = true    console.log("14、        断开")})    init();

通过打印消息出现的顺序,可以看到执行过程:

3c29976a8dc040bdeaf30321d325ac52472.jpg

 

 

 

 

 

转载于:https://my.oschina.net/u/1540190/blog/3025034

你可能感兴趣的文章
Java 内部类的阐述
查看>>
redis-大key寻找
查看>>
EF 数据查询(更改默认排序)
查看>>
求连续子数组的最大和
查看>>
SpringMVC最简单配置应用
查看>>
jQuery与Zepto的异同
查看>>
jsp注册页面的省份联动(网上copy别人的,然后自己弄了一下才知道怎么用)
查看>>
CRC检错技术原理
查看>>
读取Ini文件字段
查看>>
asp获取来源Url
查看>>
第一次实验
查看>>
Redis基础操作
查看>>
clob大数据转换为多行数据
查看>>
bootstrap的流式布局
查看>>
如何通过线程池异步调用
查看>>
Squid配置详解
查看>>
070104_微积分:随机变量及其分布(二项分布,均匀分布,正态分布)
查看>>
LeetCode – Refresh – Binary Tree Zigzag Level Order Traversal
查看>>
python操作三大主流数据库(13)python操作redis之新闻项目实战①新闻数据的导入
查看>>
2013夏,iDempiere来了 - v1.0c Installers (Devina LTS Release) 2013-06-27
查看>>