上海网站制作衫,商标注册官网查询,谷德设计网官网,wordpress 多页面跳转文章目录 webrtcP2P通话流程webrtc多对多 mesh方案webrtc多对多 mcu方案webrtc多对多 sfu方案webrtc案例测试getUserMediagetUserMedia基础示例-打开摄像头getUserMedia canvas - 截图 打开共享屏幕 webrtcP2P通话流程
在这里#xff0c;stun服务器包括stun服务和turn转发服… 文章目录 webrtcP2P通话流程webrtc多对多 mesh方案webrtc多对多 mcu方案webrtc多对多 sfu方案webrtc案例测试getUserMediagetUserMedia基础示例-打开摄像头getUserMedia canvas - 截图 打开共享屏幕 webrtcP2P通话流程
在这里stun服务器包括stun服务和turn转发服务。信令服服务还包括im等功能
webrtc多对多 mesh方案
适合人数较少的场景 webrtc多对多 mcu方案
multipoint control point将上行的视频/音频合成然后分发。对客户端来说压力不大但对服务器消耗较大但节省带宽。适合开会人多会议场景。
webrtc多对多 sfu方案
selective forwarding unit对服务器压力小不需要太高配置但对带宽要求较高流量消耗大。 在sfu中它们的通信过程如下 再单独看下客户端与sfu的通信过程并且在sfu内部的流媒体转发过程
webrtc案例测试
samples代码 https://github.com/webrtc/samples?tabreadme-ov-file
案例页面地址
要注意的一点是如果不是本机地址那就需要https否则获取媒体的方法会调用不了
里面有不少示例需要花时间看看
!DOCTYPE html
!--* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.** Use of this source code is governed by a BSD-style license* that can be found in the LICENSE file in the root of the source* tree.
--
html
headmeta charsetutf-8meta namedescription contentWebRTC Javascript code samplesmeta nameviewport contentwidthdevice-width, user-scalableyes, initial-scale1, maximum-scale1meta itempropdescription contentClient-side WebRTC code samplesmeta itempropimage contentsrc/images/webrtc-icon-192x192.pngmeta itempropname contentWebRTC code samplesmeta namemobile-web-app-capable contentyesmeta idtheme-color nametheme-color content#ffffffbase target_blanktitleWebRTC samples/titlelink relicon sizes192x192 hrefsrc/images/webrtc-icon-192x192.pnglink hrefhttps://fonts.googleapis.com/css?familyRoboto:300,400,500,700 relstylesheet typetext/csslink relstylesheet hrefsrc/css/main.css/styleh2 {font-size: 1.5em;font-weight: 500;}h3 {border-top: none;}section {border-bottom: 1px solid #eee;margin: 0 0 1.5em 0;padding: 0 0 1.5em 0;}section:last-child {border-bottom: none;margin: 0;padding: 0;}/style
/headbody
div idcontainerh1WebRTC samples/h1sectionpThis is a collection of small samples demonstrating various parts of the ahrefhttps://developer.mozilla.org/en-US/docs/Web/API/WebRTC_APIWebRTC APIs/a. The code for allsamples are available in the a hrefhttps://github.com/webrtc/samplesGitHub repository/a./ppMost of the samples use a hrefhttps://github.com/webrtc/adapteradapter.js/a, a shim to insulate appsfrom spec changes and prefix differences./ppa hrefhttps://webrtc.org/getting-started/testing titleCommand-line flags for WebRTC testinghttps://webrtc.org/getting-started/testing/alists command line flags useful for development and testing with Chrome./ppPatches and issues welcome! See a hrefhttps://github.com/webrtc/samples/blob/gh-pages/CONTRIBUTING.mdCONTRIBUTING.md/afor instructions./pp classwarningstrongWarning:/strong It is highly recommended to use headphones when testing thesesamples, as it will otherwise risk loud audio feedback on your system./p/sectionsectionh2 idgetusermediaa hrefhttps://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediagetUserMedia():/a/h2p classdescriptionAccess media devices/pullia hrefsrc/content/getusermedia/gum/Basic getUserMedia demo/a/lilia hrefsrc/content/getusermedia/canvas/Use getUserMedia with canvas/a/lilia hrefsrc/content/getusermedia/filter/Use getUserMedia with canvas and CSS filters/a/lilia hrefsrc/content/getusermedia/resolution/Choose camera resolution/a/lilia hrefsrc/content/getusermedia/audio/Audio-only getUserMedia() output to local audio element/a/lilia hrefsrc/content/getusermedia/volume/Audio-only getUserMedia() displaying volume/a/lilia hrefsrc/content/getusermedia/record/Record stream/a/lilia hrefsrc/content/getusermedia/getdisplaymedia/Screensharing with getDisplayMedia/a/lilia hrefsrc/content/getusermedia/pan-tilt-zoom/Control camera pan, tilt, and zoom/a/lilia hrefsrc/content/getusermedia/exposure/Control exposure/a/li/ulh2 iddevicesDevices:/h2p classdescriptionQuery media devices/pullia hrefsrc/content/devices/input-output/Choose camera, microphone and speaker/a/lilia hrefsrc/content/devices/multi/Choose media source and audio output/a/li/ulh2 idcaptureStream capture:/h2p classdescriptionStream from canvas or video elements/pullia hrefsrc/content/capture/video-video/Stream from a video element to a video element/a/lilia hrefsrc/content/capture/video-pc/Stream from a video element to a peer connection/a/lilia hrefsrc/content/capture/canvas-video/Stream from a canvas element to a video element/a/lilia hrefsrc/content/capture/canvas-pc/Stream from a canvas element to a peer connection/a/lilia hrefsrc/content/capture/canvas-record/Record a stream from a canvas element/a/lilia hrefsrc/content/capture/video-contenthint/Guiding video encoding with content hints/a/li/ulh2 idpeerconnectiona hrefhttps://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnectionRTCPeerConnection:/a/h2p classdescriptionControlling peer connectivity/pullia hrefsrc/content/peerconnection/pc1/Basic peer connection demo in a single tab/a/lilia hrefsrc/content/peerconnection/channel/Basic peer connection demo between two tabs/a/lilia hrefsrc/content/peerconnection/perfect-negotiation/Peer connection using Perfect Negotiation/a/lilia hrefsrc/content/peerconnection/audio/Audio-only peer connection demo/a/lilia hrefsrc/content/peerconnection/bandwidth/Change bandwidth on the fly/a/lilia hrefsrc/content/peerconnection/change-codecs/Change codecs before the call/a/lilia hrefsrc/content/peerconnection/upgrade/Upgrade a call and turn video on/a/lilia hrefsrc/content/peerconnection/multiple/Multiple peer connections at once/a/lilia hrefsrc/content/peerconnection/multiple-relay/Forward the output of one PC into another/a/lilia hrefsrc/content/peerconnection/munge-sdp/Munge SDP parameters/a/lilia hrefsrc/content/peerconnection/pr-answer/Use pranswer when setting up a peer connection/a/lilia hrefsrc/content/peerconnection/constraints/Constraints and stats/a/lilia hrefsrc/content/peerconnection/old-new-stats/More constraints and stats/a/lilia hrefsrc/content/peerconnection/per-frame-callback/RTCPeerConnection and requestVideoFrameCallback()/a/lilia hrefsrc/content/peerconnection/create-offer/Display createOffer output for various scenarios/a/lilia hrefsrc/content/peerconnection/dtmf/Use RTCDTMFSender/a/lilia hrefsrc/content/peerconnection/states/Display peer connection states/a/lilia hrefsrc/content/peerconnection/trickle-ice/ICE candidate gathering from STUN/TURN servers/a/lilia hrefsrc/content/peerconnection/restart-ice/Do an ICE restart/a/lilia hrefsrc/content/peerconnection/webaudio-input/Web Audio output as input to peer connection/a/lilia hrefsrc/content/peerconnection/webaudio-output/Peer connection as input to Web Audio/a/lilia hrefsrc/content/peerconnection/negotiate-timing/Measure how long renegotiation takes/a/lilia hrefsrc/content/extensions/svc/Choose scalablilityMode before call - Scalable Video Coding (SVC) Extension /a/li/ulh2 iddatachannelahrefhttps://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannelRTCDataChannel:/a/h2p classdescriptionSend arbitrary data over peer connections/pullia hrefsrc/content/datachannel/basic/Transmit text/a/lilia hrefsrc/content/datachannel/filetransfer/Transfer a file/a/lilia hrefsrc/content/datachannel/datatransfer/Transfer data/a/lilia hrefsrc/content/datachannel/channel/Basic datachannel demo between two tabs/a/lilia hrefsrc/content/datachannel/messaging/Messaging/a/li/ulh2 idvideoChatVideo chat:/h2p classdescriptionFull featured WebRTC application/pullia hrefhttps://github.com/webrtc/apprtc/AppRTC video chat client/a that you can run out of a Docker image/li/ulh2 idcaptureInsertable Streams:/h2p classdescriptionAPI for processing media/pullia hrefsrc/content/insertable-streams/endtoend-encryptionEnd to end encryption using WebRTC Insertable Streams/a/li (Experimental)lia hrefsrc/content/insertable-streams/video-analyzerVideo analyzer using WebRTC Insertable Streams/a/li (Experimental)lia hrefsrc/content/insertable-streams/video-processingVideo processing using MediaStream Insertable Streams/a/li (Experimental)lia hrefsrc/content/insertable-streams/audio-processingAudio processing using MediaStream Insertable Streams/a/li (Experimental)lia hrefsrc/content/insertable-streams/video-cropVideo cropping using MediaStream Insertable Streams in a Worker/a/li (Experimental)lia hrefsrc/content/insertable-streams/webgpuIntegrations with WebGPU for custom video rendering:/a/li (Experimental)/ul /section/divscript srcsrc/js/lib/ga.js/script/body
/html
getUserMedia
getUserMedia基础示例-打开摄像头
templatevideo refvideoRef autoplay playsinline/videobutton clickopenCamera打开摄像头/buttonbutton clickcloseCamera关闭摄像头/button
/templatescript langts setup namegumimport { ref } from vue;const videoRef ref()let stream null // 打开摄像头
const openCamera async function () {stream await navigator.mediaDevices.getUserMedia({audio: false,video: true});const videoTracks stream.getVideoTracks();console.log(Using video device: ${videoTracks[0].label});videoRef.value.srcObject stream}// 关闭摄像头
const closeCamera function() {const videoTracks stream.getVideoTracks();stream.getTracks().forEach(function(track) {track.stop();});
}/scriptgetUserMedia canvas - 截图
templatevideo refvideoRef autoplay playsinline/videobutton clickshootScreen截图/buttonbutton clickcloseCamera关闭摄像头/buttoncanvas refcanvasRef/canvas
/templatescript langts setup namegumimport { ref, onMounted } from vue;const videoRef ref()
const canvasRef ref()
let stream nullonMounted(() {canvasRef.value.width 480;canvasRef.value.height 360;// 打开摄像头const openCamera async function () {stream await navigator.mediaDevices.getUserMedia({audio: false,video: true});const videoTracks stream.getVideoTracks();console.log(Using video device: ${videoTracks[0].label});videoRef.value.srcObject stream}openCamera()})// 截图
const shootScreen function () {canvasRef.value.width videoRef.value.videoWidth;canvasRef.value.height videoRef.value.videoHeight;canvasRef.value.getContext(2d).drawImage(videoRef.value, 0, 0, canvasRef.value.width, canvasRef.value.height);
}// 关闭摄像头
const closeCamera function() {const videoTracks stream.getVideoTracks();stream.getTracks().forEach(function(track) {track.stop();});
}
/script打开共享屏幕
templatevideo refmyVideoRef autoPlay playsinline width50%/videobutton clickopenCarmera打开共享屏幕/button
/templatescript langts setup nameAppimport {ref} from vueconst myVideoRef ref()// 打开共享屏幕的代码const openScreen async (){const constraints {video: true}try{const stream await navigator.mediaDevices.getDisplayMedia(constraints);const videoTracks stream.getTracks();console.log(使用的设备是: videoTracks[0].label)myVideoRef.value.srcObject stream}catch(error) {}}/script
