模板免费下载网站,ppt一键优化,列出寻找网站关键词的几种途径,国内网络推广平台一、播放rtsp协议流 如果 webrtc 流以 rtsp 协议返回#xff0c;流地址如#xff1a;rtsp://127.0.0.1:5115/session.mpg#xff0c;uniapp的 video 编译到android上直接就能播放#xff0c;但通常会有2-3秒的延迟。
二、播放webrtc协议流 如果 webrtc 流以 webrt…一、播放rtsp协议流 如果 webrtc 流以 rtsp 协议返回流地址如rtsp://127.0.0.1:5115/session.mpguniapp的 video 编译到android上直接就能播放但通常会有2-3秒的延迟。
二、播放webrtc协议流 如果 webrtc 流以 webrtc 协议返回流地址如webrtc://127.0.0.1:1988/live/livestream我们需要通过sdp协商、连接推流服务端、搭建音视频流通道来播放音视频流通常有500毫秒左右的延迟。
封装 WebrtcVideo 组件
templatevideo idrtc_media_player width100% height100% autoplay playsinline/video
/template!-- 因为我们使用到 js 库所以需要使用 uniapp 的 renderjs --
script modulewebrtcVideo langrenderjsimport $ from ./jquery-1.10.2.min.js;import {prepareUrl} from ./utils.js;export default {data() {return {//RTCPeerConnection 对象peerConnection: null,//需要播放的webrtc流地址playUrl: webrtc://127.0.0.1:1988/live/livestream}},methods: {createPeerConnection() {const that this//创建 WebRTC 通信通道that.peerConnection new RTCPeerConnection(null);//添加一个单向的音视频流收发器that.peerConnection.addTransceiver(audio, { direction: recvonly });that.peerConnection.addTransceiver(video, { direction: recvonly });//收到服务器码流将音视频流写入播放器that.peerConnection.ontrack (event) {const remoteVideo document.getElementById(rtc_media_player);if (remoteVideo.srcObject ! event.streams[0]) {remoteVideo.srcObject event.streams[0];}};},async makeCall() {const that thisconst url this.playUrlthis.createPeerConnection()//拼接服务端请求地址如http://192.168.0.1:1988/rtc/v1/play/const conf prepareUrl(url);//生成 offer sdpconst offer await this.peerConnection.createOffer();await this.peerConnection.setLocalDescription(offer);var session await new Promise(function (resolve, reject) {$.ajax({type: POST,url: conf.apiUrl,data: offer.sdp,contentType: text/plain,dataType: json,crossDomain: true,}).done(function (data) {//服务端返回 answer sdpif (data.code) {reject(data);return;}resolve(data);}).fail(function (reason) {reject(reason);});});//设置远端的描述信息协商sdp通过后搭建通道成功await this.peerConnection.setRemoteDescription(new RTCSessionDescription({ type: answer, sdp: session.sdp }));session.simulator conf.schema // conf.urlObject.server : conf.port /rtc/v1/nack/return session;}},mounted() {try {this.makeCall().then((res) {// webrtc 通道建立成功})} catch (error) {// webrtc 通道建立失败console.log(error)}}}
/scriptutils.js
const defaultPath /rtc/v1/play/;export const prepareUrl webrtcUrl {var urlObject parseUrl(webrtcUrl);var schema http:;var port urlObject.port || 1985;if (schema https:) {port urlObject.port || 443;}// see https://github.com/rtcdn/rtcdn-draftvar api urlObject.user_query.play || defaultPath;if (api.lastIndexOf(/) ! api.length - 1) {api /;}apiUrl schema // urlObject.server : port api;for (var key in urlObject.user_query) {if (key ! api key ! play) {apiUrl key urlObject.user_query[key];}}// Replace /rtc/v1/play/kv to /rtc/v1/play/?kvvar apiUrl apiUrl.replace(api , api ?);var streamUrl urlObject.url;return {apiUrl: apiUrl,streamUrl: streamUrl,schema: schema,urlObject: urlObject,port: port,tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).substr(0, 7)};
};
export const parseUrl url {// see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascrivar a document.createElement(a);a.href url.replace(rtmp://, http://).replace(webrtc://, http://).replace(rtc://, http://);var vhost a.hostname;var app a.pathname.substr(1, a.pathname.lastIndexOf(/) - 1);var stream a.pathname.substr(a.pathname.lastIndexOf(/) 1);// parse the vhost in the params of app, that srs supports.app app.replace(...vhost..., ?vhost);if (app.indexOf(?) 0) {var params app.substr(app.indexOf(?));app app.substr(0, app.indexOf(?));if (params.indexOf(vhost) 0) {vhost params.substr(params.indexOf(vhost) vhost.length);if (vhost.indexOf() 0) {vhost vhost.substr(0, vhost.indexOf());}}}// when vhost equals to server, and server is ip,// the vhost is __defaultVhost__if (a.hostname vhost) {var re /^(\d)\.(\d)\.(\d)\.(\d)$/;if (re.test(a.hostname)) {vhost __defaultVhost__;}}// parse the schemavar schema rtmp;if (url.indexOf(://) 0) {schema url.substr(0, url.indexOf(://));}var port a.port;if (!port) {if (schema http) {port 80;} else if (schema https) {port 443;} else if (schema rtmp) {port 1935;}}var ret {url: url,schema: schema,server: a.hostname,port: port,vhost: vhost,app: app,stream: stream};fill_query(a.search, ret);// For webrtc API, we use 443 if page is https, or schema specified it.if (!ret.port) {if (schema webrtc || schema rtc) {if (ret.user_query.schema https) {ret.port 443;} else if (window.location.href.indexOf(https://) 0) {ret.port 443;} else {// For WebRTC, SRS use 1985 as default API port.ret.port 1985;}}}return ret;
};
export const fill_query (query_string, obj) {// pure user query object.obj.user_query {};if (query_string.length 0) {return;}// split again for angularjs.if (query_string.indexOf(?) 0) {query_string query_string.split(?)[1];}var queries query_string.split();for (var i 0; i queries.length; i) {var elem queries[i];var query elem.split();obj[query[0]] query[1];obj.user_query[query[0]] query[1];}// alias domain for vhost.if (obj.domain) {obj.vhost obj.domain;}
};
页面中使用
templateVideoWebrtc /
/template
script setupimport VideoWebrtc from /components/videoWebrtc;
/script
需要注意的事项 1.spd 协商的重要标识之一为媒体描述 mxxx type code示例行如下 一个完整的媒体描述从第一个mxxx type code开始到下一个mxxx type code结束以video为例媒体描述包含了当前设备允许播放的视频流编码格式常见如VP8/VP9/H264 等 对照 mvideo 后边的编码发现其包含所有 artpmap 后的编码artpmap 编码后的字符串代表视频流格式但视频编码与视频流格式却不是固定的匹配关系也就是说在设备A中可能存在 artpmap:106 H264/90000 表示h264在设备B中artpmap:100 H264/90000 表示h264。
因此如果要鉴别设备允许播放的视频流格式我们需要观察 artpmap code 后的字符串。
协商通过的部分标准为
offer sdp 的 mxxx 数量需要与 answer sdp 的 mxxx 数量保持一致offer sdp 的 mxxx 顺序需要与 answer sdp 的 mxxx 顺序保持一致如两者都需要将 maudio 放在第一位mvideo放在第二位或者反过来answer sdp 返回的 maudio 后的 code需要被包含在 offer sdp 的 maudio 后的code中 offer sdp 的 mxxx 由 addTransceiver 创建首个参数为 audio 时生成 maudio首个参数为video时生成 mvideo 创建顺序对应 mxxx 顺序 recvonly }); that.peerConnection.addTransceiver(video, {
direction: recvonly }); 在 sdp 中存在一项 amid:xxx xxx在浏览器中可能为 audio、video 在 android 设备上为 0、1服务端需注意与 offer sdp 匹配。关于音视频流收发器上面使用的api是 addTransceiver 但在部分android设备上会提示没有这个api我们可以替换为 getUserMedia addTrack
data() {return {......localStream: null,......}
},
methods: {createPeerConnection() {const that this//创建 WebRTC 通信通道that.peerConnection new RTCPeerConnection(null);that.localStream.getTracks().forEach((track) {that.peerConnection.addTrack(track, that.localStream);});//收到服务器码流将音视频流写入播放器that.peerConnection.ontrack (event) {......};} async makeCall() {const that thisthat.localStream await navigator.mediaDevices.getUserMedia({video: true,audio: true,});const url this.playUrl............}
}需要注意的是navigator.mediaDevices.getUserMedia 获取的是设备摄像头、录音的媒体流所以设备首先要具备摄像、录音功能并开启对应权限否则 api 将调用失败。 三、音视频实时通讯 这种 p2p 场景的流播放通常需要使用 websocket 建立服务器连接然后同时播放本地、服务端的流。
templatedivLocal Video/divvideo idlocalVideo autoplay playsinline/videodivRemote Video/divvideo idremoteVideo autoplay playsinline/video
/template
script modulewebrtcVideo langrenderjsimport $ from ./jquery-1.10.2.min.js;export default {data() {return {signalingServerUrl: ws://127.0.0.1:8085,iceServersUrl: stun:stun.l.google.com:19302,localStream: null,peerConnection: null}},methods: {async startLocalStream(){try {this.localStream await navigator.mediaDevices.getUserMedia({video: true,audio: true,});document.getElementById(localVideo).srcObject this.localStream;}catch (err) {console.error(Error accessing media devices., err);}},createPeerConnection() {const configuration { iceServers: [{ urls: this.iceServersUrl }]};this.peerConnection new RTCPeerConnection(configuration);this.localStream.getTracks().forEach((track) {this.peerConnection.addTrack(track, this.localStream);});this.peerConnection.onicecandidate (event) {if (event.candidate) {ws.send(JSON.stringify({type: candidate,candidate: event.candidate,}));}};this.peerConnection.ontrack (event) {const remoteVideo document.getElementById(remoteVideo);if (remoteVideo.srcObject ! event.streams[0]) {remoteVideo.srcObject event.streams[0];}};}async makeCall() {this.createPeerConnection();const offer await this.peerConnection.createOffer();await this.peerConnection.setLocalDescription(offer);ws.send(JSON.stringify(offer));}},mounted() {this.makeCall()const ws new WebSocket(this.signalingServerUrl);ws.onopen () {console.log(Connected to the signaling server);this.startLocalStream();};ws.onmessage async (message) {const data JSON.parse(message.data);if (data.type offer) {if (!this.peerConnection) createPeerConnection();await this.peerConnection.setRemoteDescription(new RTCSessionDescription(data));const answer await this.peerConnection.createAnswer();await this.peerConnection.setLocalDescription(answer);ws.send(JSON.stringify(this.peerConnection.localDescription));} else if (data.type answer) {if (!this.peerConnection) createPeerConnection();await this.peerConnection.setRemoteDescription(new RTCSessionDescription(data));} else if (data.type candidate) {if (this.peerConnection) {try {await this.peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));} catch (e) {console.error(Error adding received ICE candidate, e);}}}}}}
/script与播放webrtc协议流相比p2p 以 WebSocket 替代 ajax 实现 sdp 的发送与接收增加了本地流的播放功能其他与播放协议流的代码一致。
