微信公众号视频录制开发 踩坑汇总

本文探讨了在微信公众号环境下使用react进行视频录制的两种主要方案:MediaStreamRecorder和react-video-recorder。在http协议下,navigator.mediaDevices在服务器上不可用,而切换到https可以解决该问题。MediaStreamRecorder虽然功能齐全,但在ios上存在播放问题。react-video-recorder在ios上能够唤醒摄像头录制,但录制的视频在ios上无法播放。综上,推荐在https环境下使用react-video-recorder作为视频录制解决方案。

背景

微信公众号(PC)实现视频录制,技术栈 react。

1. http or https

视频录制如果是基于navigator.mediaDevices 这种方式,http协议下只能通过localhost 本地调试获取相关api,部署服务器上后会navigator不再具备mediaDevices的能力(PC同理)。解决方案:换https。

2. recorder lib compare

MediaStreamRecorder 去开发视频录制,ui较丑,且录制完成后 ios 回调有问题,无法拿到数据。个人尝试将 录制的stream buffer 拼接 获取的数据依旧无法播放。

react-video-recorder ios 在https的协议下无法录制。但可以放在http 协议下 运行。原因是此库 做了降级处理,不支持navigator 后会调用 这种方式,在微信公众号中,可以唤醒手机摄像头,达到录制视频的功能,缺点是ios 无法播放回调的blob资源。(降级处理:可以将资源上传至远端在播放,录制的视频不太大的情况下)。
在这里插入图片描述

综合比较,推荐react-video-recorder

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值