webrtc 視頻 demo
webrtc網上封裝的很多，demo很多都是一個頁面里實現的，今天實現了個完整的 ， A 發視頻給 B
A webrtc.html作為offer?
<!DOCTYPE html>
<html id="home" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scal
able=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style>p { padding: 1em; }li {border-bottom: 1px solid rgb(189, 189, 189);border-left: 1px solid rgb(189, 189, 189);padding: .5em;}</style></head><body><script>var mediaConstraints = {optional: [],mandatory: {OfferToReceiveAudio: false,OfferToReceiveVideo: true}};</script><script>var offerer,answererWinwindow.RTCPeerConnection = window.mozRTCPeerConnection || window.webkit
RTCPeerConnection;window.RTCSessionDescription = window.mozRTCSessionDescription || windo
w.RTCSessionDescription;window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCand
idate;navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitG
etUserMedia;window.URL = window.webkitURL || window.URL;window.iceServers = {iceServers: [{url: 'stun:23.21.150.121'}]};</script><script>/* offerer */function offererPeer(video_stream) {offerer = new RTCPeerConnection(window.iceServers)offerer.addStream(video_stream)offerer.onaddstream = function (event) {// 本地顯示video}offerer.onicecandidate = function (event) {if (!event || !event.candidate) returnsendToP2({'action' : 'candidate','candidate' :event.candidate})}offerer.createOffer(function (offer) {offerer.setLocalDescription(offer)sendToP2({'action' : 'create','offer':offer})}, function() {}, mediaConstraints)}</script><script>var video_constraints = {mandatory: {},optional: []}function getUserMedia(callback) {var n = navigatorn.getMedia = n.webkitGetUserMedia || n.mozGetUserMedian.getMedia({audio: false,video: video_constraints}, callback, onerror)function onerror(e) {alert(JSON.stringify(e, null, '\t'))}}</script><script>function sendToP2(data){answererWin.postMessage(JSON.stringify(data) ,
window.location)}function receiveMessage(data){data = JSON.parse(data.data)switch ( data.action) {case 'answer' :offerer.setRemoteDescription(ne
w RTCSessionDescription(data.answer))breakcase "candidate":offerer.addIceCandidate(new RTC
IceCandidate(data.candidate))break}console.log('msg' ,data)}window.addEventListener("message", receiveMessage, fals
e)answererWin = window.open('webrtc2.html' ,'t')getUserMedia(function (video_stream) {offererPeer(video_stream)});</script></body></html> ?
B?webrtc2.html 作為answer
?
<!DOCTYPE html>
<html id="home" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css"><style>audio, video {-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;vertical-align: top;}p { padding: 1em; }li {border-bottom: 1px solid rgb(189, 189, 189);border-left: 1px solid rgb(189, 189, 189);padding: .5em;}.videos-container {display: inline-block;border: 2px solid black;padding: .1em;border-radius: 0.2em;margin: 2em .2em;background: white;vertical-align: top;}.videos-container h2 {border: 0;border-top: 1px solid black;margin: 0;text-align: center;display:block;}video {width:20em;height: 15em;background: black;}</style><!-- for HTML5 el styling --><script>document.createElement('article');</script></head><body><article><div style="text-align:center;"><div class="videos-container"><video id="peer1-to-peer2" autoplay controls></video><h2>Offerer-to-Answerer</h2></div></div><script>var mediaConstraints = {optional: [],mandatory: {OfferToReceiveAudio: true,OfferToReceiveVideo: true}};</script><script>var offerer, answerer;var offererToAnswerer = document.getElementById('peer1-to-peer2');window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;window.URL = window.webkitURL || window.URL;window.iceServers = {iceServers: [{url: 'stun:23.21.150.121'}]};</script><script>/* answerer */function answererPeer(offer, video_stream) {answerer = new RTCPeerConnection(window.iceServers);// answerer.addStream(video_stream);answerer.onaddstream = function (event) {offererToAnswerer.src = URL.createObjectURL(event.stream);offererToAnswerer.play();};answerer.onicecandidate = function (event) {if (!event || !event.candidate) return;sendToP1({'action' : 'candidate','candidate' :event.candidate})//offerer.addIceCandidate(event.candidate);};answerer.setRemoteDescription(new RTCSessionDescription(offer));answerer.createAnswer(function (answer) {answerer.setLocalDescription(answer);sendToP1({'action' : 'answer' ,'answer' : answer})//offerer.setRemoteDescription(answer);}, function() {}, mediaConstraints);}function receiveMessage(data){data = JSON.parse(data.data)console.log(data)switch(data.action){case "create":answererPeer(data.offer , data.stream)breakcase "candidate":answerer.addIceCandidate(new RTCIceCandidate(data.candidate))break}}window.addEventListener("message", receiveMessage, false)function sendToP1(data) {opener.postMessage(JSON.stringify(data) , window.location)}</script></article></body></html> ?
demo用 postMessage傳遞數據， 業務使用可以用websocket
A 先?createOffer ，生成的offer 供自己setLocalDescription ，并發給B
B 拿A的offer ，setRemoteDescription(offer) ,?然后?createAnswer ，生成的answer?供自己setLocalDescription ，并發給A
A 拿B的answer 設置?setRemoteDescription（answer)
?
?
A?onicecandidate 事件被觸發 將得到的通道發給B
B?addIceCandidate(new RTCIceCandidate(candidate)) 建立通道
B?onicecandidate 事件被觸發 將得到的通道發給A
A addIceCandidate(new RTCIceCandidate(candidate)) 建立通道
?
通道建立后視頻就可以共享了
?
參考網址
http://www.html5rocks.com/en/tutorials/webrtc/basics/?redirect_from_locale=fr
https://github.com/muaz-khan/WebRTC-Experiment/blob/master/demos/client-side.html
![條件注釋判斷瀏覽器版本!--[if lt IE 9]（轉載）](http://pic.xiahunao.cn/條件注釋判斷瀏覽器版本!--[if lt IE 9]（轉載）)
![[轉]阿里開源低代碼引擎LowCodeEngine](http://pic.xiahunao.cn/[轉]阿里開源低代碼引擎LowCodeEngine)
