最近遇到同样的问题,ios微信端video播放getUserMedia的视频流直接白屏,也没报错,后来试了,只有第一次getUserMedia的stream不能播放,下一次就能播放了,代码如下: const sleep = (time = 0) => new Promise((res) => { setTimeout(res, time); }); const checkIsWechat = (() => { const agentInfo = navigator.userAgent.toLowerCase(); const isWechatEnv = ['micromessenger', 'wechat', 'weixin'].some((sign) => agentInfo.includes(sign)); return () => isWechatEnv; })(); const cameraVideoInit = async (video) => { // 以后置摄像头为例 const options = { audio: false, video: { facingMode: 'environment' } }; if (checkIsWechat()) { const tapStream = await navigator.mediaDevices.getUserMedia(options); const tapVideoTracks = tapStream.getVideoTracks()?.[0] ?? null; // 第一次不延迟关闭摄像头还是没办法播放视频 await sleep(1000); tapVideoTracks?.stop?.(); // 保险起见再延迟100ms await sleep(100); } try { const stream = await navigator.mediaDevices.getUserMedia(options); if (this._hasStop) return; video.srcObject = stream; document.body.append(video); const loadedHandler = (evt) => { if (evt) { video.onloadeddata = null; } // video.play()在部分机型上会报错:play()can only be initiated by a user gesture // 此处将play放在点击事件中,报错了就向外抛出事件,外部实际的交互去触发play video.click(); video.play(); }; video.onloadeddata = loadedHandler; video.onclick = () => { video.play().catch(() => { window.dispatchEvent('manual-play', new CustomEvent({ detail: { callback: () => video.play() } })); }); }; // ios的微信浏览器必须先手动触发一次play,loadeddata事件才能执行 if (checkIsWechat()) { sleep(3000).then(() => { if (video.onloadeddata) { loadedHandler(); } }); } window.dispatchEvent(new CustomEvent('camera-init')); } catch (err) { window.dispatchEvent(new CustomEvent('camera-error', { detail: err })); } }; export default cameraVideoInit;
h5 getUserMedia 获取视频流 ios无法获取?在开发时需要用到getUserMedia获取视频流的功能,安卓能打开,ios用自带的浏览器也可以打开,但是用微信打开链接不行,想问下官方,是不是ios不支持getUserMedia获取视频流呢?
2021-12-14