- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个记录或上传视频的代码。该应用程序是使用 create-react-app 构建的,并且是一个 PWA。
我已经使用了 facesMode 约束,但它仍然无法在手机(Samung fold 2)上切换相机,即使在摩托罗拉手机中也没有相同的影响。
这是代码:
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import config from '../../config';
const MediaRecorderCapture = props => {
const [mediaRecorder, setMediaRecorder] = useState({});
const [isRecording, setIsRecording] = useState(false);
const [showRear, setShowRear] = useState(false);
const recorderRef = useRef();
const playerRef = useRef();
/**
* Initialize the MediaRecorder on component mount
*/
useEffect(() => {
console.log("reinitializing..")
initializeMediaRecorder();
}, [showRear])
/**
* Upon MedaRecorder being set, monitor the following events
*/
useEffect(() => {
let chunks = [];
mediaRecorder.ondataavailable = e => chunks.push(e.data)
mediaRecorder.onstop = e => {
let blob = new Blob(chunks, { type: 'video/mp4' });
chunks = [];
let url = (window.URL || window.webkitURL).createObjectURL(blob);
handleVideoRecorder(blob);
// uploadVideo(blob);
// setPlaybackPreview(url);
// createDownloadLink(url);
}
mediaRecorder.onerror = e => {
console.log('Error recording stream');
console.log(e.error);
}
console.log('MediaRecorder ready');
}, [mediaRecorder]);
// const createDownloadLink = url => {
// const link = <a href={url} download="Recording.mp4">Download</a>;
// const linkContainer = document.getElementById('download-link');
// ReactDOM.render(link, linkContainer);
// }
/**
* Helper function to console out change in state of the MediaRecorder
*/
useEffect(() => {
console.log(`MediaRecorder state: ${mediaRecorder.state}`)
}, [mediaRecorder.state])
/**
* Start recording the stream
*/
const start = async () => {
if (mediaRecorder.state === 'recording') return;
mediaRecorder.start();
setIsRecording(true);
}
/**
* Stop recording the stream
*/
const stop = async () => {
if (mediaRecorder.state === 'inactive') return;
mediaRecorder.stop();
setIsRecording(false);
await initializeMediaRecorder();
}
/**
* Set the playback player's source to the url of the newly recorderd stream
* @param {string} url
*/
const setPlaybackPreview = url => {
if (!playerRef.current) return;
console.log(`Playback URL: ${url}`);
playerRef.current.src = url;
}
/**
* Get a media device stream (webcam)
*/
const getStream = () => {
return new Promise(async (resolve, reject) => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: {
facingMode: showRear ? 'environment' : 'user'
}
});
console.log('Stream fetched and rear camera? ', showRear);
resolve(stream);
}
catch (err) {
console.log('Error in fetching stream')
reject(err);
}
})
}
/**
* Set the live stream retrieved from the media device
* to the designated player to preview
* @param {object} stream
*/
const setRecordingStreamPreview = stream => {
if (!recorderRef.current) return;
recorderRef.current.srcObject = stream;
console.log("recordref ", recorderRef.current.srcObject)
}
/**
* Create MediaRecorder object from a given stream
* @param {object} stream
*/
const createMediaRecorder = stream => {
return new Promise((resolve, reject) => {
try {
const mediaRecorder = new MediaRecorder(stream);
console.log('New MediaRecorder created');
resolve(mediaRecorder);
}
catch (err) {
console.log('Error in creating new MediaRecorder');
reject(err);
}
})
}
/**
* Initialize MediaRecorder
*/
const initializeMediaRecorder = async () => {
return new Promise(async (resolve, reject) => {
try {
const stream = await getStream();
console.log(stream);
setRecordingStreamPreview(stream);
const mediaRecorder = await createMediaRecorder(stream);
setMediaRecorder(mediaRecorder);
resolve(mediaRecorder);
}
catch (err) {
console.log('Error in initializing MediaRecorder of fetching media devices stream')
reject(err);
}
})
}
const handleFileChange = evt => {
props.handleFileChange(evt);
}
const handleVideoRecorder = blob => {
props.handleVideoRecorder(blob);
}
const handleRearCamera = _ => {
setShowRear(!showRear);
}
return (
<>
<video
className="container is-widescreen"
ref={recorderRef}
autoPlay
playsInline
muted
/>
<div className="level is-mobile">
<div className="level-item has-text-centered">
<div className="player-uttons">
<button className="button is-rounded is-danger" onClick={isRecording ? stop : start}>
<span className="icon">
{isRecording ?
<i className="fa fa-stop"></i>
:
<i className="fa fa-video-camera"></i>
}
</span>
</button>
<button className="button is-rounded is-warning ml-2" onClick={handleRearCamera}>
<span className="icon">
<i className="fa fa-refresh"></i>
{/* {isRecording ?
<i className="fa fa-stop"></i>
:
<i className="fa fa-video-camera"></i>
} */}
</span>
</button>
</div>
</div>
</div>
<div className="level is-mobile">
<div className="level-item has-text-centered">
<div className="file is-primary">
<label className="file-label">
<input onChange={handleFileChange} className="file-input" type="file" name="video" accept="video/mp4,video/x-m4v,video/*" />
<span className="file-cta">
<span className="file-icon">
<i className="fa fa-cloud-upload"></i>
</span>
<span className="file-label">
Upload Video
</span>
</span>
</label>
</div>
</div>
</div>
</>
)
}
export default MediaRecorderCapture;
一旦设置了标志,我正在初始化媒体。
最佳答案
编辑:要在页面加载时枚举摄像机列表,您需要立即请求权限:
window.onload = function(){
navigator.getUserMedia({audio:true,video:true}, function(stream) {
stream.getTracks().forEach(x=>x.stop());
getCamAndMics();
}, err=>console.log(err));
<rest of app>
}
我已经构建了一个应用程序来枚举可用的相机,然后让用户选择要记录的相机:
function getCamAndMics(){
// List cameras and microphones. in the menu
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
var audioSelect = document.getElementById("audioPicker-select");
var cameraSelect = document.getElementById("cameraPicker-select");
if(device.kind=="audioinput"){
//add a select to the audio dropdown list
var option = document.createElement("option");
option.value = device.deviceId;
option.text = device.label;
audioSelect.appendChild(option);
}else if(device.kind =="videoinput"){
//add a select to the camera dropdown list
var option = document.createElement("option");
option.value = device.deviceId;
option.text = device.label;
cameraSelect.appendChild(option);
}
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
}
即使在录制过程中 - 如果用户更改值,摄像机也会切换。这不仅适用于移动设备(前置和后置摄像头),而且适用于可能连接了一些媒体设备的台式机。
var videoOptions = {
deviceId: cameraId,
width: { min: 100, ideal: cameraW, max: 1920 },
height: { min: 100, ideal: cameraH, max: 1080 },
frameRate: {ideal: cameraFR}
};
cameraMediaOptions = {
audio: false,
video: videoOptions
};
cameraStream = await navigator.mediaDevices.getUserMedia(cameraMediaOptions);
代码在 Github:
https://github.com/dougsillars/recordavideo/blob/main/public/index.js
关于reactjs - 如何在用 reactjs 构建的 PWA 应用程序中切换相机?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68047599/
我有一个包含数字和整数的文件,我只想读取整数, 如果它们令人讨厌,请忽略宏,但是我只需要有整数,但是我必须确保还要读取字符串,然后忽略它们 我必须在这里修改什么: #include #include
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
我创建了一个简单的文件,使用 flex,它生成了一个文件 lex.yy.c,现在,我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中? 这是一个小例子,可以清楚地说明我想要实现的目标。 生成的文件示例: FirstClass first
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置,即 0 现在程序将采用另一条十六进制值的
当我将输入从输入文件重定向到 yacc 程序时,在它完成解析文件后,我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D,我希望它执行相同的操作。有办法做到这一点吗
我正在扫描该文件,但它有两种不同的结构。 文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
我想将winsock2.lib 添加到我的程序中,但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗?如果没有,是否有任何 dll(Windows 附带)
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后,运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型,例如 zip 或 gzip,像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
每次尝试用鼠标输入两个顶点时,我都会崩溃。我最近改变了组织每个形状的方式,以确保新形状与旧形状重叠。 这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择,然后选择
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时,它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
我正在尝试加载名为 Tut16_ReadText.txt 的文件,并使其运行程序以输出其重或轻。 我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
我想使用命令行将列表作为参数传递,例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list,[4,5,6] 成为 se
在分析 C# 应用程序时,我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么? 最佳答案 参见:CLR Inside out - The Performanc
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我正在用 Python 开发一个游戏,想知道如何给它自己的图标。我使用的是 Windows 计算机,没有安装 Python 的额外东西。哦,我也在使用 3.3 版,这甚至可能吗? P.S 我在 Sta
我正在使用 tkinter 使用 Python 开发一个项目,该项目将允许对 IP 地址进行地理定位。我有原始转换,我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
我编写了一个程序,您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常,直到它到达某个部分,然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。 这是我的代码。下面是我的问题。 #include void usage(char
我是一名优秀的程序员,十分优秀!