游戏网站开发视频网站制作常见问题 图片版权

游戏网站开发视频,网站制作常见问题 图片版权,logo设计 公司 免费,设计design这个设置的是canvas的画布尺寸canvas.width myVideo.videoWidth || 900; // 视频原生宽度canvas.height myVideo.videoHeight || 500; // 视频原生高度这个设置的是canvas html 元素在页面上显示的尺寸canvas.style.width 900px; // 保持显示尺寸canvas.style…这个设置的是canvas的画布尺寸canvas.width myVideo.videoWidth || 900; // 视频原生宽度canvas.height myVideo.videoHeight || 500; // 视频原生高度这个设置的是canvas html 元素在页面上显示的尺寸canvas.style.width 900px; // 保持显示尺寸canvas.style.height 500px; // 保持显示尺寸当canvas的画布尺寸像素尺寸过小的时候画面就会很模糊下面是使用canvas复制video画面的一个demohtml head meta charsetUTF-8 link relicon typeimage/png hrefwebrtc.png / script srcwebrtcconfig.js /script script srcwebrtcstreamer.js /script /head body !-- muted 静音播放 -- !-- iOS 需要 playsinline 和 muted 才能自动播放 -- !-- video autoplay muted playsinline/video -- video idmy-video stylewidth: 900px; height: 500px; muted /video canvas iddisplayCanvas stylewidth: 900px; height: 500px;/canvas /body script const myVideo document.getElementById(my-video); const canvas document.getElementById(displayCanvas); const ctx canvas.getContext(2d); window.onload function() { this.webRtcServer new WebRtcStreamer(my-video, webrtcConfig.url); this.webRtcServer.connect(a12-篮球场-东北角, , webrtcConfig.options); // setTimeout((){ // console.log( 分辨率诊断 ); // console.log(Video 视频尺寸:, myVideo.videoWidth, ×, myVideo.videoHeight); // console.log(Video 显示尺寸:, myVideo.clientWidth, ×, myVideo.clientHeight); // console.log(Canvas 像素尺寸:, canvas.width, ×, canvas.height); // console.log(Canvas 显示尺寸:, canvas.clientWidth, ×, canvas.clientHeight); // console.log(设备像素比:, window.devicePixelRatio); // console.log(); // }, 5000); // 开始绘制到画布 setTimeout((){ drawVideoToCanvas(); }, 5000); } window.onbeforeunload function() { this.webRtcServer.disconnect() } // 绘制视频到画布 function drawVideoToCanvas() { // console.log(myVideo.readyState); if (myVideo.readyState ! 4) { requestAnimationFrame(drawVideoToCanvas); return; } // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 将Canvas像素尺寸设置为与视频原生分辨率一致 canvas.width myVideo.videoWidth || 900; // 视频原生宽度 canvas.height myVideo.videoHeight || 500; // 视频原生高度 canvas.style.width 900px; // 保持显示尺寸 canvas.style.height 500px; // 保持显示尺寸 // 绘制视频到画布 ctx.drawImage(myVideo, 0, 0, canvas.width, canvas.height); // 添加边框效果 ctx.strokeStyle #4cc9f0; ctx.lineWidth 3; ctx.strokeRect(0, 0, canvas.width, canvas.height); // 继续绘制下一帧 requestAnimationFrame(drawVideoToCanvas); } /script /html